How we re-defined OYO’s product colour palette in less than 30 days.
Color holds power. It can impact our moods, emotions, and behaviors. It can also be a source of information. While an individual’s response to color can stem from personal experience, the science of color along with color psychology supports the idea there’s far more to it.
At a basic level, colors influence how consumers view the ‘personality’ of the brand in question, so it’s important you get it right.
OYO’s logo mark; three geometric letters (OYO) inscribed in a circle filled with striking red colour, is instantly recognised and has good retention. It is a bold, energetic and lively color that can symbolize strength, confidence, and power.
Problems with the old colour palette
Accessibility: The old colour palette had major accessibility issues that did not meet the WCAG accessibility guidelines for legibility and optimum contrast against dark or light backgrounds. This caused useless cognitive load that held back users to feed on relevant Information with ease.
Unconventional mental model: There are certain proven mental models around colour which when leveraged could help in providing a frictionless user experience in your product. The earlier design philosophy at OYO did not account for leveraging such colour mental models. We were using red colour for both hyperlinks and error messages causing massive confusion on what to tap and when to tap. Critical error messages used to get masked because of the multi functional usage of red colour.
People treat clicks like currency and there’s something about the colour blue that makes people click or tap on anything written in blue. People have been conditioned with hyperlinks being blue from the day internet was born. It might sound like reinventing the wheel to think of breaking this mental model and asking the users to adapt to yours.
The solution:
First and the easiest thing to achieve was to get the functional part correct i.e. use an existing, conventional mental modal. This not only involved just using the palette but also assigning relevant functions to them in the product.
Red = Negative connotations/failure
Yellow = Caution/intermediary
Green = Positive connotations / Success
Blue = only hyperlinks
Purple = Unassigned (kept for product specific functions)
Second part involved tweaking the colour palette in a way so it adheres to a well defined colour harmony.
Last, getting the accessibility correct. We tweaked the brightness/luminosity of the colours to meet WCAG accessibility guidelines
The result
The implementation of this new colour palette brought in positive results. Users found the new design functional and devoid of cognitive load that existed before.
