How I design clarity and purpose in digital products

gravatar
 · 
November 26, 2025
 · 
4 min read
Featured Image

Design is often described as a linear process, but the truth is that real product work rarely moves in a straight line.

It loops, it bends, it pauses due to dependencies, then accelerates. Over the years - across startups, in-house teams and agencies - I’ve learned that what matters most isn’t rigid adherence to a model. It’s creating shared understanding and reducing ambiguity.

My background in graphic design taught me to care deeply about detail, composition and emotion. Moving into product design meant adding in research, systems thinking and validation. The process I use blends both.

This is the 5-step UI/UX process I rely on. It’s practical, collaborative and designed to deliver outcomes, not just artefacts.

Step 1: Understand

Understanding is the foundation of good design. I never open Figma before I understand who I’m designing for, what they’re trying to do, and what the problem is I'm trying to solve.

What I focus on here

  • What users are trying to accomplish
  • Their pain points, motivations, and constraints
  • The business objectives
  • Existing analytics, behavioural patterns, and comparable experiences
  • Customer support channel insights

Analytics can be incredibly revealing at this stage. Tools like Google Analytics or Mixpanel often give you immediate directional insights. NN/g’s guide to analytics for UX is a useful primer: https://www.nngroup.com/articles/analytics-user-experience/

Typical outputs

  • Quick research notes
  • Personas or user types
  • Problem framing
  • Journey maps
  • Early success criteria

Skipping this step leads to costly rework later. I deliberately slow down here to prevent that.

For research techniques and templates, Smashing Magazine offers practical guidance: https://www.smashingmagazine.com/category/ux/

Step 2: Define

Once insights are collected, the next step is turning this scattered information into something structured that can provide direction.

What I define

  • The real problem
  • The scope
  • Early information architecture
  • User journeys
  • Constraints and dependencies

Typical outputs

  • Problem statement
  • Prioritised requirements
  • IA or sitemap
  • User flows
  • Technical / business constraints

Google’s Material Design documentation offers excellent guidance when thinking about architecture and structure: https://m3.material.io/

Why this matters

  • Clients recognise these frameworks
  • It shows your method is grounded in established UX practice
  • It demonstrates that your approach is flexible, not rigid
  • It positions your work as strategic, not just “UI design”

NN/g’s breakdown of the discovery phase is a good reference here: https://www.nngroup.com/articles/discovery-phase/

Step 3: Ideate

With the problem established, exploration begins. Ideation isn’t just about UI and interactions, it’s about identifying the most viable paths to user and business satisfaction.

How I ideate

  • Start with quick sketches
  • Explore multiple concepts
  • Break down interactions and micro-decisions
  • Bring PMs and engineers into the conversation early

Typical outputs

  • Rough sketches
  • Multiple concept directions
  • Flow variations
  • Interaction ideas

This is deliberately messy. Rough work sparks conversation and avoids premature attachment. IDEO’s write-up on ideation methods is a great resource if you’re curious about complementary techniques: https://www.ideou.com/blogs/inspiration/10-activities-to-generate-better-ideas

Step 4: Prototype

Prototypes turn ideas into something you can test, validate and refine. They replace endless debates with user input.

What I prototype

  • Full flows
  • Core interactions
  • Navigation
  • Realistic microcopy (enough to support behaviour)

How I test

  • Short usability sessions
  • Task-based walkthroughs
  • Comparative testing
  • Internal alignment reviews

For design patterns and interface examples, Apple’s Human Interface Guidelines are incredibly helpful, even beyond Apple ecosystems: https://developer.apple.com/design/human-interface-guidelines/

Testing early reduces risk and builds alignment quickly.

A practical guide to usability testing from NN/g: https://www.nngroup.com/articles/usability-testing-101/

Step 5: Refine

This is where design craft takes the lead. My graphic design foundation shows up in typography, rhythm, spacing, colour and visual balance, but refinement isn’t decoration, it’s coherence.

What refinement means

  • Clear hierarchy and readability
  • Accessibility
  • Scalable systems
  • Visual and interactive consistency
  • Purposeful motion and feedback

Typical outputs

  • High-fidelity UI
  • Updated design system components
  • Interaction specs
  • Accessible colour and typographic tokens

Google’s Material accessibility guidelines provide excellent standards and checklists: https://material.io/design/usability/accessibility.html

For microcopy refinement, Strategic Writing for UX dives deeper: https://www.oreilly.com/library/view/strategic-writing-for/9781492049371/

Design is rarely linear

The 5 steps loop constantly. Testing uncovers new insights. Engineering reshapes feasibility. Stakeholder feedback reframes scope. A flexible process supports these shifts rather than resisting them.

Lean UX is especially valuable here for continuous iteration: https://www.oreilly.com/library/view/lean-ux/9781491953617/

When this process works best

This process excels when:

  • The problem is ambiguous
  • User behaviour is unclear
  • A redesign is needed
  • Teams are misaligned
  • The product requires multiple iterations

It’s less ideal for:

  • Pixel-polish-only tasks
  • Fully predetermined requirements
  • “Just make it pretty” requests

Additional techniques that plug into the process

Depending on the project, I may use:

Each method fits one of the five steps without changing the core structure.

Final thoughts

Great digital experiences rarely happen by accident. They’re the product of clarity, collaboration, evidence and craft. This process helps me reduce noise, prioritise what matters and design work that feels intentional and grounded.

If you want to explore the fundamentals behind strong UX decisions, Laws of UX is a visually insightful resource: https://lawsofux.com/

Tagged: double diamond · product design · ui design · ux · ux process
Comments

No Comments.