How Colour Impacts Product Design

When it comes to product design, colour can make a big impact on the choices we make as customers as well as how we perceive something. This is no different from when we buy products in a shop or use web services. When designing website interfaces, colour can be used to guide and instruct customers. Attaching specific colours to functions improves the user’s experience for products and services.

Colours in Product Design Patterns

When implemented systematically, colours create a design pattern. This means that a certain action is always attached to a specific colour in a certain scenario. This then helps users navigate through systems and indicate the actions that need to be taken.

Contrasting Colours

In product design, contrasting colours are often implemented to segment screens into different sections. They also break up the page, and can make the website easier to understand as well as draw customer’s attention to a particular focal point.

By pairing both light and dark colours it segments the screen without making the customer feel overwhelmed. ContactNow’s phone makes use of this principle when an agent is connected to a call.

Call to Action

To guide the customer through a web service or platform it helps to have clear call to actions. The colour for a call to action should be chosen to encourage specific behavior. ContactNow has it’s own brand blue which we use for our primary call to actions to navigate customers through the interface.

Colour as a Mental Model

When designing complex interfaces like ContactNow, it is important to use mental models to help the customer. Mental models are reliant on a person’s thought process for how something works, they help shape actions and behaviours which then plays an influence as to what users pay attention to.

When applying the mental model on ContactNow’s phone, colour is incredibly important. The call to actions are conventionally green (for dial) and red (for hang up) to create a sense of familiarity. This makes the system more efficient as it reduces cognitive load on the customer and lets them get on with their calls.

Another mental model that has become second nature for users is to identify the RAG (red/amber/green) colour system. This is implemented for message handling and is especially helpful in fast paced industries such as telecommunication. To reinforce the message it works with common colour associations to effectively communicate the message.

Reinforcing your brand

Colour plays an important role in product design, brand awareness and reinforcing brands; a great way of doing this is by incorporating a neutral colour pallette with a primary brand colour as an accent colour. The brand colour can be used to highlight where the customer is as well as being used for call to actions.


When working with complex systems clarity is key, make the interface simple by using a neutral colour palette paired with brighter colours as accents. This will help build the visual hierarchy of the page and establish the branding. Associating an action to a colour will help guide the customer, and by using existing mental models you can make the product design intuitive.

Colours are part of a larger design system to help users. When implementing the systemic use of colours it can help improve and navigate the user’s experience of your platform or web service. On top of that it expresses the brand values and helps to build a positive perception.

About the author

Marwa Khalil

Marwa is UX and UI Designer at 8x8 with a degree in Product Design from Central Saint Martins. She works as part of the design team developing the experience and design for the ContactNow platform. Marwa likes to drink copious amounts of coffee and share the goodies she has baked with work colleagues.

Try ContactNow for free

Get set up in minutes