Role
Lead Designer
Company
Reviver
Time Frame
Six Weeks
Overview
Reviver’s iOS and Android apps lacked a consistent design language. Engineers rebuilt components differently, QA flagged frequent mismatches, and users experienced uneven interfaces.
I led the creation of a unified Figma-based, token-driven design system with platform-aware components and developer-ready documentation.
Outcome: cut design-to-dev cycles by ~35%, reduced QA issues by ~40%, and established a scalable foundation for faster feature releases.
The Challenge
No single source of truth — components were duplicated and inconsistent.
Engineers struggled with unclear specs, leading to wasted development time.
Missing patterns slowed down new feature delivery.
Without a design system, our apps couldn’t scale or provide a polished user experience.
My Role
I owned the process from audit to rollout:
Defined design tokens and structured the system in Figma.
Built platform-specific component variants aligned to Apple HIG and Google Material.
Walked engineers through implementation and finalized the system for production.
My Process
1. Audit & Inventory
Reviewed every screen to document inconsistencies.
Organized UI into Elements (buttons, loaders, icons), Components (dialogs, nav bars, segmented buttons), and Utilities (snackbars, tiles, forms).
2. Design Tokens with Figma Variables
Created tokens for color, typography, spacing, and icons.
Built separate token groups for iOS (SF Pro, iOS shadows) and Android (Roboto, Material elevation).
Enabled instant variant switching in Figma to design once and adapt everywhere.
3. Component Library
Rebuilt atomic components with consistent states (hover, disabled, error).
Developed platform-aware versions — e.g., iOS modals vs. Android dialogs.
Structured the library for scalability and modularity.
4. Documentation & Accessibility
Annotated components in Figma with usage notes, spacing, and accessibility labels.
Standardized naming conventions for clarity across design and code.
Shared contribution rules for long-term sustainability.
Solution Delivered
A unified mobile design system with:
Elements: Buttons, loaders, badges, icons
Components: Dialogs, bottom sheets, segmented buttons, nav bars
Utilities: Snackbars, forms, tiles, app bars
Platform-aware variants that respected native guidelines while keeping Reviver’s brand consistent.
Developers received annotated, implementation-ready specs — eliminating guesswork.
Impact
~35% faster design-to-dev cycle (reduced rework and back-and-forth).
~40% fewer inconsistencies flagged during QA.
Features shipped 2–3 weeks faster on average.
2× faster onboarding for new designers and engineers.
35%
Faster design-to-dev cycle
40%
Fewer inconsistencies
2X
Faster onboarding
Reflection
What Worked
Tokens and variables gave us scalable consistency across platforms.
Platform-specific variants balanced native behaviors with brand alignment.
Regular engineer walkthroughs drove adoption and reduced friction.
What’s Next
Add automated visual QA (e.g., Chromatic) to detect drift.
Expand tokens to support dark mode and theming.
Formalize a governance model (versioning, audits, contribution workflows) to future-proof the system.
Why This Matters
This project wasn’t just about cleaning up UI — it was about creating a system that accelerated the business. By bridging design and engineering, I built a foundation that saved time, reduced risk, and scaled with Reviver’s growth.