Company
Human Design

Role
UI/UX Designer

Contributions
Design Research
Product Design
UI/UX

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

They came to us looking to streamline a suite of web applications and implement the beginning of a design system into existing wireframes in three months. The preliminary designs were being managed by various designs and product owners, which resulted in interfaces lacking consistency across UI components, grid systems, and data visualizations. I established a design system, data visualizations, and finalized, high-fidelity wireframes for developers to provide the client’s stakeholders the clean, professional look they were seeking for their products and brand.

THE PROJECT FOCUS
Bring parity to the suite of web applications
through a consistent grid, components, and data visualizations
by introducing a design system.

DESIGN AUDIT

I conducted a design audit by combing through each application and wireframe. The screens lacked consistency across every screen — the buttons’ shapes and sizes were different, the fonts didn’t match, there was no grid structure, various global navigation were being used, and color was not being used in an intentional manner.

EXECUTIVE DECISIONS + MARKETING BRAND GUIDELINES 

Gloo is essentially an insights platform, so data visualizations are prominent throughout every application. The executive team decided to avoid taking a stance on data, meaning Gloo would not use color to differentiate success or failure or what was considered good vs bad data. This added a level of complexity to the project, because the company was simultaneously undergoing a rebranding, which featured a range of colors including pink, blue, green, yellow, and orange. I needed to explore color palettes for the product that didn’t convey the typical status connotations associated with specific colors like green, yellow, and red, while complementing the company’s new branding color palette.

FOCUSING ON DATA VISUALIZATIONS 

I explored multiple color applications with the data-neutral color palette. Users can add up to six data points to compare in each category of data or filters. After testing a variety of color palettes, I pursued an analogous palette after it showed better results. 

After the color usage was finalized, I began analyzing the current data visualizations’ styling. Users weren’t able to see all of their data on the screen at one time. I managed to create a component system allowing users to see all of their data on the screen throughout the data sets without compromising the clean layout the stakeholders were seeking.

THE IMPACT

I created a component library as a reference for the in-house design team
consisting of a grid system, color palette, buttons, text styles, data visualizations,
navigation, and other UI components. I documented how the elements should be
used in over 100 wireframe mockups that were immediately delivered to the
development team. As a result, the developers had over 3 months of
development time with the mockups to allow the design team to implement
the new design system into the rest of the wireframes.

...

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

Please upgrade today!