| Stage | Typical deliverables | Planning use |
|---|---|---|
| Research and define | Journey maps, personas, affinity diagrams | Budget time for synthesis as well as interviews. These artifacts become the shared reference for every later decision. |
| Analysis and planning | Personas, user stories, wireframes | Turn findings into scoped work before visual polish starts. |
| Design | Information architecture, navigation, layout, microcopy, usability and accessibility decisions | Settle structure and accessibility here, while changes are still cheap to make. |
| Prototyping | Low-fidelity or high-fidelity prototypes | Pick the fidelity from the question you need answered. |
| Testing | Findings from testing with real users before launch | Reserve time to act on the results before release. |
Deliverable names follow the Interaction Design Foundation’s UX design process guide and Designlab’s UX design process overview.
The UX UI design process moves from research through design, prototyping and testing, and each stage should leave a named deliverable behind. It works best when accessibility and testing are scheduled, not left until just before launch.
For the wider context around this workflow, see our digital design guide for software.
What each stage changes for your team
Every stage in the process exists to remove a specific risk before it reaches developers. Knowing the practical effect of each one helps you decide where to spend scarce design time.
- Early sketches make direction changes cheap. Konrad notes that sketching and other rapid prototyping methods allow low-cost iteration and alignment early on. That suits teams with several stakeholders who disagree, because a rough sketch settles the argument before any visual design exists.
- Prototypes move testing ahead of development. Figma says prototypes let you test design ideas before investing in development. If engineering capacity is the constraint, this is the stage to protect.
- Research artifacts replace opinion with evidence. A journey map outlines the stages a user goes through with a product, and an affinity diagram groups interview quotes by similarity into themes. Both give the team something concrete to point at in a design review.
- Specifications cut guesswork during the build. Design specifications communicate styles, colour schemes and fonts to developers, according to Baymard Institute. Konrad adds that mobile breakpoints and accessibility requirements are clarified at that point.
- Pre-launch testing shows where to improve. Designlab stresses testing the interface with real users before launch. Plan the schedule so that findings can lead to changes rather than a backlog entry.
The stages in order
Frameworks disagree on how many stages there are, but they describe the same arc from understanding users to refining a shipped product. The Interaction Design Foundation lists five steps of design thinking: Empathize, Define, Ideate, Prototype and Test. Designlab breaks the work into eight steps: Define, Research, Analysis and Planning, Design, Prototyping, Testing, Launch and Iteration. Figma describes five stages: define the problem, conduct research, design prototypes, test and gather feedback, then iterate and refine. Choose whichever vocabulary your team already uses, and keep the deliverables in the table above as the checkpoints.
Define and research
This stage produces the evidence everything else leans on. UX researchers craft personas, journey maps and affinity diagrams, and they conduct user testing, per the Interaction Design Foundation. Baymard describes journey mapping as a step-by-step visual representation of how a user interacts with a product, and personas as fictional but realistic representations of typical users. The Interaction Design Foundation adds that personas should be heavily inspired by user data. Treat a persona with no research behind it as a guess, and leave it out until you have evidence.
Ideate, plan and design
Ideation marks the shift from understanding the problem to creating a solution. After that, Designlab’s analysis and planning step develops user personas, user stories and wireframes. Baymard defines a wireframe as a simplified representation of a page interface that defines the layout and essential elements. Konrad lists sitemaps and information architecture alongside wireframes, prototypes, task flows and functional specifications as key deliverables. Information architecture decides what content groups exist and how people move between them, so settle it before layout work begins.
Prototype and test
Designlab says prototypes can be low-fidelity or high-fidelity. Use low-fidelity versions to check structure and flow, and move to high-fidelity only when the question is about the visual details. For validation, Baymard describes starting with internal team members testing the product and then expanding to real users. That order catches obvious defects cheaply before you spend participants’ time.
How research connects to visual design
Visual design is the stage where research findings either survive or get lost. Figma separates the two disciplines: UI design focuses on the visual elements, meaning the buttons, colors and layouts that users interact with. UX research tells you which of those elements matter and for whom.
In practice, carry the affinity-diagram themes and personas into every design review as acceptance criteria. A button style or layout choice should answer to a named theme, not to taste alone. The patterns in UX Design Examples: 12 Real-World Patterns That Boost Usability In 2026 – Interestingdevelopment show how research-led decisions look once they reach the interface. For the styling side, UI Design Trends 2026: 7 Essential Shifts Every Designer Should Know – Interestingdevelopment covers where visual language is heading.
Building accessibility into the process
Accessibility belongs inside the design stage, not after it. Designlab lists usability and accessibility as elements of the design phase, next to information architecture, navigation, layout and microcopy. Konrad notes that specifications are where accessibility requirements get clarified for production.
- At planning: write accessibility needs into user stories so they are scoped like any other requirement.
- At design review: check layouts, navigation and microcopy for accessibility alongside usability, since both sit in the same phase.
- At handoff: record accessibility requirements in the specification so developers do not have to infer them.
Checking at each point is cheaper than discovering gaps in a finished build, and it gives every deliverable an owner who can answer for it.
Handoff and design systems
Handoff turns approved designs into something developers can build consistently. Baymard describes design systems as collections of reusable functional elements, including patterns, components and standards. Pair a design system with written specifications, and developers get both the reusable parts and the exact styles to apply.
Tools such as Figma can hold prototypes and components in one place, which keeps the specification close to the design it describes. If your team is small and ships rarely, a lightweight component set and a specification may be enough. If several products share an interface, a maintained design system becomes the stronger investment.
Frequently asked questions
Do prototypes have to be high-fidelity?
No. Designlab notes that prototypes can be low-fidelity or high-fidelity and can be built with tools such as InVision, Justinmind and Axure. Match the fidelity to what you are testing.
Can AI help with user research?
Some teams already use it for analysis. Figma’s 2025 AI report found that 40% of designers and 29% of developers said they use AI to analyze user data, and Figma’s UX design resource reports the figures.
Who should test a product first?
Internal team members, according to Baymard. Once they have tested it, expand to real users.
