UI/UX design and product strategy
User research, information architecture and a token-based design system, designed to be implemented accurately in code.
- User research
- Design systems
- Prototyping
- Usability testing
The challenge
Common challenges.
Designs that are difficult to build lead to inconsistent products. Undefined colour and spacing scales and missing states, such as loading, empty, error and long content, leave developers to fill the gaps under deadline pressure.
Designing without understanding how users work leads to low adoption. Specialist software in particular depends on knowing users’ priorities, their most demanding tasks and the workarounds they already rely on.
Design systems delivered only as design files tend to drift from the codebase over time. Systems that share tokens between design and code stay consistent.
What we deliver
Deliverables.
Everything listed below is handed over to you at the end of the engagement.
User research
Interviews and observation with your users in their working environment, summarised as clear design requirements.
Information architecture
Navigation, hierarchy and naming based on how users think about the domain, validated with card sorting and tree testing.
Token-based design system
Colour, typography, spacing and elevation defined as tokens shared by the design files and the codebase.
Components with every state
Default, hover, focus, active, disabled, loading, empty and error states, including handling for longer content.
Tested prototypes
Interactive prototypes tested with real users before development, with findings translated into specific design changes.
Accessibility by design
WCAG 2.2 AA requirements, including contrast, focus order, target size and keyboard navigation, applied from the start of the design process.
Process
Project timeline.
Typical timelines. Exact durations are confirmed during the Discover stage.
- 01
Research
2–3 weeks
Interviews, observation and a review of any existing system, including the workarounds users rely on.
- 02
Architecture
1–2 weeks
Information architecture and key user flows, validated with tree testing before visual design begins.
- 03
Design system and screens
3–6 weeks
Tokens, components and key screens, structured in the design tool to match how they will be built in code.
- 04
Usability testing
1–2 weeks
Moderated usability sessions with five to eight participants per round, with findings prioritised by severity.
- 05
Handover and support
Ongoing
We remain available to your developers throughout implementation.
Technology
Technology stack.
Design
- Figma
- Variables and tokens
- Auto-layout
Figma variables map directly to CSS custom properties, keeping design and code aligned.
Implementation
- Tailwind CSS
- Radix primitives
- Storybook
Accessible primitives are used for complex components such as dialogs, menus and comboboxes.
Research
- Maze
- Optimal Workshop
- Session replay
Unmoderated testing for scale, combined with moderated sessions for deeper insight.
Building a design system that lasts
Design systems often lose consistency after handover because the design files and the codebase are maintained separately. Over time, the two diverge.
Durable systems use shared definitions. Design tokens for colour, spacing, typography, radius and elevation are defined once and used as variables in the design tool and custom properties in code, so a change to a token updates both.
Components should be specified with every state, including default, hover, focus, active, disabled, loading, empty and error, as well as longer-than-expected content. Undefined states are otherwise improvised during development, which is where inconsistency begins.
Designer involvement during implementation also matters. Questions about responsive layouts, edge cases and intended styles arise throughout development, and quick answers keep the product consistent with the design.
Engagement models
Flexible ways to work with us.
Pricing depends on scope and is provided after an initial consultation.
Fixed-scope project
A defined product or redesign with a known scope.
Considerations
If research findings change the brief, we raise this early so the scope can be adjusted.
Dedicated team
A product organisation that needs ongoing design alongside engineering.
Considerations
Most effective when design is involved in product planning from the start.
Retainer
Maintaining a design system and supporting an active development team.
Considerations
Suited to consistency and incremental improvement. A full redesign is scoped as a project.
Questions
Frequently asked questions.
- Can you provide design without development?
- Yes. The handover includes token definitions, component specifications covering every state and an implementation guide for developers. We also remain available to your team during development.
- How many users do you need to test with?
- Five to eight participants per round identify most usability issues, and a second round after changes adds more value than a larger first round. Larger samples are used for unmoderated tree testing and preference testing.
- We already have a brand. Do you work within it?
- Yes. A product design system extends your brand into interface states and layouts that brand guidelines do not cover. Where a brand colour does not meet contrast requirements in the interface, we propose an accessible alternative for that context.
- What is the value of a design system?
- A design system makes future work faster and more consistent. New screens are assembled from existing components that already include accessibility and responsive behaviour. For very small products, a full design system may not be necessary, and we will advise accordingly.
- How do you keep design and code consistent?
- Design tokens are defined once and shared by design and code, components are reviewed against their specifications in Storybook, and visual regression tests detect unintended changes. We also stay involved during implementation.
- Is accessibility an additional cost?
- No. WCAG 2.2 AA requirements, including contrast, focus order, target sizes, keyboard navigation and motion preferences, are part of the design process from the start. Building accessibility in is more cost-effective than adding it later, and it improves usability for all users.
Let’s discuss your project.
Book a free 30-minute scoping call to discuss feasibility, budget and timeline.