Product Designer

Evolving our Design Language

Lumosity has experienced a lot of growth over the years. Currently our design organization consists of multiple functions and teams. It became clear that we needed more systematic ways to guide and leverage our collective efforts. To work through these challenges and keep our decision making process fast, we assembled a small group of designers to define standard UI components for our most common elements. I have been responsible for refining and creating documentation for a few of our most common UI elements. I have also worked closely with engineering to ensure proper implementation of these components.

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 all come together. The redesigns using the new components are more unified and cohesive. 

Our design component library is contained within a living document that we update regularly with revisions and new components.