The original palette was limited to shades of orange and magenta. The lack of contrast meant that the logo appeared muddled at smaller resolutions. But more importantly, this limited palette didn’t give us a lot of choices when it came to representing data with color. And using color to communicate information was essential to make such a data-heavy service look visually appealing and maintain user interest.
One of my first assignments was to create business cards. I didn’t just want to drop the logo onto a white background, add the contact info, and call it a day.
The original logo was a circle that masked a collection of overlapping area charts. The idea was: if we get a large group of people with a specific genetic illness to track their symptoms, we can observe correlations in the data that can point to novel treatments. This logo represented such a correlation. I ran with this idea and wanted to see what this group of overlapping graphs might look like if we zoomed out to see the whole screen. The result was beautiful and dynamic, so I played around with saturation and outlines until I found a graphic we could use on the business cards.
This is what I settled on for the early business cards—The overlapping graphs are present but with diminished opacity in the background, and reveal what the circular logo actually represents.
When I happened upon the design for the Landing Page—that of the tinted faces overlapping (see above)—I chose those four tints to be our new color palette. The added cool tones of green and blue gave the palette much more flexibility for the app design tasks that would follow. Now I needed to re-do the logo, so I re-arranged the colors in the 24 arrangements possible with 4 colors so I could see which overlaps would come closest to an attractive arrangement for the logo.
Once I figured out an overlap order I liked, I took that one and swapped out all the color positions to find the best ones. I’m nothing if not thorough!
Key to the color order was the what the resulting circular logo would look like. Here’s the same 24 background graphics with the circle masked in the center.
After a series of eliminations, I came to an arrangement that had potential. The tones were a little muddy, so I played with the shades, saturation, and brightness to liven it up. As a finishing touch, I added thin white outlines to make the vibrant colors pop even more.
The final result: a more dynamic logo with clearly articulated colors overlapping. The rainbow-like variety that resulted from these colors overlapping does a solid job of communicating the infinite variety of genetic combinations that this company seeks to make sense out of.