Designed and developed a product for repair businesses: customer booking, a technician workspace and a shared design system with two themes.
Inside this case
ROMARO was designed primarily for smartphones. This case covers my contribution, the customer journey from choosing a service to submitting a request, the technician workspace and the design system. The mobile home screens lead in both themes, followed by the desktop adaptation. Colour, typography, components and states reveal the shared interface foundation. The case closes with the outcome.
Product and challenge
ROMARO is a web application for repair businesses, designed primarily for smartphones. Customers need to find a service and arrange a visit from their phone. Technicians need to receive a device with clear context and manage its repair. The product connects these actions into one continuous process.
I independently designed and developed the customer interface and staff workspace: structure, forms, components, interactions and two visual themes. The mobile interface forms the basis of the customer journey; the desktop version keeps the same logic.
Repair is a neutral dark theme. Hatiko is a light adaptation of an existing brand identity. My contribution to Hatiko was translating the shared product logic into its visual language.
Mobile version
A dark mobile home with a booking entry point and quick actions. Fixed bottom navigation opens the main sections.
The path to a request
The journey starts with a service. Selecting one passes the device and problem into the form so the customer does not need to enter them again. An unfamiliar fault can be described in their own words.
About the decisions
The sequential form focuses on one question at a time: device context, visit time, contact and confirmation. The main action sits at the bottom; errors appear beside the relevant field. A summary helps the customer review their choices before sending.
The selected time follows the branch schedule and means arrival at the service centre, not repair completion. After saving, the customer receives confirmation and the visit appears in the staff workspace. The repair itself starts separately, at device intake.
Choose a service
Category, price and booking sit together. The selected service carries its context into the form.
Technician workspace
Intake brings together a photo, device description, contact, branch and responsible technician. The technician receives the working context, then manages repair stages and cost. The repair card keeps the device connected to its history.
About the decisions
Tabs separate active work, incoming, transferred and completed repairs. A customer comment and a team message use separate fields: the audience is clear before saving, and internal discussion stays in the workspace.
A branch transfer consists of sending and confirming receipt. Responsibility changes explicitly: the receiving branch continues the work while the previous branch retains its history.
Work in context
Cards show the device and current stage; tabs separate the queues. Device intake sits beside the work list.
Design system
Both themes share roles and rules. Background, text, card, action, border, focus and feedback each serve a purpose. Components receive the theme values while retaining clear behaviour.
About the decisions
Basic elements combine into booking forms, repair cards and staff screens. They account for selection, waiting, errors, unavailable actions and success.
Below are specimens of the elements and their combinations. Switching themes shows how one structure works in dark Repair and light Hatiko.
Typography and shape
Repair uses Manrope Variable. Hatiko uses Aktiv Grotesk for the interface and Mabry Pro for brand headlines. Body text is 16 px; a step heading is 30 px. Rounded corners and spacing distinguish a field, card and screen.
From phone to workspace
On a phone, the form focuses on the current step and cards use one column. Wider screens offer room for lists and detail. Labels, local errors and visible focus help users stay oriented.
Component specimensClick, choose and type — these specimens work.
Buttons and actions
Different priorities, a shared language.
Fields and validation
A label, a hint and a clear error.
Choices and switches
Checkbox, switch and selection list.
Tabs and menus
Context stays close to the action.
Key information about a repair.
Record and timeline
Read the status without opening a record.
- Received
- Diagnostics
- In progress
- Ready
Dialog and notice
An extra step with context preserved.
Switch these specimens between both themes.
Colors by purpose
12 roles connect buttons, fields, surfaces and messages.
- Background
- #090B0B
- Text
- #F1F2F1
- Card
- #191C1C
- Primary action
- #F1F3F2
- Action text
- #101312
- Second surface
- #272C2B
- Secondary text
- #A3AAA8
- Card border
- #343938
- Field border
- #4C5351
- Focus
- #BCC6C1
- Error
- #FF8697
- Warning
- #EED2A2
Typography
Book a repair
Choose a device and a convenient time.
Field label14 / 600
Hierarchy illustrated in Manrope.
Shape and rhythm
Corner radii
Spacing
Success
Changes saved.
Error
Could not load the data. Try again.
Empty state
A new record will appear here.
Loading
Fetching data…
Check your choices before continuing.
Interface states are shown here.
Outcome
ROMARO brings customer booking and team workflows together in a working product. I took the project from scenario structure through interface design and development: services lead into booking, visits appear in the workspace, and intake establishes the repair context. A shared design system connects forms and staff screens while supporting two distinct visual languages. Real customers use the product.