About project

For this health application project brief, I had to follow brand guidelines- to use the color orange.

I’m going to start off by saying orange is a color I don’t have much experience working with.

It’s a great color that expresses warmth and positivity and reminds me of the sun. But, it’s also a color that can feel too overwhelming if used too much.

The image above was my final mockup, displaying my vision for the brand. It took LOTS of trial and error to get to this point.

To give you a better idea, below is the mood board I created to give me some visual inspiration.

Moodboard used for inspiration

Brand Conception

During the brand conception phase, I wanted to tell a story that could really resonate with normal people that face a common problem: finding the time to exercise and being motivated to do it.

I created some wireframes incorporating these colors.

early iteration wireframes using moodboard color palette

…But that “happiness” element that I was looking for was not being communicated through this initial color palette. These colors just seemed to reflect a generic corporate image.

I realized that perhaps a hint of brightness would capture what I was aiming for. As gradients are quite trendy in design right now, I experimented with gradients and this was helpful! I was definitely getting closer to what I had envisioned.

Gradient usage is a great way to express a brand

Joyfit brand using gradient and image, and revised logo typeface

The gradient adds a “fun” appeal and the orange is used in a way that is bright and not overwhelming. I was happy with how the brand was looking.

The Uh-oh Moment

I was so happy with how the color scheme turned out after so many attempts. This was exactly the brand I was looking for.

I showed my mentor the mockup image and to my dismay, the color accessibility for these colors FAILED. BADLY.

Example of color accessibility fail

I realized that accessibility was not failing on all my screens but pivotal screens that successfully helped the “Joyfit” brand shine.

After my initial slump of disappointment, I researched what color accessibility really meant to those affected by it. I came across this helpful article by Cathy O’Connor. She worked as a design consultant on PayPal’s accessibility team.

The stats about disability conditions she presented in her article helped me realize just how important it is to follow color accessibility guidelines. We have to think about our users after all.

“Let’s estimate that 10% of the world population would benefit from designs that are easier to see. Multiply that by the number of customers or potential customers who use your website or application…Out of 2 million online customers, 200,000 would benefit.”

I was curious to see how my designs actually looked from the standpoint of users who have a vision condition. I was shocked to see how different an interface could look depending on who is looking.

L to R : common eyesight, protanopia, deuteranopia (most common), tritanopia

Color Accessibility Iteration

After seeing this image, I immediately started work on iterating my project and making sure the colors were accessible.

Here are some before and after screens that illustrate how color transformed the original visual brand.

Before & After

Color accessibility guidelines not followed

Color accessibility guidelines followed

color accessibility guidelines not followed

color accessibility guidelines followed

color accessibility guidelines followed.

Woohoo!

This is what you always want to see. Before going with your selected color scheme, make sure accessibility is accounted for and you are set.

Wrap up

What do you do to help brainstorm color and visual brand guidelines as a designer? Do you find it a challenge to pick a color palette that is in line with the ‘brand’?

This iteration process was very helpful for me and I hope this experience gleans some insights on how to balance brand and user experience in terms of color accessibility.