Happie's Design System

Designing for the worlds first job board for passive candidates.
See Happie’s new design language 👇

Overview

Happie had never had a permanent designer before, I was the first. Many employees had worked on the design side of the product, but there had never been any consistency. A multitude of design components were handed off to me to work with, with high expectations. Instead of being overwhelmed by this undertaking, I was excited to get going and work through this intelligently and with data-driven decisions.

Role & Duration

Lead Product Designer | Happie


Product Thinking, Information Architecture, Product Management, Interaction, Visual Design, Prototyping & Testing


January 2019 – Present

The Problem

In an effort to make data-driven decisions, I turned to Happie's support tickets. This made it was clear that Happie needed a new and consistent design language in order to make the platform intuitive and delightful for all of its users.

44%

of support tickets Happie received are UI related and primarily due to inconsistent user experience.

20%

of the clients complain that the platform is overloaded with information and looks obsolete.

Solution

1. A Design System
The primary solution was to come up with a design system that was guided by principles and best practices. Also, to keep with documented at each step to ensure consistency and efficiency of work.

2. Personalization
To solve the problem of complexity it was important to eliminate any unnecessary elements. To achieve that the platform was made user specific.

Challenges

1. Time & Resources
This design system was an immediate need for Happie. As the sole designer, it was exciting to have full autonomy over design choices, I knew this would take patience, constant effort, and consistent communication with all parties involved (both internal and external).

2. Client Awareness
Although our clients wanted these changes to be made for  a long long time, it was important to keep them involved and excited about the big changes we were planning. As a start, this project was done for our key partner clients only.

Color

Overview

From Happie's inception, there had been so many people involved with the product from the design side, with so little structure. Like-colors had been used which eventually led to over 50 different colors (that I found) being implemented across the product. Because no system had been put in place, a color hierarchy was non-existent.

When someone was designing a new product feature and needed to use the color red, there were no resources to access to let them know which to use. Thus, a hex code that looked similar to a red already being implemented was used. Users infer (sometimes subconsciously) meaning from colors. When there is no consistency in a product, usability diminishes.

The colors below were given to on my first day at Happie. A comprehensive style guide was a must.

Primary Colors

After understanding where the color system had gone wrong, I needed to determine the primary palette for Happie's software. I took the primary colors that had previously been used and created a complementary palette based off of them using the HSLa model. This allowed a great deal of specificity for the palette being created and would also make changing color values programmatically easier.

Further, Happie is committed to accessibility, so I ensured that the palette aligned with AA standard contrast ratios.

Hover States

To further improve usability, I implemented hover states for buttons, links, and other clickable elements. Visual hover states afford "clickablity." I believe that hover states are very important, as they are a form of progressive enhancement. Users shouldn't have to click something to find out if it's a button. Users on laptops and desktops expect "clickable" things to react on hover, and having a button "light up" is a useful clue.

Color Variations

Complementary palettes are created with colors that sit opposite each other on the wheel in order to offer a sense of balance. Like analogous palettes, adding various tints and shades can expand these schemes. These color variations help avoid a harsh contrast and aid in the creation of illustrations and other marketing materials.

This is a great example of why color placement is important; I made sure to be aware of how our new colors looked next to each other and how they make our users feel. The wide range of this complementary scheme offers makes this palette extremely versatile, interesting, and balanced.

Grayscale

Typography

A Consistent Type Scale

With my only instruction being that we use Open Sans in our product, I put together and implemented a type scale, representative of our desktop web experience. This has ensured that there are specific and consistent font sizes being used that worked in conjunction with each other. This allows content to be displayed as clearly and efficiently as possible.

This type scale is a combination of 12 styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.

Iconography

Challenge

A customer should know what a symbol or icon means without explanation; otherwise the icon is visual clutter and unnecessary. An icon can be used as a visual cue to aid in wayfinding of an experience, to enhance a concept that is important and, to express hierarchy of information. Below are screenshots of icons from Happie's product before I implemented changes.

It's clear that there were significant issues with line weights, color consistency, and style (edges, caps, strokes, fill, etc).

Solution

In an effort to save time and resources, I determined that the use of an icon library would aid in alleviating many issues that Happie was facing. After researching many options, I settled on Font Awesome. This library has allowed us to quickly implement consistent icon styles with ease.

To create visual harmony, the icons are used in two sizes: 14px and 16px.

UI Components

Buttons

Similar to the icons in use, the buttons had many issues as well. These issues included inconsistent line weights, font weights & sizes, border radii, and W:H ratios. Buttons are important and these needed to be remedied.

A few can be seen here:

Despite the fact that buttons are an ordinary element of interaction design, it was worth putting a lot of attention to make these elements the best they could possibly be. Button UX design should always be about recognition and clarity.

Apart from the button designs, I outlined design tenets to ensure button types were being used appropriately for optimal user experience.

Forms

No one wants to fill out a form. Be conversational. Be funny. Gradually engage. Do the unexpected. It is the role of the Happie to express our brand and to elicit an emotional reaction.

If done correctly, completion rates will increase. Just make sure you don’t violate the rules listed below.

Dropdowns

These components are a key piece to this type of product. Users are constantly needing to filter through their candidates, write quick notes, and schedule calls. Previously, these components were all different and required the user to understand the differences between them all. Needless to say, creating a unified system of dropdowns have allowed users to work faster and more effectively.

Other UI Components

These are several more examples of different components built within the same design system which an an immense level of control for users.

Bringing it all together

Asset Library

While creating these components, I built and stored them in a master Figma file, which I referred to throughout the design process. After a week or two of finalizing this library, I began to see huge leaps in productivity by using the library when iterating on designs. Screens for new features could built far faster than before by using this new framework.

The Figma file will be publicly available soon.

Project Learnings

Throughout this process I learned many important lessons. Of them all, two stick out: The Importance of Collaboration & The Essential Nature of Process. The more eyes on a design, the more it’s exposed to varying opinions, experience, and critique — and this can only ultimately improve it. Or at the very least, test it. For a project that is vast, it gives you a roadmap to navigate through what can be a foggy route. This is especially useful when you’re starting out.