Mavis Check-In Dashboard
A customer check-in platform I helped design and build from the ground up, now running across 3,500+ Discount Tire locations nationwide.
Mavis needed a faster, more consistent way for customers to check in for service across thousands of locations.
The existing process varied store to store, leaned on staff to manually walk every customer through it, and gave no way for customers to help themselves. That meant longer waits, inconsistent experiences, and more load on already busy service desks.
Translate the Figma designs into a fast, accessible interface, then build the plumbing so it could scale to thousands of stores.
I worked directly from Figma to build pixel accurate, responsive interfaces, then focused on the parts that don't show up in a screenshot: standardized data fetching through reusable hooks, a state layer in Zustand that stayed predictable as the feature set grew, and accessibility built in from the start rather than retrofitted.
- A staff-facing dashboard and a self-service customer check-in flow, both built from Figma to production
- Reusable hooks and components that standardized data fetching across the app
- A fully typed Next.js i18n localization feature for Spanish speaking customers
- Accessible components with ARIA labeling and semantic HTML, meeting WCAG standards
- Integration and unit tests with Playwright, plus production monitoring with Datadog and Sentry
The dashboard now runs in production across every Mavis Discount Tire location, and it's still the platform staff and customers use every day.
Check-in time dropped 64%, self-service adoption rose 40%, and a later localization pass let Spanish speaking customers track their own service independently, freeing staff time equal to five extra service jobs a day. I still monitor the app's health in production with Datadog and Sentry.