A design language system for a SaaS app

My Role: Design Language creation, UI Design

Govzilla is now known as Redica Systems. Using data, analytics and expertise, its software allows Pharma Companies, Food Manufacturers, Medical Device Companies to process government inspection and enforcement data in order to improve compliance, identify market opportunities and increase product quality.

Problem

To get ahead of the competitors, Govzilla aimed to improve its SaaS application by applying artificial intelligence and completely changing Wordpress-based design.

I joined the company when they were working on MVP for about 2 months. By that time, a couple of user flows were designed and handed-off to the developers.


As a team of two designers, we had a lot of work to do in tight deadlines. To work effectively and maintain the consistency and accessibility of the user interface, I took the initiative to create a design language system.

Challenge

It was extra work that was not included in the roadmap of building MVP. Thus, Govzilla management was concerned about meeting deadlines because it was vital to launch MVP on time.

Process

“Styles come and go. Good design is a language, not a style.” –Massimo Vignelli

A successful design language creates focus, clarity, and confidence, and in turn creates consistency throughout the app and speeds up the development process. A pattern library and style guides are the dictionary and thesaurus for the design language.

Since the developers had to be the users of the pattern library, I asked them if they had any problems coding the current design. At that time there were no established style guides.

There was no component library that we could refer to, so we had a lot of inconsistencies in button attributes, input fields, etc. We had to spend a lot of time talking to the designer to clarify them.

It was complicated to have all sorts of similar colors which would make it harder to maintain in the long run.

A bird's-eye view

 

For starters, I made a visual audit of the existing styles and components. I discovered some inconsistencies in font styles, paddings, component sizes. It was not clear why some buttons were in blue color and the others were light green. Also, there were some elements that looked very similar and could confuse users.

A color palette was very generic, without clarification of what primary, secondary, and tertiary colors were.

My goal was to standardize the design but to do it with great care so that the rework would take a minimum of time and effort.

Color palette

 

Colors are fundamental building blocks and they affect all parts of the product. So I had to organize them first. I aimed at creating a color palette that didn't have an accent color that wasn't associated with the base color, and so that the user interface didn't have a color that wasn't represented in the palette. Also, while considering color combinations I kept in mind the accessibility - color blindness and contrast.

 

I chose Govzilla’s brand colors as the basis of the color palette: the blue color was a primary one and the green color was an accent one. I just slightly changed its hue and shade to make it more elegant. 

 

Applying color to a product design has a lot to do with balance: the more colors are used, the harder it is to achieve balance. That’s why I used a limited number of colors in the palette.

 

To make it easy for developers to work:

  • I named the colors together with the developers

  • Next to each color sample, I placed a short description of where the color should be used.

Grid System

 

Spacing is often an overlooked element but it is one of the biggest influences in creating a well-organized application. The lack of a consistent measurement unit can lead to layout inconsistencies throughout the app.

 

Based on my own experience and having read some articles about measurement units, I chose an 8-point grid system.

Elliot Dahl explained it very clearly, why:
“Scaling by increments of 8 offers a good amount of options without overloading you with variables like a 6 point system, or limiting you like a 10 point system. The “system” is only good if it is easy to follow and repeat.”

In addition, memorizing numbers that are multiples of 8 is a good brain workout.

Typography

 

Good typography is invisible, allowing customers to have a seamless experience while using an application.

 

A well-working font-family Open Sans had been chosen before. My goal was just to create text styles that:

  • Covered all the scenarios in the UI 

  • Were distinct enough to indicate content hierarchy yet consistent

  • Met accessibility guidelines and ensured good readability

 

For easier use, I named each style as if a short description of where it can be used.

Icons

 

We used Material design icons in the app. But in some cases, it was necessary to utilize customized icons. I compiled a list of these icons and kept them up-to-date during the design process. In order for users to clearly distinguish Material design icons from customized ones, I had an agreement with the users to name these icons differently.

Icons@3x.png

It's the component time!

 

Components provide better collaboration between design and development, allowing the design language to evolve over time.

 

Often while designing, it is impossible to show different states of components or interactions on each screen. But I solved this problem by designing all component states and collecting them in one place.

 

Buttons communicate actions that users can take. There were a few types of buttons in the app. I designed all their states and showed examples of their use.

Well-designed data entry forms allow a user to easily interact with the SaaS application.

Tables, or list views, are one of the crucial parts of Godzilla's application. To provide users with information in a digestible form, table columns have sorting and filtering functions where it is needed. I showed how sorting and filtering icons looked like in different variations.

Before designing, I analyzed filter parameters of all columns and grouped filters based on their complexity and context. It was important to put all filters in one place and design every interactive state to facilitate developers' work.

I was gradually adding new symbols and components but did it only when I was sure those elements would be reusable. As soon as the components were ready, I uploaded them on inVision to communicate and get feedback from the teammate and engineering team.

Having all the components on a single page is really good when we are looking for elements to implement.

This library eliminated my questions and allowed me to focus on coding instead of wasting time confirming basic details.

It helps me have standardization of colors and styling. With this, we are able to create variables with the same standardization. This will help if future changes are minimal.

Here are some screens I designed using the design language.

Conclusion

At first, the management was rather skeptical about creating a design language system. They thought it would take a long time and significantly slow down the work on building MVP. But eventually, they truly valued it because:

  • Integrated at an early stage, the pattern library sped up designers' and developers' work

  • The design language allowed the product team to communicate more effectively and eliminated unnecessary misunderstandings. When we talked about styles or components, having a visual reference helped make sure that we were all talking about the same thing

  • It provided consistency and sticking with accessibility guidelines throughout the application

 

Due to the extreme lack of time, I was only able to briefly describe how to use components. But in order for the design language to grow into a full-fledged design system in the future, it should be provided with well-written documentation that accompanies the assets.

 

I believe that a well-made design language system can benefit all design and development projects by allowing the entire team to better collaborate and contribute, including new teammates.