Lumosity Design System
Embracing modern systems design at Lumosity for mobile and desktop platforms.
Key Deliverables
- Requirements and architecture
- Typography scales
- Interactive components
- Component guidelines
- Design tokens and variables
- Variables structure
- Variables structure
Case Study
The opportunity to redesign Lumosity's app presented us with a chance to create something extraordinary: a design system that would set new standards for our product development workflow. As the lead designer on this initiative, I took on the challenge of creating a comprehensive system that would serve both current and future needs of our design and development teams.
In 2017, I created our first product design system when Sketch introduced components, marking a significant shift from our previous workflow of manipulating screenshots in Photoshop and Illustrator. This transformation coincided with the rise of design system methodology, heavily influenced by Brad Frost's Atomic Design principles, though the available tools at the time were limited.
In 2020 at the height of the pandemic Figma emerged as the dominate product design software. Its "multiplayer" interface fundamentally changed how design teams collaborated, but perhaps more significantly, it provided a robust toolkit that enabled the creation of complex, reusable components and styles. Throughout this period, I've had the opportunity to build and refine several iterations of Lumosity's design system, each version incorporating new technologies and features to better serve our evolving needs.
Typography
Creating an effective typography system proved to be one of our most challenging yet rewarding endeavors. Over weeks of testing and refinement, we developed a comprehensive typography kit that perfectly balanced harmony, readability, and visual hierarchy. This meticulous attention to detail has resulted in a premium, consistent feel across our application.
The impact of this work extends beyond aesthetics. Our designers now have clear, predefined typographic choices that eliminate fatigue and ensure consistency. For our engineering team, this standardization has significantly reduced the complexity of implementation, eliminating the common problem of multiple variations of similar styles.
Primitives, Tokens, and Modes
As we developed our cross-platform application, Figma's introduction of variables and modes proved transformative. Our system is built on a foundation of color primitives, comprising 12 shades for each color in our palette. These primitives are then transformed into semantic tokens that guide their usage across different contexts, from backgrounds to interactive elements.
The impact of this work extends beyond aesthetics. Our designers now have clear, predefined typographic choices that eliminate fatigue and ensure consistency. For our engineering team, this standardization has significantly reduced the complexity of implementation, eliminating the common problem of multiple variations of similar styles.
Components
Our component library represents the culmination of our systematic approach to design. It houses all the essential UI elements needed to rapidly prototype and test new experiences. Each component has been meticulously crafted to include all necessary states and variations, ensuring designers can quickly create functional and testable prototypes.
Systems for Designers
The library extends beyond basic interface elements to include interactive components, enabling designers to create realistic prototypes that accurately represent the final user experience. This attention to detail in our component design has significantly accelerated our design and development process while maintaining consistently high quality across all our interfaces.
Implementation and Documentation
While we've achieved significant milestones with this design system, I continue to explore new possibilities for expansion and improvement. Through extensive experimentation with Figma's toolset, I've been experimenting with pushing design system boundaries to create something that serves both immediate design needs and deeper functional requirements.