Gloo is a personal growth platform where users can uncover insights, resources, and technology to better serve and strengthen their people.

Client
Gloo

Role
UI/UX Designer

Agency
Human Design

My Role

I was the primary UI Designer on this project. I established the design system and data visualizations for the client’s suite of web applications. I also consulted on user experience recommendations for various screens and applications.

Problem

The client’s suite of web applications is being designed and managed by various designers and product owners. As a result, the interfaces were lacking consistency across UI components, grid system, and data visualizations. Additionally, the only color being used throughout the applications was blue, which made it difficult to differentiate between interactive components, data visualizations, and high-level information.

Results

I created a Sketch library of both custom and Material UI components for the Gloo designers to use as the product expands. I established a concise grid for the interfaces, a set of rules for how color should be used through the applications, and produced an array of high-fidelity wireframes for developers to give the client stakeholders the clean, professional look they were seeking for their products and brand.

 

Explore the prototype on your own.

Content Audit

Initially, I received five screens to get familiar with the platform and product. I conducted a content audit of the various UI components that were currently in existence throughout the five screens. I quickly realized that there wasn’t any consistency across the screens — the buttons’ shapes and sizes were different, the fonts didn’t match, some screens were designed larger than others, there was no grid structure, various global navs were being used, and color was not being used in an intentional manner.

Gloo’s Stance on Data & Color

After finalizing my content audit, the executive team made the decision that the company would not take a stance on data — Gloo would not use color to differentiate success or failure, what data was high (good) or low (bad). This added a new level of complexity to the project. I needed to explore color schemes that didn’t convey the typical status connotations associated with specific colors like green, yellow, and red.

Brand Color Palette Exploration

The marketing team had worked hard on the company’s new brand guidelines, which featured a range of colors including pink, blue, green, yellow, and orange. I created a set of screens that only used the brand colors without taking a stance on the data. Since the team wanted to maintain blue as its primary color, I reserved it for all of the interactive components. This decision also added a level of difficulty while searching for colors that didn’t convey a stance on data since blue is fairly neutral.

Accessible Color Palette Exploration

After realizing the current brand colors were limiting and not expressing the look we desired, I branched off of the brand guidelines to explore new colors. I’m a big advocate for accessible design, and I think it’s really important to make sure all of the colors used online are accessible to all. I used this cool resource to check the color contrast of the existing colors. I found that only a couple of colors made the AA standards. I used these colors as inspiration to create a new, accessible palette that wouldn’t convey meaning in the data.

Data Visualizations Styling & Color

We decided to pause on exploring color throughout a range of screens and focus on solving the data visualization problem. There were two primary screens showcasing data in a variety of ways that allowed us to explore how color could affect the user experience. First, I wanted to explore the styling of the data visualizations. I wanted to clean it up to be very clear to the not-so-tech-savvy users; I added a gray bar to show the length of the bar graph in its entirety, aligned the text, and created a consistent layout.

Next, I came up with a new data-neutral color palette. I explored multiple ways of applying color to the data — do I stick to monochromatic or add color throughout? Should each color be used to categorize the various types of data (demographics, custom questions, etc)? Or, should the color be used to differentiate the multitude of comparisons the users could make with the data in the filters? I answered each of these with an exploration of color.

Users can’t view all of the data at once.

The use of color was solved, but now with the nicely spaced data, the user can’t see all of the data on the screen at one time. I went back to the styling and pushed farther to accommodate what would happen if the user added multiple comparisons to each set of data. I managed to get all of the data on the screen throughout the data sets without compromising a clean, clear layout.

Final Results

I created consistency across the suite of nine web applications by providing the client with a Sketch component library. The design team now has a reference for how screens should be set up and structured for future needs as well as access to the various UI elements and data visualizations they’ll need.

 

Explore the prototype on your own.

Before Screen

After Screen

...

This is a unique website which will require a more modern browser to work!

Please upgrade today!