Kiip Rebrand: Our Look and feel

Kelly Helfrich-Perretti
Keep up with Kiip
Published in
6 min readSep 8, 2022

Our first post detailed the Kiip rebrand. We showcased the journey we took to design the right value driven logo. This post explores how we were able to find our visual spirit, practice empathy for all Kiip users, evaluate the competitive landscape, and approach the product and marketing style guides in tandem.

The Kiip logo in black on white and white on black combinations. There are several iterations with the icon and company name together or just the icon.

Who are we designing for?

There are two main user types for Kiip:

  1. The individual who uploads their documents seeking services
  2. The organization employee that collects the documents from the individual helping to fulfill services.

Two user types, sounds simple? Nope! Individuals on Kiip span a broad set of needs and abilities.

Individuals seeking services may be in times of crisis, Veterans, neurodivergent, physically disabled, or without consistent internet access…the list goes on.

Organization members tend to be overworked and busy with large caseloads and need a tool to simplify their jobs.

These characteristics are most important to us because we believe that Kiip is:

A list of words that reads: calm, professional, trustworthy, and simple

So…what color is Kiip?

The characteristics above are wonderful to help illuminate the brand as a whole, but what colors match the “vibe” of calm, professional, trustworthy, and simple? We needed to play with a bit of color theory. Blues and greens were the tones we wanted to explore because both can convey all of our desired characteristics, but found that each has their own set of challenges. We started this process with our marketing materials in mind, but you’ll see further in this post, that only got us so far.

Kiip logos where half are in lime green and the other half are in blue.

Blue…everywhere.

The gov-tech and document space is dominated by blue. It feels a bit too cold and too much like a government product with a bit of an authoritarian touch — not the area we want to be in. Additionally We don’t think we’d stand out with another blue logo.

Several examples of company logos that are blue. The logos are as follows: tresorit, moxtra, huddle, box, dropbox, dropbox docsend, LA wallet, rubex, zendesk, trello, dropbox, and air

It’s not easy being green…

There wasn’t an abundance of bold green logos within the gov-tech space, so we wanted to explore how we could stand out by going that avenue. Too bright of a green and it wouldn’t come off trustworthy or legible, too “leafy” of a green and at a glance Kiip could come off as a grocery or environmental product.

The first shades of green we wanted to try were bright and cheerful.

Three shades of green starting from lightest to darkest.

How about some gradients too?

The kiip logo in different combination of green to blue gradient colors. The variations are placed against both a white background and black background to compare its contrast and visibility.

During these explorations, we came to realize that applying these colors to elements of the product would be crucial — Would any of these shades of green translate into calm, trustworthy, professional, and simple interfaces?

Product first

A mockup design of the website with the kiip logo in bright green and dark blue buttons.
A mockup design of the website with the kiip logo in bright green with same bright shade for buttons.

Yikes — The bright trendy greens and gradients didn’t translate well into interactive elements. Our approach needed to change. Instead of thinking about the logo and marketing materials in a vacuum, we shifted focus to the product and design system. An accessible product was a must and the colors we were exploring didn’t meet that criteria.

Accessibility for us wasn’t only about low vision individuals, but to consider individuals with different types of neurodiversity — ADHD, Autism, Dyslexia — when choosing colors and typefaces. Ensuring a calm and tranquil environment is an important factor when designing for neurodivergent individuals. The bright greens we were trying out were not coming off as calming, but as low contrast, neon, and overly energetic.

Variety of outlined and solid buttons with different shades of blues and greens.

We tried different shades of green by applying them to button styles and passing the buttons through contrast checker tools helping us determine if they passed Web Content Accessibility Guidelines (WCAG).

On left half is a green button with white text. It shows that it fails wcag color contrast guidelines. On the right half, it shows the same green button but with black text. It passes the wcag contrast color guidelines. There’s a thinking emoji in between them.

As we narrowed down the shades of green we encountered some issues with computed contrast ratios and had to make some human judgment calls (there’s a great explanation on contrast nuance from the UX Movement). The contrast checkers didn’t take the brightness of white text on a green background or font weight into consideration. To create additional contrast we needed a typeface that could carry some weight. This would allow us to meet accessibility compliance. Additionally, it needed to support headers in our product.

Sofia Pro font headings in descending heading order on the left. Lorem Ipsum example paragraph text on the right.

We chose Sofia Pro which is a very friendly sans serif that offers a wide range of weights — key to high contrast. Lato was chosen for all other supporting type due to its ability to scale down small and for each letter to stay distinct, which is optimal for individuals with dyslexia, small screens, and screens with low resolutions. These fonts blended together to create a very accessible type system that worked for contrast and also were easy for all individuals to read.

Decisions, Decisions

After playing with contrast, weight and scale, we landed on the shade of green that we believed was calm, professional, trustworthy and simple.

The finalized Kiip brand colors. Emphasis on the calm green chosen with secondary colors being black, muted mustard yellow, soft red, and dark blue.

To round out our color palette we had to also think about the supporting colors within the palette. What shade of red is the right shade that doesn’t cause anxiety during destructive actions? What shade of green for indicating success stands out from the main Kiip green?

The product colors in all the available decided shades. The left half depicts the primary product colors: green, black, and blue. The right half depicts the support product colors: red, yellow, and bright green.
The brand colors being used on some Kiip design system components: inputs, dialogs, and toasts.

Kiip, the brand

As we finalized product requirements and defined our first iteration of the design system, applying the colors and type to marketing materials felt like a cake walk. The new color palette could be applied to print and marketing materials and made our brand really feel distinct within our product’s space.

Collage of example Kiip Marketing materials. There is kiip logo on a black shirt. A family with branded header text. And a business card with the kiip logo.

We focused our design efforts to make sure disadvantaged populations will have an equally great experience as everyone else. There’s a phenomenon called the curb cut effect. This means that when you design for the minority it has benefits for everyone.

A diagram depiction of the curb effect concept. “When we design for disabilities, …we make things better for everyone”
Source https://sketchplanations.com/the-curb-cut-effect

Our experience has thrived with this phenomenon as we have a beautiful brand that is better for everyone. We have a unique palette, great type and a cool identity that was only possible because of this mode of thinking.

Next Up: Quymbee will take a deep dive into developing accessible products.

--

--