Design Systems
Time
1 Quarter
Time
1 Quarter
Time
1 Quarter
Role
Senior Prudct Designer
Role
Senior Prudct Designer
Role
Senior Prudct Designer
Service
Design Systems
Service
Design Systems
Service
Design Systems
While looking for a way to accelerate designers outputs in conceptualizing their ideas, I added two design library for support. The first was a data visualization library and the second was a lofi wireframing library.
Dec 29, 2025
Background & Goal
Background & Goal
Background & Goal
While the team was trying to keep up with products demand for design assets, I found myself and the team taking a long time tweaking complex visualizations or trying to communicate during early ideation phases. During ideations, teams would use high fidelity mocks when explaining problems but would get tangled up in the distracting hi-fi details. While in the final stages of hi-fi mocks, designers were taking up time researching and creating the perfect visualizations for small widgets.
The goal was to create a lo-fi library that mimicked our current system so that it was easy for everyone to understand and a new set of data visualizations that could fit a variety widget use cases.
While the team was trying to keep up with products demand for design assets, I found myself and the team taking a long time tweaking complex visualizations or trying to communicate during early ideation phases. During ideations, teams would use high fidelity mocks when explaining problems but would get tangled up in the distracting hi-fi details. While in the final stages of hi-fi mocks, designers were taking up time researching and creating the perfect visualizations for small widgets.
The goal was to create a lo-fi library that mimicked our current system so that it was easy for everyone to understand and a new set of data visualizations that could fit a variety widget use cases.
While the team was trying to keep up with products demand for design assets, I found myself and the team taking a long time tweaking complex visualizations or trying to communicate during early ideation phases. During ideations, teams would use high fidelity mocks when explaining problems but would get tangled up in the distracting hi-fi details. While in the final stages of hi-fi mocks, designers were taking up time researching and creating the perfect visualizations for small widgets.
The goal was to create a lo-fi library that mimicked our current system so that it was easy for everyone to understand and a new set of data visualizations that could fit a variety widget use cases.
Lo-fi Wireframe Library
Lo-fi Wireframe Library
Lo-fi Wireframe Library
This new lo-fi library was designed by mirroring our current product pages so that when presenting ideas affecting those areas, collaborators would be reviewing from a familiar understanding. Colors were limited and text shapes were encouraged so that communication wouldn't get caught up on any metrics. Designers were told to break components and allowed to use any forms that helped communicate goals.
This new lo-fi library was designed by mirroring our current product pages so that when presenting ideas affecting those areas, collaborators would be reviewing from a familiar understanding. Colors were limited and text shapes were encouraged so that communication wouldn't get caught up on any metrics. Designers were told to break components and allowed to use any forms that helped communicate goals.
This new lo-fi library was designed by mirroring our current product pages so that when presenting ideas affecting those areas, collaborators would be reviewing from a familiar understanding. Colors were limited and text shapes were encouraged so that communication wouldn't get caught up on any metrics. Designers were told to break components and allowed to use any forms that helped communicate goals.
Data Visualizations
Data Visualizations
Data Visualizations
With creating a new set of components comes defining some guidelines. Designers should be educated on when to use one over the other when placing a set of visualizations. I used documentation as a resource for education and describing best practices for each set. I also showed atomic principles on how I made each of these choices while creating the components.
With creating a new set of components comes defining some guidelines. Designers should be educated on when to use one over the other when placing a set of visualizations. I used documentation as a resource for education and describing best practices for each set. I also showed atomic principles on how I made each of these choices while creating the components.
With creating a new set of components comes defining some guidelines. Designers should be educated on when to use one over the other when placing a set of visualizations. I used documentation as a resource for education and describing best practices for each set. I also showed atomic principles on how I made each of these choices while creating the components.
Outcomes
Outcomes
Outcomes
With the addition of these resources we were able to have greater cross team collaboration by seeing the larger picture through wireframes and save time from designers getting caught up in visualization decisions.
With the addition of these resources we were able to have greater cross team collaboration by seeing the larger picture through wireframes and save time from designers getting caught up in visualization decisions.
With the addition of these resources we were able to have greater cross team collaboration by seeing the larger picture through wireframes and save time from designers getting caught up in visualization decisions.
