Plotz, Protobrand’s design system


January 2020— 
Role: I lead this project with the support of our tech director, product manager, and CEO
Result: A more cohesive, intuitive, and accessible interface. 

*Unfortunately, due to NDA, I am limited as to what I can showcase!

Cover image of a purple gradient


01 — Why a design system?
02— Our values

03— Plotz
04— Impact
05— Next steps



01— Why a design system?

These days, companies need to be able to respond to an ever-changing market at lightning speeds. This means updating and revamping numerous web pages, interactions, features, and more— constantly.


Without a design system in place, business users heavily rely on designers and developers to churn out the appropriate assets, delaying launch times and lengthening product backlog.

Furthermore, design systems serve as the foundation for products. Utilizing Brad Frost’s atomic design principles︎︎︎ allows us to create standardized design patterns that can be recycled with each project. That means less time spent building similar types of components and more time spent on other areas of the development cycle. 

Plotz was our solution to reduce stress on our engineering team and streamline all design efforts. Our goal is to create a system that minimizes business users’ dependency on design and engineering oversight and unlocking product team’s full potential. 





02— Our values

My team (tech director, product manager, CEO) and I recognized this as an opportunity to represent our values as a company.


Together, we determined the following values to use as a guide. We wanted our design system to be:

︎ Modern

Our system must be sleek and cool— but also follow the latest accessibility standards.
︎ Utilitarian

Our system must be pragmatic and help our users do their job well, not distract them.
︎ Modular

Our system must be scalable so that we can build on Plotz as our product expands. 

We checked out a few existing design systems for inspiration too. Favorites include Latitude︎︎︎, IBM Design Language︎︎︎, and Lexicon︎︎︎.



03— Plotz

Typography


The team and I chose Roboto as our sole typeface for accessibility reasons. Its simplified forms don’t distract from the information at hand and aid users with dyslexia and other visual impairements. 

A chart of the various type sizes in our platform, from Display sizes to Label sizes.

To keep from looking monotonous, typography on our platform follows a particular 4 pixel rhythm depending on the relationship between two items.




All numbers are set to use tabular lining so that all digits take up the same amount of lateral space. This helps with readability and reduce screen fatigue. 


Iconography


Icons are a useful tool when communicating with small amounts of real estate. When determining our layout, we discovered a great way to give users a “quick view” of a project was to put pertinent information in a bar. In some cases, users can take action within these bars, like copying or deleting. This is when icons can be handy.



In true Susan Kare style, I drew each of our icons by hand in a grid notebook first to test if a silhouette was possible. I then printed them out in the size they’d be viewed, and held crit sessions with my team to determine if they were readable and meaningful.

Icons that passed the crit phase were then tested on real users (many of them market researchers within the office) by replacing old UI with test icons.

An example of our image icon from start to finish. Each icon went through a rough sketch phase where I figured out what we could fit in a 32 pixel grid. This includes a 2 pixel padding on all sides. 



Here are some guidelines for business users when using our icons in a marketing space, like a client report or conference backdrop. Design guidelines for business users case study coming soon!



Color


Plotz follows two principles when it comes to using color:

Colors should be used sparingly to avoid visual fatigue
Colors must follow Web Content Accessibility Guidelines. More on this here︎︎︎

The following is Plotz’ full color spectrum. This can be read as, anything labelled 50 and above is accessible on a black background, while everything 60 and below is accessible on a white background.



We built our color system with the help of colorbox.io︎︎︎ and the Contraste app︎︎︎



The most common usage of color is found on the data visualizations. Our platform is able to create a number of different graphs, each of which can have a limitless combination of text and color, and sometimes imagery. To anticipate this, it was important that we determine a spectrum of colors that are visually striking from one another so that they don’t blend together in a complex graph. This, of course, also takes into consideration various visual impairements and conditions, like color-blindness. 

Analysts can customize their color settings by choosing from 9 different options— without colorblindness or one of 8 types of color-blindness, illustrated by the same radar graph:



Colors also play a crucial role in other spaces, such as alerts and differentiating between statuses.


Layout


Our platform is packed with information. One of our greatest challenges was to find a way to reskin the platform so that it was no longer overwhelming and hard to read.

The team and I sketched out possible layouts and found our best solution was to vertically organize information while layering transitory elements using drop shadows and gray tones.

Surfaces are flat and are placed next to eachother
Drop shadows are reserved for dialogs and dropdowns
Borders are used to separate information








05— Impact

Plotz has made Protobrand more agile across platforms and needs. 


Business users have more autonomy
Analysts, business devs, marketers, and more can now achieve more confidently without relying on designers and developers. 

Responding to market changes
Quick turnaround for new content has enabled marketers to respond to and capitalize on market changes.

Ability to better fulfill business needs
With Plotz, our lean team of three developers, one designer, and one product manager are able to work more efficiently and sustainably than before. We now have the time to focus on other areas of the product development process, like wireframing, and wayyy better speeds.

Back to work ︎︎︎



Made with ❤ by sukanyaray_

#blacklivesmatter