Designing beautiful, functional user interfaces is a process—it takes time, intention, and cross-disciplinary collaboration. Here’s a breakdown of the steps I follow as a UI designer throughout a product’s development journey.
1. Research: Understand Before You Design
Before anything gets designed, we need to deeply understand the problem we’re solving. This stage benefits most from a collaborative approach between product designers and dedicated user researchers.
The goal is to answer two fundamental questions:
- Who is this for?
- What’s the ultimate goal?
We uncover these answers through surveys, competitor analysis, user interviews, and focus groups. These insights are then used to build user personas, which guide the entire design process.
Designers act as the Voice of the User—our role is to champion user needs across the team.
2. Define Goals: Aligning Product and User Intent
Building from research, we now define the product’s key goals—what users need to do, and how the interface can support that.
This typically involves:
- Mapping user flows
- Identifying key interactions
- Aligning on success metrics
It’s also crucial to bring engineers and product managers into these early discussions. This not only surfaces technical constraints early but ensures the whole team starts thinking from the user’s perspective.
3. Wireframing: Structure Over Style
Wireframing is where the product starts to take shape. At this stage, we focus purely on structure—low-fidelity screens that prioritize layout, information hierarchy, and user flow.
Just as logos often begin in black and white, wireframes strip away aesthetic distractions so we can focus on usability.
Collaboration is key here. These rough drafts provide a foundation for early feedback from stakeholders and users, helping us validate ideas before investing in high-fidelity design.
4. Visual Design: Defining the Look and Feel
Now comes the step where we breathe life into the interface.
We begin by gathering everything we can from the brand: logo, colours, guidelines, photography, mood boards—anything that informs visual tone. From here, we define a visual strategy that aligns brand and interface.
Some things I always consider:
- UI values (distinct from brand values): e.g. precise, intuitive, efficient — or playful, creative, bold.
- Colour systems: Create flexible palettes with shades, tints, and contrast steps—not just static colours.
- Typography: Choose fonts for legibility and usability, not just brand alignment. Consider accessibility (e.g. dyslexia-friendly, readable sizes).
- Iconography: Establish a consistent icon style (rounded vs. sharp, filled vs. stroked), sourced or custom-built.
- Corner radius & stroke style: These subtle elements shape the UI’s tone.
- Light/dark modes: Consider user context and device environment when choosing defaults.
- States and interactions: Define hover, focus, disabled, and error states. Every UI element needs visual clarity across interaction types.
- Graphs and tables: Ensure scales and colours are readable and support accessibility.
This is where component thinking comes into play. I strongly recommend using design tokens and components (e.g. in Figma) to enforce consistency and streamline changes.
This phase is highly iterative—gather feedback, refine, repeat. By the end, we aim for polished mockups that closely resemble the final product.
If you haven’t already, this is a good moment to bring in a content designer to ensure your copy aligns with tone, clarity, and hierarchy.
5. Prototyping: From Static to Interactive
With polished mockups in place, it’s time to build a prototype.
In tools like Figma, switching to ‘Prototype’ mode allows you to simulate user journeys and interactive flows. This helps stakeholders visualize the product and provides a realistic context for usability testing.
6. Testing and Iteration: Validate with Real Users
This step cannot be overstated.
We test prototypes with real users—ideally matching the personas created earlier. Testing reveals usability issues, accessibility gaps, and edge cases we may have missed. Tools like Maze, Lookback, or moderated sessions can offer qualitative insights.
Refinement continues here, sometimes through several iterations, until the experience feels intuitive and empowering for users.
7. Handoff and Implementation
Once the design is finalised, we prepare for development handoff.
A handover call with engineers and product is essential—but documentation matters just as much. Ensure files include:
- Clear layer naming
- Annotations
- Descriptions of interactive behavior
- Tokens and variables used
- Accessibility notes (e.g. contrast ratios, keyboard navigation)
Be proactive—development might not begin immediately, and a well-documented design prevents blockers later.
Once a build is ready, review it carefully. Flag deviations, suggest adjustments, and support the team through final QA until you’re ready to launch.
8. Post-Launch Feedback and Maintenance
Design doesn’t stop at launch.
Track analytics, gather user feedback, and assess how the product performs in the real world. This continuous learning loop feeds into future iterations and keeps your product—and design system—evolving.