Overview
The problem, and the shape of the solution
Quotation Generation SystemAdmin dashboard and mobile app for a field sales team
Sales reps needed to build and send quotes while standing in front of a customer, not back at a desk. I designed the admin dashboard and the companion mobile app that let them do it.
- Role
- UI/UX Designer
- Timeline
- 2025
- Team
- Design, engineering and product at Vixo Lab
- Platform
- Responsive web, Mobile
Case study 01
Quoting, moved out of the office
Quoting was a desk job. A rep would visit a customer, take notes, drive back, and rebuild the whole conversation in a spreadsheet before anything could be sent. The delay cost momentum, and re-keying introduced mistakes.
The brief was to make a quote something you can produce during the visit — with an admin dashboard behind it for the people who manage pricing and approvals.
Placeholder — replace with the real dashboard export in the studio.
Two surfaces, one system
The dashboard and the mobile app were designed as one product, not two. Shared components meant a decision about how a line item behaves only had to be made once.
Process
How the work moved
Five stages
Understand the current flow
Mapped how reps quote today, where the delays sit, and which fields actually get filled in.
Flows and wireframes
Laid out the quote-building path in low fidelity first, so the structure could be argued about before any visual work.
High-fidelity UI
Designed dashboard and mobile screens in Figma against a shared component set.
Prototype and review
Built clickable prototypes for stakeholder review and usability feedback, then iterated.
Handoff
Specced components and states, and worked with developers through build and QA.
Decisions
Problem
A quote has a lot of fields, but a rep standing in a customer's office can only handle a few at a time.
Decision
Split quote creation into short steps on mobile, while the dashboard keeps everything on one dense screen.
WhyThe two contexts are genuinely different: one is a two-minute task on a phone, the other is a considered edit at a desk.
Trade-offTwo layouts to maintain — paid for by sharing the underlying components.
Problem
Pricing mistakes are expensive and hard to walk back.
Decision
Keep the running total and any applied discount visible at all times, rather than on a summary step.
WhyThe number that matters should never be more than a glance away while editing.
Screens
Selected screens
Mobile
Mobile · building a quote on site.
Mobile · review before sending.