The UX design process is the sequence of steps a team follows to turn what it learns about real users into a tested, clickable design that developers can build. In practice it runs in five stages: research, synthesis, information architecture, wireframing and prototyping, then usability testing before handoff. Each stage answers one question and produces a concrete deliverable, so you always know what “done” looks like before you move on.
Most guides stop at naming the stages. This one goes further. You’ll get the questions each stage should answer, the deliverables you should expect, realistic time estimates, a fidelity comparison table, and a checklist with exit criteria you can hand to your team or your vendor.
We wrote it for founders, product owners and marketing heads who are about to fund a new app, portal or SaaS product and want to know what a disciplined UX design process looks like from the client side of the table.
1. What the UX Design Process Is and Why It Matters for Your Business
A UX design process exists to reduce one specific risk: building the wrong thing, or building the right thing in a way people can’t use. Code is expensive to change once it ships. A wireframe takes minutes to redraw, so the earlier you find a problem, the cheaper it is to fix.
The stages below are the version we use and recommend. Other frameworks exist (the Double Diamond uses Discover, Define, Develop and Deliver; Design Thinking uses five phases), but they all describe the same movement from understanding to making to checking.
What happens at each stage
- Research: You talk to users, watch them work and study existing data to learn what they need and where they struggle today.
- Synthesis: You turn raw notes into personas, journey maps and a short list of problem statements the product must solve.
- Information architecture: You decide what content and features exist, what they’re called and where they live in the navigation.
- Wireframing and prototyping: You sketch screens, connect them into flows and raise the fidelity step by step until the design looks and behaves like the real product.
- Usability testing: You put the prototype in front of real users, watch where they hesitate and fix those spots before a developer writes production code.
How the UX design process fits agile delivery
A common objection is that research and prototyping slow down an agile team. They don’t have to. The usual pattern is to run discovery and the first prototype one or two sprints ahead of development, then keep design one sprint ahead from that point on. Developers build what was tested last sprint while designers test what will be built next sprint. The UX design process becomes a parallel track with its own backlog, instead of a gate that blocks the whole team for three months.
What skipping it costs you
When a team skips research, it designs for the founder’s assumptions. That can work when the founder is the target user. It usually doesn’t work for a hospital admin system, a B2B ordering portal or a student management tool, where the people clicking every day have habits and constraints the buyer never sees.
The cost shows up later as rework. A checkout flow that confuses users after launch means new designs, new code, new QA and a new release; the same flaw found in a prototype test means an afternoon of redrawing. If you want the revenue side of this argument, our post on how good UX design increases conversion rates covers it in detail.
2. User Research Methods and the Other Key Inputs
Research is the stage of the UX design process most clients want to shorten. It’s also the one that decides whether everything after it is aimed correctly. You don’t need a six-month study; you need the right method for the question you’re asking.
Attitudinal vs behavioral research
Nielsen Norman Group’s guide to which UX research methods to use maps 20 methods across three dimensions. The most useful one for budgeting is the split between attitudinal and behavioral research: attitudinal methods capture what people say, while behavioral methods capture what they actually do. The two often disagree. A user may tell you search is the feature they care about most, then never touch the search bar during a session.
For usability questions, lean toward behavioral data. Use attitudinal methods (interviews, surveys) to understand motivation and vocabulary.
Choosing user research methods by question
Pick user research methods from the question backward, never from habit. The table below matches common product questions to methods that answer them well.
| Question you need answered | Method that fits | Typical effort (estimate) |
|---|---|---|
| Who are our users and what are they trying to get done? | User interviews (5 to 8 people per user type) | 1 to 2 weeks including recruiting |
| How do people do this task today, with what tools? | Field study or contextual observation | 1 to 2 weeks |
| What do decision-makers need from the product? | Stakeholder interviews | 2 to 4 days |
| How do competitors handle the same flow? | Competitive analysis | 3 to 5 days |
| How do users group and label our content? | Card sorting (open or closed) | 3 to 5 days |
| Where do current users drop off? | Analytics review and search-log analysis | 2 to 4 days |
| Can people complete the key tasks in our design? | Qualitative usability testing | 1 week per round |
These ranges are our estimates for a small to mid-sized product. They shift with how hard your users are to reach; recruiting five hospital consultants takes longer than recruiting five online shoppers.
Synthesis: personas, journey maps and problem statements
Raw interview notes are not a deliverable. In the UX design process, synthesis is where you group observations into patterns, usually on a digital whiteboard, then write them up in three forms:
- Personas built from real interview data, one per distinct user type. Two or three is normal. Eight is a sign you haven’t prioritized.
- Journey maps that show each step a persona takes today, what they feel and where it breaks.
- Problem statements in a fixed format, for example: “Clinic receptionists need to confirm a patient’s insurance in under a minute because the queue builds while they wait on the phone.” (This is a hypothetical example.)
The problem statements become your acceptance criteria later. Every screen in the final prototype should trace back to at least one of them.
Information architecture
Information architecture (IA) is the structure underneath the screens. You produce a sitemap or app map, a navigation model and a naming list for every major section. Card sorting results feed this directly, because they show you the labels users expect instead of the labels your internal team uses.
Get IA reviewed before anyone draws a wireframe. Of all the stages in the UX design process, this is the one where a one-hour review saves the most rework. Moving a whole section later forces changes across dozens of screens.
3. Wireframing and Prototyping: Fidelity Levels Compared
Wireframing and prototyping is where the UX design process becomes visible to stakeholders. The mistake is jumping straight to polished visuals. Fidelity should rise only as confidence rises, because a beautiful screen invites feedback on colors while the real question is whether the flow works.
| Fidelity level | What it looks like | Main question it answers | Typical time (estimate) | Best tool choice |
|---|---|---|---|---|
| Sketch / paper | Hand-drawn boxes, no styling | Do we have the right screens and steps? | Hours to 2 days | Paper, whiteboard |
| Low-fidelity wireframe | Grayscale layout, placeholder text, real labels | Is the content in the right place and order? | 2 to 5 days per main flow | Figma, Balsamiq |
| Mid-fidelity clickable flow | Linked wireframes, basic interactions | Can a user finish the task without help? | 3 to 7 days per main flow | Figma prototype mode |
| High-fidelity prototype | Final UI, real copy, brand colors, states and micro-interactions | Does it feel finished and is it ready for development? | 1 to 3 weeks for core flows | Figma with a component library |
Figma’s own guide to prototyping gives a similar split: low-fidelity work takes hours to a couple of days, high-fidelity work takes days to weeks. The time estimates above are ours and assume a product with four to six core flows.
Designing for mobile and web at the same time
If your product ships on both a phone app and a web dashboard, decide early which one is primary for each user type. A delivery rider lives in the mobile app; the operations manager who assigns those riders lives on a desktop screen. Wireframe each flow on the device its main user actually holds. Then adapt it, rather than shrinking a desktop layout onto a 390-pixel-wide screen and hoping the tap targets still work.
Low-fidelity wireframes
A low-fidelity wireframe should use real labels from your IA and realistic content lengths. Lorem ipsum hides problems. If a product name in your catalog runs to 70 characters, put a 70-character name in the wireframe and see what breaks.
Mid-fidelity clickable flows
Link the wireframes so a user can click through one complete task, such as “register, verify phone, place first order.” This is the cheapest point to run your first usability test, since nothing is styled yet and changes cost almost nothing.
High-fidelity Figma prototype design
A strong Figma prototype design does four jobs at once. It shows the final look, it behaves like the product (hover, pressed, loading, empty and error states), it uses components so developers can map each one to code, and it carries annotations for anything a static frame can’t explain.
Build it on a component library from the first high-fidelity screen. Buttons, inputs, cards and modals should be Figma components with variants, and your colors and spacing should be variables or styles. That way a change to the primary button updates 200 screens, not one.
Check accessibility here too, before handoff. The W3C’s WCAG 2.2 contrast requirement asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18 point, or 14 point bold). Fixing contrast in Figma takes minutes. Fixing it after launch means a design review, a code change and a release.
4. A Step-by-Step UX Design Process Checklist
Use this checklist to run the UX design process yourself or to hold a vendor to it. Each step ends with an exit criterion, which is the part most teams leave out. Don’t move to the next step until the current one passes.
- Define scope and success metrics. Write down the product goal, the user types in scope and two or three measurable outcomes (for example, “a new user completes registration in under three minutes”). Exit criterion: stakeholders sign off on a one-page brief.
- Plan and recruit for research. Choose methods from the question table above and recruit five to eight participants per user type. Exit criterion: sessions are booked and a discussion guide is approved.
- Run research sessions. Record sessions with consent, take notes in a shared template and debrief within 24 hours while details are fresh. Exit criterion: all planned sessions are complete and notes are filed.
- Synthesize findings. Cluster observations, then write personas, journey maps and problem statements. Exit criterion: the team agrees on a ranked list of problems to solve in this release.
- Build the information architecture. Produce the sitemap, navigation model and naming list; validate labels with a card sort if your content is complex. Exit criterion: IA approved with no open naming disputes.
- Wireframe the core flows. Start at low fidelity, then link screens into a mid-fidelity clickable flow. Exit criterion: every problem statement maps to at least one screen.
- Test, fix, test again. Run a usability round with five users, fix what you find, then run another round. Exit criterion: users complete each core task without moderator help.
- Produce the high-fidelity prototype and handoff pack. Apply the visual design, document every state, check contrast and hand over specs, assets and a component inventory. Exit criterion: developers confirm they can estimate and build from the files without a follow-up meeting for every screen.
Who should be in the room at each stage
Keep at least one person from the business side in research debriefs and every usability session, even as a silent observer. Bring a lead developer into IA and wireframe reviews so technical limits surface before they become redesigns. Your marketing head should review copy and naming at the IA stage, since labels chosen there end up in ads, emails and help articles. Rotating these people in at the right moments keeps the UX design process from turning into a design team working alone.
Why five users per round
The “five users” rule comes from Jakob Nielsen’s 2000 article Why You Only Need to Test with 5 Users. His model estimates that a first study with five participants finds about 85% of the usability problems. His recommendation is to split the budget into several small rounds (“3 studies with 5 users each”) instead of one big test. That’s why steps 7 and 8 loop: test, fix, retest.
What your handoff pack should contain
- Figma file with named pages for each flow and a separate page for components
- Every screen in its default, loading, empty, error and success states
- Responsive breakpoints (at minimum mobile and desktop)
- Interaction notes for animations, transitions and gestures
- Exported icons and illustrations in SVG, images at 1x and 2x
- A short written spec for business rules the design can’t show, such as validation logic
5. Common Mistakes to Avoid
These are the UX design process mistakes we see most often when a client brings us a design that stalled, or when we audit an existing product before a redesign.
Treating research as optional. Teams cut it to “save” two weeks, then spend two months reworking flows after launch. Even three days of stakeholder interviews and an analytics review beats designing blind.
Testing with colleagues instead of users. Your team knows the product’s vocabulary. Real users don’t, which is exactly what you need to observe.
Polishing too early. High-fidelity screens before the flow is validated waste design hours and anchor feedback on visuals. Keep it gray until the structure holds.
Designing only the happy path. A prototype with no error states, empty states or slow-network states will produce a product where developers invent those screens on the fly, and they’ll look like it.
Skipping the component library. Without components, a 60-screen Figma file drifts. Spacing varies, buttons multiply and developers build five versions of the same card.
Handing off a picture instead of a spec. Developers need states, rules and measurements. A folder of PNGs forces them to guess.
Ignoring accessibility until the end. Contrast, focus order and touch target sizes are design decisions. Retrofitting them means redesigning.
Stopping the UX design process at launch. Launch gives you something no prototype can: real usage data. Review analytics, support tickets and session recordings in the first 30 days, then feed what you find into the next design cycle.
Running one big test at the end. One round of 15 users finds fewer fixable problems than three rounds of five with fixes in between. Iterate.
6. How Golden Info Systems Approaches the UX Design Process
At Golden Info Systems, we run the UX design process inside the same four-phase delivery model we use for every project: Requirements, Planning, Execution and Delivery. We explain each phase in our post on the software development process. Here’s how the UX work fits into it.
Requirements. We start with user research and analysis: stakeholder interviews, a look at your existing product data and conversations with the people who’ll use the product every day. The output is a scoped brief with the problems ranked.
Planning. We build the information architecture and agree on the technical design early (stack, third-party integrations and API interactions), so the screens we draw are screens your platform can actually support.
Execution. Our designers move through wireframing and prototyping, then visual design and branding (color palettes, typography and graphics that match your brand), with usability testing sessions between rounds.
Delivery. You receive a developer-ready high-fidelity prototype. Because our UI/UX designers sit with our own web and mobile developers (we run a 100% in-house team, no freelancers), handoff happens in the same office instead of across a contract boundary.
Our UI/UX design and UI development service covers user research, wireframing and prototyping, visual design, technical design, usability testing and redesigns of existing software that has started to look dated. We’ve completed 850+ projects over 12+ years, and we’re a member of BASIS, the Bangladesh Computer Samity and e-CAB. If you’re still deciding which design skills your project needs, our explainer on UI vs UX design is a good starting point.
7. Frequently Asked Questions
What are the main stages of the UX design process?
The main stages are research, synthesis, information architecture, wireframing and prototyping, and usability testing, followed by developer handoff. Research tells you what users need. Synthesis turns findings into personas, journey maps and problem statements. Information architecture defines structure and navigation. Wireframes and prototypes make the design clickable, and testing with real users confirms it works before code is written. Teams loop back between stages whenever testing reveals a problem, so the sequence is iterative rather than strictly linear.
How long does a UX design process take?
For a small to mid-sized product with four to six core flows, plan on roughly 6 to 12 weeks from kickoff to a tested high-fidelity prototype. That’s our estimate, not a fixed rule. Research and synthesis usually take two to four weeks, wireframing and mid-fidelity testing another two to four, and high-fidelity design plus a final test round two to four more. Complex enterprise systems with several user roles, or users who are hard to recruit, push the timeline longer.
Which user research methods should a startup use first?
Start with stakeholder interviews and five to eight user interviews per main user type, then add an analytics review if you already have a live product or a competitor you can study. These methods are cheap, fast and answer the biggest early question: who the users are and what job they need done. Save card sorting for when your content structure gets complex, and save quantitative surveys until you know which specific questions are worth asking at scale.
What is the difference between wireframing and prototyping?
A wireframe is a static layout that shows what goes on a screen and where, usually in grayscale with real labels but no styling. A prototype links screens together so a user can click through a task and experience the flow. Wireframing and prototyping overlap in practice: you often wireframe first, then link those wireframes into a low or mid-fidelity prototype. A high-fidelity prototype adds final visuals, real copy, interaction states and animations, which is what developers build from.
Why is Figma the standard tool for prototype design?
Figma runs in the browser, so designers, developers and clients can open the same file without installing anything or passing versions around. It combines layout, components, variables and prototyping in one tool, and developers can inspect spacing and export assets directly. For a Figma prototype design to be useful at handoff, build it on a component library with variants and shared styles. That keeps the file consistent as it grows and maps cleanly to front-end components in code.
How many users do you need for usability testing?
For qualitative usability testing, five users per round is the common benchmark. Jakob Nielsen’s model estimates that five participants find about 85% of usability problems in a first study. The better approach is several small rounds: test with five, fix what you found, then test again with five new people. If your product has distinct user groups, such as buyers and sellers in a marketplace, test five from each group, because each group will trip over different things.
Can you add a UX design process to an existing product?
Yes, and it’s often the most cost-effective time to do it. Start with an analytics review and usability testing on the live product to find where users struggle today, then interview a handful of users to understand why. That gives you a ranked list of problems. From there, redesign the worst flows first with wireframes and prototypes, test them, and ship improvements in stages instead of attempting a full redesign in one release.
8. Practical Next Step
Before you talk to any design team, write down three things: your two or three main user types, the five tasks each of them must be able to complete, and one measurable outcome per task. That one page is the input every stage of the UX design process depends on.
Then book a consultation with our team and bring that page with you. We’ll tell you which research methods fit your budget, how many flows need prototyping and what a realistic timeline looks like for your product.
