Roxanne Cook
Product Designer
buttons01.jpg

Evolving the Lumosity Design Language

Lumosity’s design language is a component library and style guide which promotes code reusability, rapid development, and maintainability.

 

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.

 
 
buttons01.png
 
 

Overview

 

Problem
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.

Goal
Modernize Lumosity’s design language across all platforms and touch points without negatively impacting metrics.

 
 
 

My Role

 

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:

UI Audit
Usability testing
Interaction design
Visual/UI design 

Responsive design
Style Guide
CSS

 
 
 

Our Design Process

 

UI Audit
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.

 
 

Design
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.

 

Dashboard Flow

Activities Tab Flow

Pre-Game Screen Flow

 

Usability Testing
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.

 

Testing the Dashboard Screen

Testing the Pre-Game Screen

 

We made revisions to our respective components as needed based on the feedback we received.

 

Implementation
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.