Roxanne Cook
Product Designer
edited.jpg

Evolving the Lumosity Design Language

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.

To work through this challenge, we assembled a small group of designers. I led a series of UI audits of our existing app to help identify our most common UI elements and where we needed to make changes. Once we identified our most common components, we prioritized a list based the most common, the most visible and the most relevant to the upcoming work in our roadmap. Each of us focused on a few screens and components to redesign and document.

I focused on the core experience. Below are a few key components I defined including buttons, CTA bar, and full bleed headers.

Screen Shot 2018-03-02 at 11.32.10 PM.png
Screen Shot 2018-03-02 at 11.35.04 PM.png
Buttons

Buttons

Buttons are relatively straightforward but because they appear across all our touch points, it was important to ensure that there were both dark and light versions that could work on top of a variety of background colors, patterns, and photographs. 

Call To Action Bar

Call To Action Bar

The Call to Action Bar or CTA Bar appears through the entire training experience, guiding users towards completing their workout. This component uses the button component.

Screen Shot 2018-03-03 at 12.21.19 AM.png
Full Bleed Header

Full Bleed Header

I identified two categories of the full bleed header in our app: informational headers and game banners. Informational headers are useful in introducing users to a feature or when diving into specific content. Game headers appear in the pre-game screens and showcase rich game art to elicit excitement.

Sample Screens

Sample Screens

Here are a few sample screens that showcase how our new components come together. The resulting proposed redesigns are now more unified and cohesive.

Our design component library is contained within a living documents in Sketch and Frontify that we update regularly with revisions and new components. We are working with engineers on the development and implementation components across all platforms.