Evolving the Lumosity Design Language
Lumosity’s design language is a component library and style guide which promotes rapid development, code reusability, and design consistency.
Lumosity experienced a lot of growth over the years. Our design organization consists of multiple functions and teams. We needed to establish a design language so that we could work at speed and ensure UI consistency.
Modernize Lumosity’s design language across all platforms and touch points without negatively impacting metrics.
To work through this challenge, we assembled a small group of designers: 1 design director, 3 visual designers, and 1 motion designer.
My core responsibilities included but were not limited to:
Our Design Process
We started by auditing the current design system. I led a series of UI audits and as a group, we identified components that were widely used across all of our touch points.
We created a prioritized list based the most common, the most visible and the most relevant to the upcoming work in our roadmap.
We then focused on a one-to-one conversion of each of the design components. Each contributor selected a few components to redesign and write documentation.
Finally, we mocked up the main user flows with restyled UI. We iterated on our respective components until all the pieces were unified and cohesive.
We conducted component usability testing with approximately 8 users. Our goal of the sessions was to confirm the usability of the design language components. We wanted to know whether users had difficult interacting with the components due to the designs elements themselves (i.e. font size, color, shapes, etc.) and if they understand how to interact with the app with these newer components in place.
We made revisions to our respective components as needed based on the feedback we received.
We each partnered with engineers to refactor code for higher efficiency, and implement new components across all platforms including iOS, Android and web. I provided CSS styles to ensure components were implemented at the highest fidelity.
Ongoing Development and Documentation
Our design component library is contained within a living document in Sketch and Frontify that are shared across the design and engineering teams.
My Final Designs
I focused on the core experience. Below are a few key components I defined including buttons, CTA bar, and full-bleed headers.