Introduction

The product design process is a series of iterative steps that are needed for shaping any digital product’s UI and UX. It allows product designers like myself to follow reliable and repeatable procedures to ensure the delivery of user-centered products.

Every organization, agency, or designer follows a unique process tailored to their specific workflow, clients, products, and stakeholders. This article isn’t a definitive step-by-step guide to UX design. Instead, it explores the design process I’ve refined over years of working in agency and startup environments.

‍

Each step of the UX design process

Although every organization or designer’s process varies, I’ve found these 8 steps are common on nearly every project I’ve ever worked on:

1. Define
2. Research
3. Draft
4. Prototype
5. Validate
6. Handoff
7. Launch
8. Iterate

‍

Define

Defining the purpose of the project is the very first step in the design process. We need to identify with stakeholders the target audience, timelines, budgets, launch markets and most importantly the problem that the project solves.

It’s crucial for any designer or developer to have an understanding of why the project needs to exist. This informs all the decision making that happens throughout the design and build. Good understanding of project goals will ensure that the project doesn’t suffer from:

• Extreme or excessive scope creep
• Meeting hell
• Unnecessary features
• Missing features
• Design fluff
• Spaghetti code
• Large or dramatic revisions
• Time mismanagement

Here are some commonly asked questions that can help you get started with defining your next project:

• Why do you want to build this app?
• How did you come up with this idea?
• Are there comparable or similar apps you’ve used or seen?
• Who will be using this app?
• Why does this app need to exist?
• How does this app improve the lives of its users?

You’ll want to tailor these questions to suit your needs as well. Ask yourself what missing gaps of knowledge you have and what do you need to fill those gaps in order to begin this project. Don’t feel limited by these questions, stakeholders love to share and talk about their ideas. Ask as many questions as you need. For project stakeholders, I’ve found this is often one of the more exciting aspects of the design process because they get to voice their ideas and opinions. When this step in the design process is executed well, everyone involved in the project will feel heard and involved.

Outcomes for this step can vary, but they’ll usually include at least the following:

• Feature lists
• Project Requirements
• Sitemaps
• Low-fidelity sketches (not wireframes or early prototypes)

Here are some of the tools I like to use to help me at this step:

• Google Meet or Zoom
• FigJam or Miro
• Lucidchart
• Dotted notebook (not sponsored, but I really like LEUCHTTURM1917)

‍

Research

In this step, our goal is to thoroughly understand the target audience’s needs. We will conduct user/market research, interviews and surveys to inform strategies like customer journey mapping and competitive analysis. This fosters insights that are essential for aligning products or services with your target audience.

User Research

We need to understand our target audience before we can make informed design decisions to suit their needs. This is the foundation of any designer who practices human-centered design. In order to capture user insights we can:

• Conduct User Interviews
• Organize Focus Groups
• Job Shadowing
• Study published articles, statistics and other written materials

Once enough data has been captured about our users, we’ll need to take this context and create readable documents for ourselves, other designers, developers and any other relevant stakeholders. By the end of your user research you will have prepared User Personas, User Journey Mapping, and an early draft of User Flows.

Market Research

When we conduct market research, we need to understand what’s already on the market, what common practices exist, and what will make our project stand apart. It’s a good thing if there is already precedence for a project. 99% of apps you will work on will have some sort of competitor that is already on the market. In the Define step, we would have gathered knowledge for why our project exists. There was something that the stakeholders needed that was missing from the market. Conducting a competitor analysis will help us confirm and better understand our project’s unique value. After thorough market research, you should be able to provide:

• List of comparable apps
• Competitive Analysis Report:
  • We want understand how other designers/developers/companies approached the problems our project is trying to solve
• Product Research Report:
  • A deep-dive into a comparable app(s) that will help us understand user behaviors and any common trends/patterns we’ve observed

‍

Draft

After thorough research, we need to turn our knowledge into ideas. We’ll take the early sketches, sitemaps, and feature lists and review them under the lens of our user personas and other research we’ve conducted. All the information we acquired will help us create more detailed sketches, user flows and wireframes.

If you are working in an agile environment, at this point you will be collaborating with a Project Manager (or yourself) to create user stories and epics. User Stories will help us systematically approach problem solving as we draft our solutions.

Common outcomes for this step include:

• Detailed Sketches
• Digital Wireframes
• Early Prototypes
• User Flow Diagrams

‍

Prototype

We can finally take all our preliminary work from research to draft and start designing what our end product may look like. In this step we will produce the following:

• Lean Brand Guide (if applicable)
• Design System
• High Fidelity Mockups
• High Fidelity Prototypes
• Design Documentation
• Developer Notes

‍

Validate

After we’ve completed our designs and prototypes, we’ll need to vet our ideas with our target audience. This ensures we’ve met user’s needs, solved any goals or problems that necessitated this project, and delivered a delightful experience. Here are some key considerations:

• Does the app accomplish what its intended purpose?
• When a user opens the app, do they understand quickly what the app is?
• Do your users get confused?
• How long does it take to complete various tasks in the app?
• Are there any features that users were looking for?
• Were there any features or UI elements that users missed or didn’t use?

We essentially want to test users for accessibility, validation, usability and engagement. To begin this process, you will need to gather users together for test groups. Next, you will need to create a usability test(s) that will go through all the user flows that you’d like to validate. Usability tests vary wildly in length, scenario, and script. One commonality in usability testing is an interview/survey at the end of the test. We do this to gather insights, feedback and opinions from our testers.

There is value in doing both live and asynchronous testing. You’ll receive different kinds of feedback from your testers because the environments they are working in will be different.

I like to keep validation and testing as simple as possible for my testers. In most cases, you only need a few tools:

• Google Meet or Zoom
• Google Forms or Typeform
• Screen Recording Software

Once you’ve completed all your testing, you’ll want to review all the data you’ve received and go back to the research, draft, and prototype step. The design process is largely iterative even in early stages. The data you collect and validate will ensure your final designs before handoff are set up for success!

‍

Handoff

After a few rounds of revisions, you’re now ready to hand off the designs to the developers of the project. Ensure you coordinate meetings with all the developers and engineers to go over the design documentation and developer notes that have been created.

Collaboration and communication is key in this stage of the project. The developers are responsible for bringing the designs to life. We want to ensure the process goes as smoothly as possible. 

In the early parts of handoff, you will have a lot of back and forth between design and development. Developers may ask for clarification or suggest changes due to development complexity.

Side note, Frontend knowledge is extremely valuable for designers and I highly recommend taking some entry level online courses. Here are some principles of front end development to point you in the right direction:

• The Box Model
• CSS Flex
• CSS Grid
• Component-based Architecture
• Design Tokens

Many of these principles exist as tools in Figma and Sketch! Having better knowledge of them in a development context will really help you in handing off designs for development.

‍

Launch

Once the dev teams have completed all of their necessary processes, all relevant stakeholders (including designers) will do a final check of the product. We want to ensure the product still meets its intended goals and is accurate to the original designs and prototypes. 

After all relevant stakeholders have signed off on the product, it is ready to be published and marketed. With the product ready for launch, if you haven’t already done so, any relevant design or prototype files will be shared with web designers and marketing teams. In small startup environments, product designers and developers will often double as the web designers for a project. If this is the case, you’ll want to work with marketing to help launch the product with landing pages, websites or any other needed sales material.

‍

Iterate

When the product has finally been published into user hands, you’ll want to track feedback, bugs and any other metrics that are relevant to the goals of the project. We are not done here! Product Design and UX Design is a continuous process, we repeat all of the steps in this design process to help us improve the product for its users or adapt it to new goals or trends in the market. 

Design is constantly changing and evolving. Naturally your product will continue to improve and refine itself!

‍