The UX/UI Design Process: How It Really Works, Step by Step

The UX/UI design process is the sequence a team follows to turn a product idea into screens someone can actually use. It runs from research, through structure and wireframes, into visual design, prototyping and testing, and then out the other side into engineering handoff and post-launch iteration.

Most published versions of it have between five and eight steps. The count varies because teams group the same work differently, not because they disagree about the work. Below is the seven-step version, what each step produces, how long it takes, and the tools used at each point.

UX and UI: two disciplines, one product

The two terms get used interchangeably and they are not the same job. UX is the structure and the logic. UI is the surface the user touches. Think of a building: UX is the floor plan and the circulation, UI is the finish and the fixtures. A beautiful interface over a broken structure still fails.

What UX design is

UX design is concerned with how a product is understood and used. The UX designer does not ask what it should look like, but how it will be perceived, where people will get stuck, and what they are actually trying to accomplish. The work is research, analysis and structure, and it is grounded in observed behavior rather than opinion.

The output is decisions: what the product does, in what order, and how information is organized. It is the part of the process that determines whether anyone can complete a task at all.

What UI design is

UI design is the visual and interactive layer built on top of that structure. It covers layout, hierarchy, color, typography, iconography, buttons, form fields, states and motion. The goal is to make the next action obvious: a button has to look pressable, a field has to invite input, an error has to say what to do about it.

Good UI also encodes the brand. It is where the product stops feeling like a wireframe and starts feeling like a specific company made it.

The UX/UI design process, step by step

The sequence below is iterative, not linear. Teams loop back constantly, and the later steps regularly send you back to the earlier ones.

Step 1: Discovery and research

The goal is to understand the problem before designing a solution. This step sets the business objective and gathers evidence about the people who will use the product.

• Stakeholder alignment: what does the business need this product to achieve, and what is the single measure of success?
• User interviews: one to one conversations, typically five to eight per user group, to understand goals, habits and frustrations.
• Surveys: cheap validation at scale once you know which questions matter.
• Analytics review: if the product already exists, where do people drop out and which pages do they actually use?
• Competitive review: not to copy, but to establish what users already expect as a baseline.

The output is a written problem statement and a set of user needs, ideally in the form of user stories: as a customer, I want to track my order, so I know when it will arrive.

If the product already exists, a structured UX audit is usually the fastest way to get a defensible list of problems.

Step 2: Define and structure

With the needs understood, the content and functionality get organized.

• Personas: archetypal users built from the research, used to keep decisions specific. Designing for "everyone" produces a product that suits nobody.
• User journey map: every step and touchpoint a persona passes through to reach a goal, which is how you locate the friction.
• Information architecture: the hierarchy of content and features. Card sorting, where users group labels themselves, produces a structure that matches how they think rather than how your org chart is arranged.
• Sitemap and user flows: the map of screens and the paths through them, including the error and empty states everyone forgets.

Step 3: Wireframes

Wireframes are the skeleton: low-fidelity layouts, usually grayscale, with no visual styling. Their whole purpose is to let you argue about structure without anyone being distracted by color.

Some teams sketch on paper first, which is faster and easier to throw away. Then comes zoning, a rough diagram placing the major blocks on a page, and then the wireframe proper, showing each screen's content, hierarchy and controls.

Approve the wireframes before styling begins. Restructuring a page at this stage costs an hour. Restructuring it after the visual design is built costs a week. Our wireframing guide covers the fidelity levels in detail.

Step 4: UI design and the design system

Now the wireframes get dressed: color, typography, imagery, iconography and spacing, applied consistently. The output is high-fidelity mockups that look like the finished product.

This is also where the component library gets built: every reusable element with all of its states, plus the color and type tokens and the spacing scale. A small product may only need a UI kit. A product that will keep growing needs a design system, which adds the rules and documentation that keep things consistent as more people contribute.

Skipping this step is why products drift. Ten screens designed one at a time will contain eleven shades of gray.

Step 5: Prototyping and user testing

Static mockups get linked into an interactive prototype that behaves like the real thing: clickable buttons, screen transitions, real navigation.

Then you put it in front of people. Five participants per user group surfaces the large majority of serious usability problems, which is why testing is cheap relative to its value. Watch where they hesitate, where they choose the wrong path, and where they say something different from what they do. Our guide to usability testing covers moderated versus unmoderated and how to write tasks.

A usability problem caught on a prototype is dramatically cheaper to fix than the same problem found after engineering has built it. That gap is the entire economic argument for prototyping.

Step 6: Developer handoff

This step is the one most often skipped in write-ups of the process, and it is where a good design most often degrades.

• Annotated files: spacing, breakpoints, interaction behavior, states and edge cases documented rather than implied.
• Exported assets: icons and images at the right sizes and formats, named consistently.
• Tokens: color, type and spacing values in a form engineering can consume directly rather than eyeball.
• A walkthrough: a live session with the engineers, because a written spec never covers everything.
• Design QA: the designer reviews the built version against the design before release, and files the differences.

Budget designer time during the build, not just before it. A handoff that ends when the file is shared is not a handoff.

Step 7: Launch and post-launch iteration

Shipping is a checkpoint, not the end. Once real users arrive you get data no prototype could produce.

• Measure against the baseline: the metric agreed in step one, on the specific flow that changed.
• Watch session recordings and heatmaps: these show behavior at a scale interviews cannot.

Run A/B tests: on the specific elements you were unsure about. See our notes on A/B testing landing pages.

• Feed it back: what you learn here becomes the research input for the next cycle.

What each stage produces

• Zoning: a rough block diagram of a page. Purpose: agree the overall organization and information hierarchy.
• Wireframe: a grayscale structural mockup with no visual design. Purpose: settle structure, usability and feature placement.
• Mockup: a high-fidelity static visual with real color and type. Purpose: represent the final appearance.
• Prototype: an interactive mockup simulating navigation and actions. Purpose: test the experience before anyone builds it.
• Design system: documented components, tokens and rules. Purpose: keep the product consistent as it grows.
• Handoff package: annotated files, assets and tokens. Purpose: get the built version to match the designed version.

The tools, stage by stage

• Research and synthesis: Maze, Dovetail and Lookback for studies and interview analysis. Miro or FigJam for affinity mapping and workshops.
• Analytics and behavior: Google Analytics for what happened, Hotjar or Microsoft Clarity for heatmaps and session recordings.
• Wireframing and UI: Figma is the industry default. Sketch is still used on Mac-only teams, and Adobe XD has largely been retired.
• Prototyping: Figma covers most needs. ProtoPie and Framer handle complex interaction and motion that Figma cannot express.
• Design systems: Figma libraries with Storybook on the engineering side, and a token pipeline such as Tokens Studio between them.
• Handoff: Figma Dev Mode, plus whatever issue tracker the engineering team already lives in.

The tool matters far less than the discipline. A team with a clear process on paper will beat a team with the best software and no process.

How long it takes

Rough bands for a mid-sized product feature, assuming a dedicated designer:

• Discovery and research: one to three weeks, mostly determined by how hard your users are to recruit.
• Define and structure: one to two weeks.
• Wireframes: one to two weeks.
• UI design and components: two to four weeks, longer if the design system is being built from scratch.
• Prototyping and testing: one to two weeks per round, and you usually want two rounds.
• Handoff and design QA: ongoing through the build.

A small app can compress to a few weeks end to end. A complex platform for a large company stretches over months, and iterates continuously rather than finishing.

The pillars of a good user experience

You will see this framework quoted with six pillars or with seven. The six-pillar version is Magnus Revang's, and the seven-pillar variants split one of them or add findability separately. The list matters less than using it as a checklist.

• Findability: people can locate the product, and once on the page can tell what it does. That starts with search and clarity of the value proposition.
• Accessibility: usable on any device and by people with disabilities. This is a legal requirement in many markets, not a nice-to-have.
• Desirability: the design is pleasant and creates a positive impression, which is what makes people willing to continue.
• Usability: the user does not have to think to complete a task.
• Credibility: the interface reassures. Professional design, clear information and honest signals build trust.
• Usefulness: the product solves a problem the user actually has. The most common cause of failure, and the one design cannot fix on its own.
• Efficiency: the goal is reached quickly, and the product performs.

Where an external team fits

Not every company can staff all seven steps in house. Our design subscription gives you access to senior UX and UI designers on a fixed monthly fee, with plans from 949.90 euros excluding VAT a month for Prestige, 1,399.90 euros for Elite, and 2,099.90 euros for Commando with no commitment, or 759.90 euros a month on a twelve month term.

It covers wireframes, high-fidelity mockups, design systems and prototype revisions, and the higher plans allow several requests to be worked in parallel, which is what an iterative cycle needs. What it does not cover is development or technical implementation, so plan your engineering capacity separately.

FAQ