One decision per step
Choosing the job, comparing quotes and confirming the work never share a screen, so nobody has to weigh everything at once.
01The product
What Flip is for.
Renovating is a big decision most people make only a few times.
Homeowners come to Flip with a job in mind (painting, flooring, or something they can’t quite name) and little idea of what comes next. They need quotes they can trust, a sense of progress while the work happens, and a clear end.
Because people use it occasionally rather than daily, nothing can rely on habit. Every screen has to say what it’s for and what happens after it.
The goal was a journey you can’t get lost in: one decision per step, and always a visible next one.
02My part & the team
Client work, with clear lines of ownership.
A supporting client assignment through Cefalo.
What I did
- Product UX/UI: the renovation journey, forms, progress and recovery states.
- An interface system and Figma library built on Element Plus.
- Theming that connects the product to Flip’s brand.
- Handoff and implementation review with the developers.
What the team did
- Client stakeholders in Norway owned product direction, business rules and acceptance.
- Cefalo engineers implemented the product and owned technical and release decisions.
- The client’s brand guidelines were the reference for identity; I applied them in the product.
This case doesn’t imply ownership of Flip’s whole platform or its current public site.
03Starting from a framework
Building on Element Plus.
Element Plus gave the build solid forms, steps and feedback components. The design work was making them feel like Flip, and filling the gaps a renovation journey needs.
- 01Adopt
Use the component as is.
Inputs, selects, date pickers and messages where standard behavior helps people.
- 02Theme
Keep the component, change the tokens.
Colour, type, radius and spacing tuned to Flip’s friendlier, consumer tone.
- 03Extend
Compose framework parts.
A service card that combines an icon, a job type and a short description.
- 04Build
Design what the framework lacks.
A renovation progress tracker from start to done, documented as a new component.
The working method used for the system. Token values stay in the private client file.
04The renovation journey
Choose, get quotes, follow, finish.
Flip’s journey is short and linear, and most of its users are doing it for the first time.
Homeowner / From idea to a finished job
- 01Choose the jobPick a renovation type, or describe something else
- 02Get quotesOffers from quality-checked tradespeople
- 03Follow the workProgress from start to in progress to done
- 04Done and paidCompletion and payment confirmed together
- Not sure what it’s calledAn “other” option lets people describe the job in their own words.
- Incomplete detailsThe form names the missing field and keeps everything already entered.
The work was mapping a renovation into clear steps, with forms that ask only what each step needs, visible progress and recovery when something is missing. The public site expresses the same promise in its own words: “Oppussing. Gjennomført.” (renovation, done).
Journey reconstructed for this case from the confirmed scope and the public site. It isn’t an original flow file.
05Components & states
Draw the edge cases first.
A step-by-step journey needs clear states at every step.
- Step not started, current, done
- Required field missing, named next to the field
- Saving and saved
- Quote pending, received, accepted
- Payment confirmed
Representative states drawn for this page from the confirmed scope (forms, progress feedback and recovery). The private component specifications aren’t reproduced here.
06Design decisions
The calls that shaped it.
Choices that shaped Flip’s journey.
An “other” option
People who can’t name the job can describe it in their own words instead of guessing a category.
Progress you can see
Start, in progress and done are shown as a tracker, so a homeowner always knows where the job stands.
Keep what people entered
A missing field is named next to the field, and everything else stays filled in.
07Accessibility
Theming shouldn’t undo the framework’s work.
WCAG 2.2 AA is the target, with APCA as a supplementary readability check. Element Plus provides keyboard and ARIA foundations; theming must keep them intact.
- Keep the framework’s semantics
- Theming changes how a component looks, never its roles, labels or keyboard behavior.
- Re-check contrast after theming
- A brand colour applied to buttons, links or chips is checked again at WCAG thresholds.
- Status in words
- Active and inactive, or step states, are labelled as well as coloured.
- Errors next to the field
- Each error names the field and how to fix it, and entered data is kept.
- Targets and focus
- Controls meet 24 × 24 px or have enough spacing, with a visible focus ring the theme doesn’t remove.
- Steps announced
- The progress tracker exposes the current step to screen readers, not just visually.
Design targets, not audit results. No formal conformance review is claimed.
08Handoff
Every brief starts with the client’s name.
Handoff for a journey is about the transitions between steps.
Say which level it is
Adopt, theme, extend or build tells engineers whether to use Element Plus as is, change tokens, compose parts or write something new.
Specify every exit
Each step documents what happens on back, on a missing field and on success.
States before build
A step is ready when its not-started, current, done and error states exist.
Keep it Flip’s
Briefs name the client and library first, so patterns from other clients never leak in.
For AI-assisted work, the brief loads only Flip’s brand and component references, so Claude or Codex can’t borrow another client’s rules or content.
09Scope
What I delivered, and what I’m not claiming.
- Product UX/UI for Flip’s renovation journey, June to August 2024.
- An interface system and Figma library built on Element Plus.
- Journey, form, progress and recovery states for the build.
No conversion or usage figures are shown. The public website on this page is context, and the private library and product screens aren’t published.
For something people do rarely, clarity beats cleverness. Each step should answer “what now?” before anyone has to ask.