The Challenge

Chi-Chi have such a vast range of colours per product that is was a necessity to consider implementing a colour picking system. We formed an understanding of how each product type varied in style and colour in order to simulate multiple ways to chose and select colours.

We mapped out the best ways in which to showcase colours per product to make the user’s buying decision as informed and easy as possible in a complimentary modern site-environment. Due to the varying colour picking options we needed to account for the smaller screens on mobile devices.

Our goal was to replicate an in-store experience, online. Meaning images highlighting textures and colour notes were essential to the mix.  

Our Approach

Foundation, Eyeshadow and Lipstick each needed colour pickers, therefore we designed 3 different one per different product type. A product such as foundation had a simple designed colour picking function, we enabled an uploaded image to display texture and within the product itself inserted a swatch format alongside the product image that dynamically changed the product image as per the colour selected.

For products with a vast array of colours such as lipsticks, a more advanced colour picking function was needed. With a built in colour grouping filter, customers are able to chose a certain range to peruse at one time. Which in turn reduced the colours shown and limiting an overwhelming buying decision experience for the customer. For products that had multiple colours in a single product such as pallets, we implemented a HEX colour picker for each shade in the back-end of the store site, which comes together on the front end of the site in a dynamic visual representation of the palettes.

Further to optimising the users experience, with each click per colour the product description would dynamically populate to describe the shade and best uses. To make it easy for the customer to select the colour, we gave customers the ability to select colours in two ways; from dropdown or swatch box. We approached mobile first to execute a modern and user friendly design that efficiently fit all options on a small device and seamlessly guided the user journey flow which was all transferable to desktop, offering the best UX on all screens.

The Outcome

In comparison to the colour picking technology online, Chi-Chi has one of the best colour pickers in the industry. We created a better UI and UX that is easy to use and understand, assisting with creating a smooth and seamless colour picking experience for the customer to optimise time spent on the store. The colour picking functionality is able to be applied across a wide variety of product types whilst enabling the merchant to easily manage the store from the backend. The results see excellent UI/UX on all devices.