Design is often described as a 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 when alignment finally clicks. 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, reducing ambiguity and designing with intent.
My background in graphic design taught me to care deeply about detail, composition and emotion. Moving into product design meant layering in research, systems thinking and continuous validation. The process I use blends both: structured enough to protect focus, flexible enough to adapt to reality.
This is the 5-step UI/UX process I rely on. It’s practical, collaborative and designed to deliver outcomes, not just artefacts.
Why process matters (and why it shouldn’t get in the way)
A good process brings people with different goals and perspectives into the same conversation. Without it:
- Work is based on assumptions
- Designers push pixels without clarity
- Stakeholders add features instead of refining goals
- Engineering builds from misaligned or incomplete specs
With process, the opposite happens: decisions accelerate, context is shared, and design becomes a strategic force instead of a production service.
For a deeper view on why process matters, NN/g has an excellent overview of UX process foundations: https://www.nngroup.com/articles/ux-research-cheat-sheet/
Process should empower, not restrict. It’s scaffolding, not a cage.
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 why the problem exists at all.
What I focus on here
- What users are trying to accomplish
- Their pain points, motivations and constraints
- Business objectives
- Existing analytics, behavioural patterns and comparable experiences
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 snapshots
- 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 shaping clarity — turning scattered information into structure and direction.
What I define
- The real problem
- The scope
- Early information architecture
- User flows
- 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, even if your language is simpler
- 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 clarity established, exploration begins. As a designer with a visual background, this stage is energising , but it’s also intentional. Ideation isn’t about aesthetics for aesthetics’ sake. It’s about identifying the most viable paths to value.
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 a simple truth: let’s try it.
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 baked in
- 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 never linear (and that’s a good thing)
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:
- Card sorting
- Heuristic reviews (NN/g’s heuristics: https://www.nngroup.com/articles/ten-usability-heuristics/)
- Service blueprints
- A/B testing
- Accessibility audits
- Content mapping
- Motion sketches
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/
No Comments.