The UX/UI design process explained — from research to launch

UX/UI design is the discipline of creating digital products — apps, websites, dashboards, SaaS tools — that are both useful and usable. UX (User Experience) design focuses on how a product works: flows, structure, task completion. UI (User Interface) design focuses on how it looks and feels: visual design, typography, color, interaction design.

This lesson walks through the complete UX/UI design process from initial research to tested, developer-ready designs — the same process used by product design teams at companies of every size.

UX research and information architecture in the design process

The UX/UI design process begins with understanding users and structuring information before any visual design work starts.

• User research — interviews, surveys, analytics review, competitive analysis. Identify who the users are, what tasks they need to accomplish, what frustrates them about current solutions, and what success looks like.
• Personas — synthesize research into 2 to 3 representative user profiles with goals, behaviors, pain points and contexts of use. Personas prevent designing for an abstract audience.
• User journey maps — plot the steps a user takes to accomplish key tasks, including emotions, pain points and opportunities at each stage.
• Information architecture — organize content and functionality into a navigable structure. Card sorting exercises reveal how users expect information to be grouped.
• User flows — diagram the step-by-step paths through key tasks: sign up, purchase, onboard, recover password. Each flow identifies every screen and decision point.

Skipping research is the most expensive mistake in product design. Building the wrong thing costs far more than the time invested in understanding what to build.

Wireframing and the UX/UI design process

Wireframes are low-fidelity layouts that define structure, hierarchy and flow without visual design distractions.

• Low-fidelity wireframes — grayscale boxes, placeholder text, basic layout. Focus entirely on content hierarchy and user flow. Pen-and-paper or Figma with gray rectangles.
• Content-first approach — wireframe with real content (or realistic approximations), not lorem ipsum. Content length, tone and structure affect layout decisions fundamentally.
• Responsive considerations — wireframe for mobile first, then expand to tablet and desktop. Mobile constraints force prioritization; desktop layouts add back what the smaller screen dropped.
• Component identification — during wireframing, identify repeating patterns (cards, list items, form fields, navigation patterns). These become the components in your design system.
• Stakeholder review — present wireframes to stakeholders and users before investing in visual design. It is much faster to rearrange gray boxes than to redesign polished screens.

The goal of wireframing is alignment: everyone agrees on what the product does and how it is organized before anyone debates what color the buttons should be.

Visual design, prototyping and usability testing

Visual design transforms approved wireframes into polished, interactive designs ready for development and testing.

• Visual design — apply the brand's design system (colors, typography, iconography, spacing) to wireframes. Design one key screen first (the hero), get approval, then extend to remaining screens.
• Design tokens — define color, spacing and typography as reusable tokens (variables) in Figma. Changes propagate everywhere, preventing one-off inconsistencies.
• Interactive prototypes — connect screens in Figma with interactions (click, hover, scroll) to create a clickable prototype. Test task flows without writing code.
• Usability testing — recruit 5 users (enough to find 85% of usability problems). Give each a realistic task ('find and purchase Product X') and observe where they struggle, hesitate or fail.
• Iteration — fix usability issues found in testing, update the prototype and test again. Two rounds of testing typically catch the critical problems.

Deliver final designs to developers with Figma's Dev Mode — CSS values, spacing measurements, color codes and exported assets are all generated automatically from your designs.

When evaluating ui design process, start with the fundamentals: what problem it solves, who it serves, and how it compares to the alternatives buyers consider first.

Start with the fundamentals. Define who you are serving, the single outcome you want, and the budget you are comfortable committing before you compare any options.

A practical rule is to favour clarity over cleverness. The choice that is easiest to understand, spell, remember and act on tends to win over the long run.

Context changes the answer. What is optimal for a fast-moving startup is rarely optimal for an established brand, so weigh your own stage, market and ambitions.

Avoid the common mistakes: rushing the decision, copying competitors blindly, and ignoring the total cost of ownership beyond the very first year of use.

Think in terms of trade-offs rather than a single perfect answer. Every option trades memorability, cost, reach and flexibility in a slightly different mix.

Document your reasoning. Writing down why you chose one path makes it far easier to revisit the decision later and to explain it to partners and investors.

Test with real people. A quick check with a handful of your actual customers will surface problems that no amount of internal debate ever reveals.

Plan for growth. The option that fits today should still make sense when your audience, catalogue or team is several times larger than it is right now.

Finally, revisit the decision periodically. Markets, tools and best practices move quickly, and a choice that was ideal last year may deserve a fresh look today.

When evaluating ui design process, start with the fundamentals: what problem it solves, who it serves, and how it compares to the alternatives buyers consider first.

Start with the fundamentals. Define who you are serving, the single outcome you want, and the budget you are comfortable committing before you compare any options.

A practical rule is to favour clarity over cleverness. The choice that is easiest to understand, spell, remember and act on tends to win over the long run.

Context changes the answer. What is optimal for a fast-moving startup is rarely optimal for an established brand, so weigh your own stage, market and ambitions.

Avoid the common mistakes: rushing the decision, copying competitors blindly, and ignoring the total cost of ownership beyond the very first year of use.

Think in terms of trade-offs rather than a single perfect answer. Every option trades memorability, cost, reach and flexibility in a slightly different mix.

Frequently asked questions

What is the difference between UX and UI design?

UX design determines how a product works — user flows, information architecture, task completion, research and testing. UI design determines how it looks — visual design, typography, color, layout and micro-interactions. Both are necessary; UX without good UI feels utilitarian, UI without good UX looks beautiful but frustrates users.

Do I need to code as a UX/UI designer?

Not required, but beneficial. Understanding HTML, CSS and basic JavaScript helps you design within technical constraints, communicate with developers effectively and prototype interactions that Figma cannot simulate. You do not need to be a developer, but you should be technically literate.