eero design system


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.


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


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


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