Design System

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.

Type

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 implementation of light and dark modes through this system allows designers to instantly switch between theme variations, ensuring our interfaces work beautifully in any context. Beyond static design elements, we leveraged variables for creating dynamic prototypes that accurately represent user interactions and state changes.

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.

Guidance by design

The library extends beyond basic interface elements to include sophisticated 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.

Looking Forward

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.

The system supports multiple color themes, platform-specific variations, and different input methods, all while maintaining an intuitive interface for designers. This balance between simplicity and sophistication ensures that our design system will continue to evolve alongside our product, supporting innovation while maintaining consistency and quality.

The result is a design system that not only meets our current needs but provides a solid foundation for future growth and innovation. It represents a perfect balance between flexibility and consistency, enabling rapid prototyping while ensuring our high standards for quality and user experience are maintained across all platforms and contexts.