Product design insidethe engineering team.
Research, interaction design and design systems for complex products. Designers work in the same team and sprints as the engineers, so what is approved is what gets built.
What a design engagement includes.
- 01
User research
Interviews, task analysis and usability testing with the people who use the product, written up as decisions the team can act on.
- 02
Information architecture
Navigation, content models and permission structures for products with many roles, objects and states.
- 03
Interaction design and prototyping
Flows and high-fidelity prototypes, tested with users before engineering time is spent on them.
- 04
Design systems
Tokens, components and documentation kept in code and in Figma, with accessibility behaviour specified for each component.
- 05
Accessibility
WCAG 2.2 AA built into components and checked with keyboard, screen reader and zoom throughout the build.
- 06
Design review in delivery
Designers review pull requests and staging builds against the specification until release.
Typical design projects.
Simplifying an admin console that has grown over the years
Audit the existing screens, interview the staff who use them daily and redesign around tasks, keeping the data model intact so engineering can ship it in stages.
A design system for a product with several teams
Consolidate duplicated components into one library with tokens, documentation and contribution rules, adopted team by team.
From concept to a testable prototype for a new product
Frame the problem, explore options and put a clickable prototype in front of target users before any build budget is committed.
From problem statement to specification.
01
Understand the work
Stakeholder and user interviews, an analytics review and an audit of what exists. We write the problem down on one page and ask you to disagree with it.
- You get
- Problem statement and research summary
02
Explore options
Several structural directions are sketched at low fidelity and compared against user tasks and technical cost.
- You get
- Flows and structural options
03
Prototype and test
High-fidelity prototypes are tested with five to eight participants per round, and each round’s findings feed the next.
- You get
- A tested prototype
04
Specify and hand over
Components, states, content and edge cases are specified in Figma and in the design system, then reviewed in staging as engineers build.
- You get
- Design system release and specifications
Design and research tools.
We work in Figma and keep tokens in code. If your team uses other tools, we adapt.
Design
- Figma
- FigJam
- Lottie
Research
- Maze
- Dovetail
- Hotjar
Prototyping
- Framer
- ProtoPie
- Code prototypes
Systems
- Storybook
- Style Dictionary
- Tokens Studio
Accessibility
- axe DevTools
- VoiceOver
- NVDA
Interfaces designed in the studio.
- HealthcarePatient portal
Clinic scheduling & patient portal
Appointments, records and secure messaging with role-based access for clinicians and staff.
Next.js·Python·PostgreSQL·HL7 FHIR
- EducationSaaS
Cohort learning platform
Courses, live sessions, assessments and certificates, sold to companies as seat-based plans.
React·Node.js·PostgreSQL·Mux
Scope, testing and handover.
Yes. Design engagements are scoped on their own and deliver files, a design system and specifications that your own engineers can build from.
Other services
- Web platformsCustomer portals, SaaS products and internal tools built on Next.js and TypeScript.
- Mobile appsiOS and Android apps in Swift, Kotlin or React Native, from first release onwards.
- Backend & APIsAPIs, integrations and data pipelines, with monitoring and runbooks.
- CommerceHeadless storefronts, marketplaces and order operations, load-tested for your peak days.
- Security & compliancePenetration tests, security reviews and the evidence your customers ask for.