02 Build
Product & UX/UI design
Product definition, user flows and interface design for web applications — drafted in code with realistic data, so development starts from the screens you approved.
Outcome: A product shaped around the real work — agreed before the build begins.
Product design decides what the software should do, for whom and in what order; UX/UI design turns that into flows and screens. The product definition is written down, and the screens are built directly as React components, so there is no separate step that turns pictures into code.
It fits when a product is still being defined, when an existing interface slows people down, or when a growing front end needs one coherent set of patterns. It can be the first stage of a new project or a focused piece of work on a product you already run.
Typical needs
- An interface that staff or customers struggle with
- A product idea that still needs a clear scope, flows and screens
- Screens that grew one feature at a time and no longer fit together
What you receive
- A written product definition: users, roles, core flows and priorities
- A clickable prototype: the interface design as working React screens
- A documented design system that keeps new screens consistent
Approach
How the work runs.
- 01
Users, roles and priorities
Who uses the system, in which role, and which tasks matter most — taken from the real workflow and written down as a short product definition, agreed before design starts.
- 02
Flows before screens
Each core task is traced from its starting point to the finished result, so missing steps, double entry and dead ends surface before any screen is designed.
- 03
Screens built in code
Screens are drafted as React components with realistic data, and every state is designed — what a screen shows when it is empty, loading or failing, or when names run long — so you review something you can click through.
- 04
Tested in use, kept consistent
Feedback from the people who use the screens shapes each round of changes. Keyboard use, contrast and labels are checked against WCAG, and settled patterns become part of the design system.
Technologies
- React
- TypeScript
- Tailwind CSS
The engineer who does this work is the founder, Filip Volf — you work with him directly.
Questions
About this service.
Do we receive static mock-ups or working screens?
Working screens. The design is built as React components with realistic data, so it can be clicked through, reviewed and tested in a browser. Where a quick sketch helps settle a flow, it comes first — but the screens you approve are code.
How is UX/UI design different from React, Next.js & TypeScript front ends?
Design covers the product definition, the flows, the interface and its design system — what the product does and how its screens work. Front-end development takes that interface to production: rendering, performance, data loading and the code around it. The two can run side by side on the same product.
Can you redesign an interface we already have?
Yes. The work starts from how people use it today — where they hesitate, what they enter twice and where they resort to workarounds — and the new design goes in step by step, so nobody has to relearn everything at once.
Related services
- 01
Custom software & SaaS
Outcome: One system of record instead of scattered tools.
- 03
React, Next.js & TypeScript front ends
Outcome: Interfaces people use quickly — and developers change safely.
- 04
Websites & technical SEO
Outcome: One consistent story for people, search engines and AI tools.
Next step
Let’s talk about what you’re building.
Describe what you need built or fixed, how the work runs today and the constraints. You get clarifying questions or a first outline of the approach — by email, in English or Serbian.