Designing beyond preconceived notions

Over the last couple of years, I’ve been in a constant state of designing and problem solving. I try and be open-minded enough to notice when things or situations need an intervention, including everything from my personal life to the products I design.

I was recently doing some design research for a new Dynamo client, PeraHealth, who’s primary brand colour is yellow. Based on past experience, this is not a web or screen-friendly colour, both from a legibility and accessibility standpoint. As such, I try to avoid it — but in this particular situation, I had to put my preconceived notions aside and find a way to make it work.

As a corporate health company, PeraHealth wanted to find an elegant middle ground between something overly trendy or conservative. After spending some time putting together a mood board and refining a visual direction, I picked some websites that employed the colour yellow in interesting, effective ways. Here’s a shortlist of what I presented:

Accent lines:

https://www.ideo.com/

Tone-on-tone background and illustrations:

https://www.wellcoin.com/

Additional accents:

http://www.ginventory.co/

Gradient backgrounds:

https://www.prototypo.io/index.html

Display text and semi-transparent overlays:

http://www.deadwater.fr/

Gradient-mapped background images:

http://www.degordian.com/work/case/lufthansa-dreamscapes/

Accented iconography:

https://www.wellcoin.com/

After presenting these references, the PeraHealth team gave me quick reactions of what they liked (and what they didn’t). For the next couple weeks, I designed and iterated on what web conventions worked best in the context of their brand.

My next challenge was finding a balance between the quantity of dosage, and the frequency of use. In teaming up with my Art Director, Allegra Poschmann, we worked on iterations using yellow as an occasional highlight, keeping it’s usage consistent throughout the entire website. Here are some of the ways that we incorporated their brand colour:

PeraHealth had a previously designed ad that needed to be featured in a hero section on the homepage. It features a rather large focus on a brand image, their tagline and of course their yellow.

The site also features icons with yellow highlights and CTA buttons for primary callouts:

Yellow accent lines between page and section titles, and on featured data:

And as a card highlight on hover:

The clients were (and still are!) happy with the final result, and I was proud to have put aside my preconceived notions about working with yellow on-screen. In doing so, I managed to take a step back and see the problem from a different perspective. To my surprise, I was able to find multiple solutions, try them out, and discover what worked the best for the client and project. Check out the final result live on perahealth.com.

A broader perspective

So how can we pull inspiration from this particular situation and apply it to life more broadly? More often than not, we see things through the cloudy lens of our personal history, industry convention, or our feelings. What if we could leave aside our assumptions, change our perspective and see things as they actually are? Too often we let our thinking and our beliefs about what we “know” prevent us from seeing all the possibilities.

So try to be curious, open-minded and don’t be afraid of changing your perspective!


I would love to hear from you! What kind of preconceived notions have you bypassed in your work? How about in everyday life?