About Projects Services Journal
All projects

Roadcase MVP

Product Design Design Systems UX Research Design Engineering
Role Lead product designer
Platform Web and mobile
Year 2026
Roadcase MVP
Overview

A tour budget that survives the routing changing.

I led design across the platform: research, information architecture, the token set and component library, and every screen. Specs went to engineering as Dev Mode annotations rather than a separate document.

Problem

Spreadsheets can’t follow the routing.

Tour managers build budgets in spreadsheets that go stale the day they are shared. A cancelled date, a currency swing or a fifth crew member ripples through per diems, withholding tax and freight, and nobody finds out until settlement.

Solution

One live budget, connected end to end.

One live document instead of a spreadsheet. Dates, people and cost lines are connected, so a change anywhere updates the total everywhere. Alternative scenarios let a manager test a routing change without destroying the budget already agreed.

View in Figma

Design process

  1. 01

    Discovery

    Tour manager interviews Settlement walkthroughs
    Historical tour budgets Competitor teardown
  2. 02

    Structure

    Tour and budget data model Navigation model
    Scenario state machine Content inventory
  3. 03

    Design

    Colour and type tokens Component library
    Budget and itinerary screens Scenario comparison screens
  4. 04

    Handoff

    Dev Mode annotations Component specs
    Build reviews Design QA
  5. 05

    Measure

    Budget accuracy at settlement Time to first budget
    Support ticket volume Adoption by role
The Roadcase tours dashboard on a Studio Display on a perforated steel platform The Roadcase live budget: detailed line items, summary, adding a line item, editing a row and the tour itinerary calendar Roadcase design system: white accent, dark surface, teal data and muted grey, Stack Sans Notch for the logotype and Stack Sans Text for the interface Roadcase scenarios: comparing budgets, the tours dashboard by scenario, working in an alternative scenario, the switcher, duplicating a scenario and making it the master budget The Roadcase Today screen on an iPhone resting on a black leather jacket Roadcase on mobile: today, itinerary, budget snapshot, adding a cost and the recalculated totals An arena before doors open, closing the case study with Mike's contact email
Next project Bridlepath

Let's collaborate

Mike Lopez © 2026 designed & developed by Mike Lopez GMT+8
All projects

Roadcase MVP

Product Design Design Systems UX Research Design Engineering
Role Lead product designer
Platform Web and mobile
Year 2026
Roadcase MVP
Overview

A tour budget that survives the routing changing.

I led design across the platform: research, information architecture, the token set and component library, and every screen. Specs went to engineering as Dev Mode annotations rather than a separate document.

Problem

Spreadsheets can’t follow the routing.

Tour managers build budgets in spreadsheets that go stale the day they are shared. A cancelled date, a currency swing or a fifth crew member ripples through per diems, withholding tax and freight, and nobody finds out until settlement.

Solution

One live budget, connected end to end.

One live document instead of a spreadsheet. Dates, people and cost lines are connected, so a change anywhere updates the total everywhere. Alternative scenarios let a manager test a routing change without destroying the budget already agreed.

View in Figma

Design process

  1. 01

    Discovery

    • Tour manager interviews
    • Settlement walkthroughs
    • Historical tour budgets
    • Competitor teardown
  2. 02

    Structure

    • Tour and budget data model
    • Navigation model
    • Scenario state machine
    • Content inventory
  3. 03

    Design

    • Colour and type tokens
    • Component library
    • Budget and itinerary screens
    • Scenario comparison screens
  4. 04

    Handoff

    • Dev Mode annotations
    • Component specs
    • Build reviews
    • Design QA
  5. 05

    Measure

    • Budget accuracy at settlement
    • Time to first budget
    • Support ticket volume
    • Adoption by role
The Roadcase tours dashboard on a Studio Display on a perforated steel platform The Roadcase live budget: detailed line items, summary, adding a line item, editing a row and the tour itinerary calendar Roadcase design system: white accent, dark surface, teal data and muted grey, Stack Sans Notch for the logotype and Stack Sans Text for the interface Roadcase scenarios: comparing budgets, the tours dashboard by scenario, working in an alternative scenario, the switcher, duplicating a scenario and making it the master budget The Roadcase Today screen on an iPhone resting on a black leather jacket Roadcase on mobile: today, itinerary, budget snapshot, adding a cost and the recalculated totals An arena before doors open, closing the case study with Mike's contact email
Next project Bridlepath

Let's collaborate

Mike Lopez
© 2026 designed & developed by Mike Lopez GMT+8