The Complete 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”.

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.

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.

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.

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.

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

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.

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:

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:

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.

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.

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.

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

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.

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.

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:

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.

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.

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”.

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.

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.

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.

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.

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.

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 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:

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).

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.

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: