Sense: A super modular design system built from grounds up
Sense: A super modular design system built from grounds up
Jupiter - Sense
A super modular design system built from grounds up
Design system
strategy
What is Sense Design System?
The Sense Design System is like a Lego set, providing reusable UI components and clear guidelines specifically tailored for React Native apps. It ensures consistent, high-quality interfaces across Android and iOS, streamlining development and aligning digital experiences with Jupiter Money’s standards for performance, aesthetics, and usability. Sense eliminates redundant work, enabling teams to focus on innovation, collaborate efficiently, and deliver cohesive, scalable, and optimized mobile experiences.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
My role included leading the entire project end-to-end,
working with 30 developers and 20 product designers.
4 months of duration
A brief history
Redesigns spark innovation. At Jupiter, our goal was to create India’s best-designed financial app. Transitioning from a playful planetary spaceman theme to a mature and trustworthy UI/UX required the creation of Sense, a modular and scalable design system. Sense replaced the outdated Europa, enabling seamless and reliable experiences.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
Guiding Principles
Principles guided our journey toward a shared vision:
Prioritize Ease of Use: Ensuring accessibility and usability of styles, components, and code.
Align Design with Code: Maintaining consistency by closely aligning design and code libraries.
Conviction in Craft: Simplifying complexity and upholding high standards consistently.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
Tokens
Design tokens express design decisions in a platform-agnostic manner, establishing a common language for designers and developers. Tokens are categorized broadly into universal, alias, and component levels, and can be expanded as needed. Storing tokens in a code repository improves efficiency, simplifies updates, and fosters easy collaboration between design and engineering teams.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
Components, patterns and assets
Components form the essential building blocks, ensuring consistent UI across screens, products, and platforms. They are modular, scalable, and customizable, incorporating motion when beneficial.
Standardizing common design patterns—such as FAQs, settings, empty states, success/error screens, loading screens, and validation messages—has reduced redesign effort by nearly 20%.
Asset management was optimized by centralizing repositories for consistency, smaller file sizes, and faster rendering. Icons were provided as a font within the component library, updated regularly, while other assets and illustrations were managed via Figma and Playbook.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
Documentation
A documentation covering the introduction, best practices, usage guidelines, and content standards for top components and patterns is published, with full library support planned by end of CY2025.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
Accessibility
Dark Mode
Initially tested with a select user group, dark mode enhanced visual accessibility for users with light sensitivity and visual impairments, despite being temporarily withdrawn for business considerations.
Validation Cues
Clear validation messages accompany color cues in form inputs to accommodate users with color blindness, particularly protanopia.
Selection Cues
Thicker borders highlight focused interactive elements, ensuring clear visibility without relying solely on color.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
Governance
A documentation covering the introduction, best practices, usage guidelines, and content standards for top components and patterns is published, with full library support planned by end of CY2025.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
Mobile Screens
Impact
Efficiency
Sense significantly boosted organizational efficiency, cutting design and development turnaround times by over 100%, resulting in an estimated 400% overall efficiency gain.
Code reduction
Redesigning just 20% of the app eliminated over 100,000 lines of code, with projections reaching 1,000,000 lines upon full implementation. This greatly enhanced performance and user experience.
Cultural Integration
Sense became deeply embedded within company culture, recognized universally as a strategic tool driving innovation and efficiency.
Stephen Mayer, a Salt Lake City native, was nurtured in the publishing world by his magazine-running father and developed a fascination for fonts upon receiving a Mac for his family. During his collegiate years, he skipped lectures and gained knowledge about typeface—and life—by working as a designer for his university newspaper.
He also worked independently as a consultant, bridging the gap between typeface creators and users, always championing the needs of both parties. Not only is he the co-founder of the web platforms, Typographica and Fonts In Use, Stephen has also penned a regular column for Print magazine and authored the acclaimed book The Anatomy of Type. In 2017, he became an integral part of the nonprofit library and museum, Letterform Archive, as an Associate Curator and Editorial Director.
Credits
role
Design system
Strategy
Motion design
Product design
Validation
Tools
Figma
Confluence
zeroheight
Token studio
team
Design
Dilip Merugu
Engineering
Udasi Tharani
Explore next
Lights on·off