1. Research + Insights
  2. UX Design
  3. The Complete UX Design Process [2021 Guide] | Konrad®

The Complete UX Design Process

Explore the powerful process behind today’s most engaging experiences and see it in action from research to wireframes

About theUX Design Process

What is the UX Design Process?

The UX Design Process outlines a series of steps designers use to bring human-centered solutions to life. When used within a Design Thinking framework, the UX Design process allows teams work through the highly iterative “Ideation” and “Prototyping” steps, realizing the strategic alignment arrived at in “Define”.

Key deliverables in the UX Design process

  • Sitemaps and Information Architecture (IA)
  • Wireframes and prototypes (static, interactive)
  • Process, task and user flows
  • Functional specifications

The UX Design process works in tandem with UX Research, which aims to understand both WHO the users are (through user interviews, surveys, diary studies), and HOW they experience a new or existing solution (through usability studies, remote walkthroughs, A/B testing). Given the distinct differences between the two phases of learning vs building, we have devoted a separate Guide to UX Research.

What is the UX Design vs Design Thinking?

Design Thinking and UX Design are two closely related disciplines that work together to produce innovative solutions. In practice, Design Thinking is used to find innovative ideas, whereas UX Design is the process for bringing them to life.

Design ThinkingUX Design
Generates requirements and alignmentDevelops ideas and prototypes
Inherently cross-functionalRequires experience
Focused on strategy and innovationFocused on efficiency through iteration
Champions user-centered designChampions user-centered design
“What’s best to build?”“How do we build it best?”
What is UX Design vs Design Thinking? Comparing two user-centered design processes.

The UX Design Process Steps

Thanks to its iterative nature, the UX design process is often depicted as a cycle (ex. “build-measure-learn”). While such cyclical models reflect the overall process, the “build” step can still feel like a black box.

The following four steps help to unpack how UX designs are built in practice: By adding layers of fidelity to a foundation of research.

The UX Design process translates strategic requirements into functional specifications through a series of increasing fidelity designs. UX research methods are used throughout to guide critical decisions as needed (not shown).

Overview of the 4 UX Design Process Steps

  • Step 1

    Translate Requirements

    The first step of the UX design process is translating strategic requirements into an actionable framework. This step requires the consideration of a variety of UX research outputs, including user personas, user stories, journey maps, surveys, audits and the current landscape. User stories are particularly important here, as they are used to create the roadmap against which early sketches are based.

    User Story Mapping can sort dozens — or even hundreds — of user stories into a simple thematic roadmap to work from. Creating a map is a highly collaborative process, as it informs all downstream designs including the prioritization of features and functions. Other forms of mapping, like user journey maps or UX funnels

    Objects, actions, attributes
    When building complex solutions, it may be helpful to define a set of “Objects, Actions and Attributes” (i.e. nouns, verbs, adjectives) first. These can be distilled directly from User Stories, and captured in “O-A tables”. For an in-depth look at the process, refer to UX Magic [1].

  • Step 2

    Sketch Architecture

    Sketching and other rapid prototyping methods allow for low-cost iteration and alignment early on. The goal of sketching is to align stakeholders on the core solution elements — such as the UX architecture, information architecture, user flows and screen archetypes — before visualizing the experience at a higher fidelity.

    Physical and digital whiteboards are often used during sketching to simplify collaboration and avoid feeling “locked in” to early ideas simply because of the time invested to articulate them.

    UX Architecture

    • How interfaces are nested and connected
    • Defines screen types, widgets and user flows
    • Focus on usability and goal completion

    Information Architecture

    • How interfaces are nested and connected
    • Defines screen types, widgets and user flows
    • Focus on usability and goal completion
  • Step 3

    Wireframe Experiences

    Thanks to modern tools like Figma and Sketch, the speed of UX wireframing has improved dramatically vs even just 5 years ago. This means higher-fidelity prototypes can be tested earlier in the design process than ever before, allowing teams to iterate on true-to-life experiences and release more usable solutions.

    Wireframes are used to visualize sketches and user flows within real context. As ideas are tested and refined, interactive prototypes are often created to examine the full experience.

    Depending on the needs of the project, wireframes can be digital, physical or even conversational — whatever format is required to articulate the experience at the required level of clarity.

  • Step 4

    Define Specifications

    The final step of the UX design process provides functional details about the production-ready experience to UI designers and developers. Everything from “what doing this does”, down to mobile breakpoints and accessibility requirements are clarified. These specifications often take the form of annotated wireframes, the components of every unique interface are inventoried and described.

    Annotated wireframes specify the functionality requirements for UI design and development.

UX Design Process
Ecommerce Example

So what is the UX process in practise? In this section, we work through a fictitious ecommerce example from personas to prototypes. We’ve imagined the project for an established commuter bicycle brand gearing for growth with a scalable DTC effort.

On the rise
DTC Ecommerce sales have risen over 30% YoY vs. pre-Covid levels as businesses increasingly adopt DTC models. [2]

For our example, we’re assuming the UX design process is starting on the heels of one or more design thinking sessions. During these sessions, a cross-functional team (including designers) would have framed the business opportunity and aligned on a validated set of user personas, stories and measures of success.

These outputs, along with a comprehensive current landscape, are then translated into a foundation for UX design via user story maps and technology requirements.

Related Guide
Design Thinking Workshops
Go to Guide

Step 1Translate Insights

Review the current landscape

As mentioned, the bicycle brand is ready to innovate its business model with a direct-to-consumer approach. In the UX design process, this goal would be captured within a Statement of Opportunity — a key output of design thinking sessions. Also called a “problem statement”, the Statement of Opportunity serves a guiding light for downstream decisions.

Statement of Opportunity

As a trusted commuter bicycle brand
We want to design a scalable digital experience
So that we can access new markets and increase sales

With this perspective in mind, we can step back and look at the current landscape. While every landscape is different, they should always aim to answer three important questions:

Current Landscapes answer 3 questions:

  1. WHO are we designing for?
  2. WHAT are we working with?
  3. HOW are we measuring success?

Who are we designing for?
User personas are the best way to articulate WHO the experience is for, and the context in which they will experience it. Robust user personas outline all the patterns, behaviors, frustrations and goals that designers need to consider, including the devices they’ll be using, their online shopping habits/tech exposure, and what they’re looking for in a bicycle/bike-buying experience.

For our purposes, let’s assume two primary user personas had previously been developed:

Basic proto-personas like these can help you get started with UX Design prior to completing the UX Research stages.

Note that we’re using only two primary users here for the sake of simplicity. In real life, we may also consider personas for job seekers, employees, suppliers or even family members who are picking out the bike they want on the website, but aren’t the one who’s buying it. See our UX research guide to learn more about the different types of user personas.

What are we working with?
To build a scalable solution, UX designers need a clear picture of systems and processes that will influence the final experience. This includes everything from how customer data is handled and inventory updated, to how content is created and legal language approved. In addition, the technology in place or expected by launch has a significant impact on efficiency — what’s a simple task on one platform may be time consuming or impossible on another.

Current Solution

  • Content / Assets
  • Search / Traffic data
  • Heuristic analysis

Supporting Internal Systems

  • Inventory
  • Payment / Fulfillment
  • Content management

Supporting Internal Processes

  • Content approvals
  • Supplier agreements
  • Legal requirement

Broader Industry Perspectives

  • Market research
  • Competitor experiences
  • Emerging trends

For our example, we can assume the company has a corporate website with some basic product information, but no ability to buy or customize bikes, and only a basic store locator. They’ve used a free CMS like WordPress to update their catalog, while inventory lives in a spreadsheet offline. While this setup may have been feasible for a smaller B2B supplier, it needs to be transformed to function in the DTC space.

How are we measuring success?
KPIs are the final aspect of the current landscape to consider. While every design should consider a suite of experience-related metrics, it’s important to identify the few that will be driving decisions.

Given we are building a net-new Ecommerce experience, we can expect the at-launch KPIs to focus on conversion rate, with secondary experience-related metrics examining bounce rate, time spent per page, and scroll depth. Considering these factors in advance also ensures the technology teams will be ready to install the necessary tracking and analytics features during implementation.

Common KPIs for Web

  • Bounce rate
  • Purchase rate
  • Time spent
  • Scroll/click depth
  • Email captures
  • Social traffic
  • Avg. cart size

Develop user story maps

Having reviewed the Statement of Opportunity and the Current Land scape, UX Design teams are ready to map out the User Stories for each persona into a cohesive framework for design.

User Stories are a powerful tool for articulating the specific user goals. They take the form of a sentence: “As a [role], I want [goal], So that [Why].” During Design Thinking workshops, teams generate dozens of user stories for each persona. These can then be sorted into groups forming a story map.

Consider two simple sets of user stories for our example personas:

These user stories can then be sorted into themes that connect user goals and features and functions. For experiences where multiple personas interact with the same interfaces (ex. websites), it is best to create a single story map that combines all their stories. However, for experiences where each user has their own interface (ex. intranets), separate story maps work best.

Example user story map

You can sort the user stories above into two primary themes: Learning and Buying. Each theme reflects a high-level user goal that, while connected, are distinct. These two major themes can be further segmented into sub-goals called Epics. For example, Learning can be split into three epics: The Brand and The Bikes and The Policies. This type of segmentation is common in commerce, where consumers consider both the brand and the product in question when making purchasing decisions

Once the stories have been mapped into groups, it is easy for teams to prioritize epics and stories according to their strategic goals by placing priority items above “nice to haves”. For a detailed look at user story mapping, see our complete guide to User Stories.

related guide
How to create a user story map
Go to Guide

Step 2Sketch Architectures

With a user story map outlining the important goals, we can begin to visualize the experience architecture.

The goal of this step is to align on the overall sitemap and basic user flows — such as the steps required to make a purchase or complete a wizard. Given the variety of ways that screens can be defined and sequenced, whiteboards are a must.

Review inspiring examples

Examples that are both directly or indirectly related can be an excellent source of inspiration. Before sketching begins, review examples of other inspiring experiences that were highlighted during the design thinking sessions. In our case, a variety of direct-to-consumer experiences where bigger-ticket items are sold online could be referenced.

Casper was an early DTC innovator that overcame the traditional in-store mattress-buying habit with a clean, trustworthy digital shopping experience. Today’s Casper store contains several best practices to consider, including the prominence placed on reviews, live chat, financing and how products are compared.
Tesla is another DTC innovator that stepped away from the dealer model to own the entire buying experience. Their online car customizer is a great example of clean, product-focused UX, and the proximity of live chat and financing options are handled tastefully.

Determine UX archetypes

Archetypes describe screens that users have become familiar with through years of experience. By leveraging archetypes, we can create more intuitive experiences efficiently. Reviewing the story map for our experience, we can begin to see several screen archetypes emerging:

Related UX Archetypes (screen types)

  • Menu: Wayfinding (home page)
  • Catalog: Selecting items to purchase (see all bikes)
  • Tool + Canvas: Manipulating objects (customizer)
  • Funnel: Complete a series of steps (payment, wizard)

Develop UX Sitemap

Considering these archetypes in the context of our overall story map, we can begin to sketch out the pages required by the experience in the form of menus/navigation. Note that sitemaps are used to align strategy, design and technology teams before shifting into visualization — so labels and hierarchies aren’t set in stone.

In web design, UX sitemaps bring our user story map to life by articulating all the pages or screens required in the experience.

While our sitemap is relatively simple, it demonstrates the importance of user story maps in the UX design process. For example, because we know users want to learn about the brand, the bikes and our policies, we’ve dedicated pages to each. And the ability to find bikes by style or purpose is captured in the “Compare” and “Wizard” pages, respectively.

Note that if out user story map included the desire to create wish-lists or register for services, our sitemap would include pages for setting up a personal user account.

Define the navigation

With a sitemap established, the UX design process can shift to defining the navigation. Also called menus, most websites divide their navigation into two zones: Primary and Secondary. The Primary zone lives at the top of the page, and provides a “folder-like” experience. The Secondary zone is often placed at the very end of the page, in a “footer”.

This example of a “mega menu” provides helpful wayfinding and marketing opportunities as users progress through the experience.

Modern web technologies allow for richer navigation experiences than ever before. From “sticky navs” that remain at the top of the browser as you scroll, to “mega menus” that provide detailed information when you hover over options, it is no longer enough to provide a simple list of links at the top of a page — even if the labels and taxonomy are intuitive.

Based on the expectations of a modern experience from our users, we’ve selected a mega-menu style for “Our Bikes” option that can be used to pre-select the style of choice. Options to “See All Bikes” direct traffic to the Our Bikes page, while “Compare bikes” would lead to the comparison page featuring side-by-side comparison content.

Step 3Wireframe Experiences

The third (and arguably most exciting) step of the UX design process is wireframing. This is where all the strategic elements are combined into a representative visual experience. Like the blueprints of a house, they specify the solution and provide a roadmap to work from during downstream implementation. And thanks to having already established user story maps, sitemaps and the IA, we can begin wireframing with a clear focus on optimizing specific interfaces and interactions.

Not all wireframes are created equal.

It is common practice to start with simple wireframes, adding fidelity as more is learned. While whiteboards are great for outlining the basic patterns and components of each page, tools like Sketch or Figma are best for articulating the realistic experience.

Wireframing the learning theme

For our example, we’ve divided our wireframes according to our two themes: Learning and Buying. Pages within the Learning theme are devoted to educating visitors around three Epics: The Brand, The Bikes and Our Policies. Flip through the gallery below to get a sense for the style and clarity of “medium-fidelity” UX wireframes for our experience.

Homepage. The desktop and mobile homepages visualize what visitors will experience immediately upon landing on both desktop and mobile.
Bike Wizard. A single page of the wizard archetype demonstrates how the data-input process functions, and presents a floating customer service CTA.
Our Bikes. The product overview page provides a rich scrolling experience with a heavy emphasis on product visuals and style-specific reviews.

Note UX designers in the wireframing step must always work closely with brand and content strategists to refine the requirements for each page. This is where defining a set of reusable components such as cards, galleries and callouts helps create a consistent experience across a range of content needs.

Stay structural.

Wireframes are like the blueprint for a house: They outline how all the spaces and systems fit together, and leave fit and finish for interior design. In the world of user experience, production-ready visual elements are defined by UI designers based on the wireframes.

Wireframing the buying theme

The second set of wireframes to consider are those for the buying experience. These wireframes fall within our Epics of Finding, Customizing and Paying, and include pages for comparing models, building the bikes and providing payment information.

Comparison. The page opens with a simple side-by-side of our three bikes styles, highlighting their differences in price and purpose.
Bike Builder. The bike builder provides a tool+canvas interface for creating bikes by selecting from a variety of features and finishes.
Payment. Differentiated checkout page provides a familiar, goal-oriented interface for making secure online transactions.

Step 4Define UX Specifications

Once all the pages (or page templates) outlined in the sitemap have been designed and validated through user/heuristic testing, we can move on to the final step of the UX design process: Specification.

Simply put, the goal of this step is to explain how everything should work to both downstream developers and internal stakeholders. In UX design, specifications are typically provided in two formats: Annotated wireframes and Clickable prototypes. While the latter is increasingly common in modern design practice, we have included examples of both formats for the sake of demonstration.

Annotated UX wireframes

Annotated UX wireframes add contextual labels on top of the highest fidelity of wireframes developed in Step 3. Like the pages of an Ikea catalogue, they use a simply numbering system to connect visuals and copy. Depending on the “distance” of the hand-off (ex. to the internal dev team vs global partners or external vendors), a variety of items can be specified:

Items to specify in annotated wireframes

  • Functionality of all buttons, widgets and components
  • Intention of imagery, icons and text areas
  • All data integrations (forms, sign-up, sign-in)
  • Any UI constraints and limitations
  • Accessibility considerations (ex. WCAG)
  • Device-specific factors

Below are two simple examples of annotated wireframes. The first points out specific considerations for our homepage, while the second takes a closer look at the checkout page. In reality, technical annotations specifying character limits, error messages, breakpoints and frame sizes would all be included, as would notes about specific plugins (ex. chatbot) and platform limitations (ex. Shopify catalogue).

Clickable UX prototypes

Thanks to modern UX tools like Figma, clickable prototypes are quickly replacing annotated wireframes as the final deliverable. This is largely because maintaining static spec documents is more resource intensive vs having a living interactive prototype with desired functionality baked in.

Next stepsImplementing UX Designs

Having working through the complete UX design process and produced a functional set of wireframes, it’s time to shift gears into implementation. For most UX design projects, implementation includes development of all the copy, visuals and code required for the real-world experience.

This work is typically completed by specialists in each of the respective areas. For our DTC example, we could expect the next steps to include:

UX Designs Inform

  • Visual Design
  • Front-End Development
  • Back-End Development
  • Content Strategy
  • Copywriting/UX Writing
  • Digital Marketing Strategy
  1. Rosenberg D. UX Magic. 2020.
  2. Howarth, J. (2021, January 20). The 7 Biggest DTC Trends of 2021. Exploding Topics. https://explodingtopics.com/blog/dtc-trends.