Rebranding in a Snap: The native app version
Overview
After successfully rolling out a scalable, token-based rebrand across our web ecosystem using our MUI-based design system, we turned our attention to the native mobile app. The mobile experience—spanning over 150 screens across iOS and Android—needed to be visually aligned with the new brand direction while also honoring native platform conventions.
Rather than starting from scratch, I extended the tokens, visual rules, and design patterns from the Horizon system into the native space, using our rebrand theme as the foundation. The result was a comprehensive visual update that landed cleanly, quickly, and consistently across platforms.
My Role
I led the visual rebranding of the mobile app experience as the sole designer on the effort. With strong trust from my team and a well-established system foundation, I was able to work with significant autonomy to:
Define how the rebranded design tokens translated into native UI contexts
Apply consistent updates across ~150 screens using Figma components and styles
Collaborate with engineering to ensure all changes were implemented with minimal friction
Maintain visual parity with the web system while adapting for mobile-specific UX needs
My ownership of both design and coordination allowed me to move quickly and confidently, without needing to pause for dependencies or upstream system work.
Approach
Rather than rebuild the mobile design from the ground up, I treated this as a thematic extension of the brand refresh, the system already in place for web. Since Horizon was tokenized and built to support brand-level theming, I was able to translate its core design values into mobile-native patterns.
This included:
Applying the same color palette, typographic scale, and spacing rules used across the web
Auditing and updating every existing screen (~150 in total) to reflect the new brand
Creating mobile-specific variants of common UI patterns where needed, like buttons or list items
Using Figma components and styles to move quickly and maintain consistency across the entire system
Working directly with mobile developers to ensure that updates were both feasible and efficiently implemented
Before
After
System Leverage
Because the original brand refresh was built using a tokenized design system on top of MUI, the principles of that system were easily portable to mobile. This allowed me to:
Make consistent decisions across platforms
Extend token usage into React Native stylesheets with minimal refactoring
Reduce friction in both design and development
Keep visual integrity strong without redundant documentation
The mobile app didn’t rely on MUI itself, but by keeping the system principles centralized and well-defined, the transition across platforms felt natural and seamless.
Results
~150 screens refreshed across iOS and Android platforms
Completed in parallel with engineering, without blocking delivery
Maintained visual parity with the rebranded web experience
Delivered with minimal QA issues or visual regressions
Product teams experienced a clean, coordinated rollout with little need for explanation or follow-up
Takeaway
This project showcased what’s possible when a solid system foundation meets strong cross-functional trust. By leveraging our existing token-based design language—and being given full ownership of the mobile experience—I was able to rebrand a complex native app with speed and precision. A visual update that could have taken months was completed in a matter of weeks, without compromising quality or slowing down engineering.
In addition to engineering efficiency, this project also highlighted the value of thoughtful communication. The before/after mockups I prepared for review were specifically praised by the legal team for their clarity and structure, making it easy for them to evaluate compliance and sign off quickly—helping keep the entire project on track.