SaaS · Design system
Mechanic Desk
My roles: UI Designer
An Australian SaaS for the auto-repair trade, on web and mobile. The platform had grown into a large set of inconsistent templates, making new features hard to extend and diluting the brand experience.
As the product ecosystem grew across web dashboard, iOS app and Android app, the team faced inconsistent UI patterns across platforms, design-to-development mismatch, and difficult onboarding for new designers and engineers.
Needs
The board needed a design system that standardises every UI element and brings one unified visual language across all platforms and vendors.
The design team (me and two other UI designers) built a design system in Figma with dark and light themes, then adapted it to mobile. The challenge was scale: after the base elements and style guide, we built components at module level so the design stays consistent across features.
Design system screenshots coming soon
Design tokens as a single source of truth
The team aligned on a token-driven design system, where design tokens and variables act as the single source of truth for styles and components across platforms.
From draft to production
- Token-driven system as the single source of truth across Web, iOS and Android
- Built from scratch and adapted from Ant, Material, HIG, Fluent and Untitled
- Designers rotate across features to build a deep understanding of the entire platform
- I manage a draft-to-production Figma workflow, with designs linked to Jira, Nifty, or Linear for clear traceability
- The team maintains full app design versions based on production states to preserve design history
- These versions support app reviews and UAT, helping identify UI/UX issues and user friction early
171
Components
13
Core modules
+2
Dark theme and responsive