Group@3x.png

eero design system

eero-rebrand-hero.png
 

____
eero design system

The design system was my solution to the design team’s need to quickly and accurately create 100+ screens during the app redesign. Using the app audit I had done earlier I made a plan for defining, creating, and developing our system, which helped me champion the project to others. During this process I identified pain points for various teams in the organization and worked with a UX designer to develop a new workflow for the hand off process with the larger product org. 

My role: visual designer, project manager, researcher

 
demo try.gif

system in action

Now that we have a comprehensive collection of components and documented patterns, creating a screen is faster than ever. This helps keep screen designs cohesive while giving the team more time to focus on the users rather than spending all their time creating a standard screen.

 
 

____
list items


The eero app is made up of mostly list items, therefore I spent a good deal of time organizing them in a way that cut down on the number of symbols, but still gave the team every instance they needed. I was able to narrow down the number of symbols from 15 to 5. These are a few highlights from my process.

 
list-item-examples.png

Breakdowns of each list item with examples of when they're used in the app today. This is helpful for the designers and the engineers to have as reference

overrides.png

The overrides provided by deeply nested symbols allow us to use one symbol as the base for 10 others

expanded.png

Expanded list item templates were created for the times when more information or context is needed