The task and the people
Business goals, the people using the product and the tasks they need to complete. Together we set the priorities and the scope of the next version.
Outcome: a product brief, priorities and hypotheses.
ServicesProduct Design
Product Design
Work that starts before the screens: the task, the audience, the product model, key scenarios and the interface of the core. SKARR.PRO adds tested hypotheses and alternative product models.
Before the screens.
The product itself.
You may be starting with an idea, improving an existing product or building a new feature. We turn that starting point into a product model, a core interface and, where agreed, working code.
From an open question
to a working product.
Product thinking, interface design and development stay connected. The decisions we make together carry through to the software people use.
We agree the scope at the start, review key decisions together and revisit assumptions when the work reveals something new.
If the product is already defined and needs its screens, flows and states, explore UX/UI Design.
What we work through
with you.
Each part turns an open question into a decision we can build on.
The product model and key scenarios
What the product is, how it creates value and which journeys matter most. We organise the information people need at each step and the decisions they make along the way.
Outcome: user journeys and the structural foundation of the product.
The core interface
The screens where the product delivers its value: their visual character, hierarchy and the states around each action. In SKARR.PRO, hypotheses and alternative models are tested on prototypes before we commit.
Outcome: the core interface, agreed in real screens.
The system around it
Components, typography and behaviours that hold together across the product. SKARR covers the core; SKARR.PRO extends the system to support future features.
Outcome: a design system at the scale the product needs.
Into code, where agreed
The core can be designed directly in React: an interactive prototype for checking scenarios, or a working interface with the agreed behaviour. Figma is not a required intermediate step.
Outcome: an interactive React prototype or a working React interface, by agreed scope.
A wider view.
A clearer next move.
A quick mobile task and a team workspace need different ways of organising information.
Healthcare App.
Status, details and actions in one structure.
For web apps and dashboards, we bring status, details and actions into one clear structure. The team sees what needs attention, opens the context and moves the work forward.
A visual concept with sample data for a product in progress. The banking app above shows the same thinking on a small screen.
See how the work unfoldsA product structure.
A core you can build on.
You receive a clear product model, the key scenarios and the core interface: as design files or, where agreed, as an interactive React prototype or a working React interface.
Further iterations, a broader design system and the development of additional features are agreed as the next step.
How the work
unfolds.
Four stages, each ending in a decision we can build on.
01
Analyses and research
We examine the business, the people and the context of use: business and product analyses, user research, competitive benchmarking and product audits, chosen for the questions that matter. The outcome is a product brief, priorities and hypotheses.
02
Structure and prototyping
Information architecture, navigation, content hierarchy and user flows. Prototypes let us examine the main scenarios and the logic of important interactions before detailed design. In SKARR.PRO, alternative product models are prototyped and compared.
03
Visual concept and the core interface
We explore how the product should look, feel and behave, show the direction on representative screens and develop the core interface with realistic content, screen sizes and the states around each action.
04
Build, test and hand over
Where development is agreed, we build the scope in React, test the key journeys and states and review the build against the design. You receive the agreed files, source code and setup notes.
Choose the depth
your product needs.
Both options cover monthly product work. The table shows what each depth includes.
| Property |
SKARR
Custom-designed screens. A visual language of your own.
$7,000 / month
per month of work
Buy SKARR
Secure Stripe checkout |
SKARR.PRO
More depth and detail across the entire experience, at every touchpoint.
$12,000 / month
per month of work
Buy SKARR.PRO
Secure Stripe checkout |
|---|---|---|
| What we work on | ||
| Starting point | Starting point A product with a clear direction. The task, the audience and the scope of the next version are defined together. | Starting point A product whose model is still open. Several directions are examined before committing to one. |
| Product model and scenarios | Product model and scenarios One product model and the key scenarios it needs. | Product model and scenarios Alternative product models compared, with the key scenarios worked through for the chosen one. |
| The core interface | The core interface The core screens, designed with their hierarchy, states and visual character. | The core interface The core screens, with hypotheses tested on prototypes before detailed design. |
| Depth of work | ||
| Research | Research Business and product analyses, user research and a product audit, chosen for the questions that matter. | Research The same researches, with competitive benchmarking and further studies where open questions need them. |
| Design system | Design system Components, typography and behaviours for the core interface. | Design system An extended system, prepared to support future features. |
| Iterations | Iterations Key decisions reviewed together at each stage. | Iterations More iterations on the model, the scenarios and the interface details. |
| Working together | ||
| Monthly work | Monthly work Product work for the month. Scope and intended outputs are agreed before starting. | Monthly work Product work for the month at the selected depth. Scope and intended outputs are agreed before starting. |
| Design in code | Design in code The core as design files or, where agreed, as an interactive React prototype. | Design in code The core as design files, an interactive React prototype or a working React interface, as agreed. |
| What you receive | What you receive The product brief, user journeys, the core interface and the agreed handover materials. | What you receive The same, with the tested hypotheses, the compared models and the extended system. |
Before
we start.
Do we need Figma files, or can the product be designed in code?
Both are possible. The core can be designed in Figma or directly in React as an interactive prototype. We agree the format at the start, based on how your team will review and continue the work.
How is this different from UX/UI Design?
UX/UI Design works inside a product that is already defined: its screens, flows and states. Product Design starts earlier, with the task, the audience and the product model, and shapes the core interface from there.
Does Product Design include development?
The core can be implemented in React where agreed: an interactive prototype or a working interface. Full application development, a server side and integrations are a separately defined scope.
Does this replace market research?
No. We analyse the business, the people and the context of use to make product decisions. Formal market research is not part of this work.
What happens after the month?
We review the results together and agree the next step: further iterations, a broader system or the development of additional features.
Still have questions?
Discuss your product