Émilie Ciais’s workshop CRM, built in-house to track watch repairs. I designed all of it: the design system, and the screens for both the workshop and its customers.
- 200+Watches repaired and tracked every month
- 3 daysTo approve a quote, down from a week
- −60%Calls asking about a watch’s status
Context
The workshop’s software.
Émilie Ciais is having her own CRM built to track every watch left at the workshop: more than 200 a month.
In-house developers write the code. I design everything the workshop and its customers see on screen.
Foundations
An atomic design system.
In a workshop, one question comes up all day: where is this watch? The palette is built around eight status colors, from “received” to “returned”, that never change from one screen to the next. Everything else: neutrals and a single blue.
Inter for text, JetBrains Mono for references and amounts, because numbers line up better in columns. Radii, spacing and shadows have the same names as in the code.
Components
Business components.
Above the buttons and fields come the pieces specific to the trade, like the watch card or the brand picker. The picker sorts watchmakers by tier: a Patek isn’t handled like a Tudor.
Dashboard
What you see at 9 a.m.
How many watches are due back this week, which quotes need chasing: it’s the first thing you see when you open the tool.
The return schedule flags the days when the workshop will be overloaded, early enough to move an appointment.
Drop-off
Taking in a watch in three steps.
When a customer drops off a watch, intake takes three steps: the watch, its condition with photos, then the entry in the police register.
The police register is a legal requirement that can’t be rushed. ID, type of deposit and the customer’s signature on a tablet happen in the same window, with a summary in view.
Once confirmed, the entry is locked and any correction leaves a trace, in case the police check the register.
Customer tracking
Customers track their watch from their phone.
The customer gets the quote by text, opens it with a code and signs it online. No need to come back to the shop.
Then they follow the repair step by step, intake photos included, and can message the watchmaker directly. Calls asking where a watch is have dropped by 60%.
Finances
Invoices and reminders.
Invoices and reminders live in the same tool as the repairs. Anything waiting for action, like an unpaid invoice, sits at the top; the month’s totals come after.
Trade-offs
Three choices, and what they cost.
Three decisions among others, the ones that shaped the tool the most.
Customizable statuses, or a fixed list?
An unusual case goes in a comment, not a new status. In return, a watch’s state reads at a glance, from the dashboard to customer tracking.
The police register: separate, or part of intake?
Intake takes a bit longer, and a confirmed entry can no longer be edited. But no watch enters the workshop without being registered, and any correction leaves a trace in case of a check.
Approve quotes in the shop, or online?
We had to add an access code, a step some customers find unnecessary. But a quote gets approved without coming back to the shop: three days on average, down from a week.
With the devs
With the in-house developers.
Here, I stay on the design side. I deliver mockups and documented components in Figma, the team builds them, and we sync as soon as a tricky case comes up.
Variables have the same names in Figma and in the code: developers have nothing to translate.