Kiip Rebrand: Our Look and feel
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.
Who are we designing for?
There are two main user types for Kiip:
- The individual who uploads their documents seeking services
- 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:
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.
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.
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.
How about some gradients too?
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
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.
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).
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.
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.
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?
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.
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.
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.
