Interactive colour matching tool

Project type

Tool UI - User flow

Client

Pink Gellac

Role

Solo UX/UI Designer

Timeframe

2 months

The colour match tool was already existing functionality. My role was to design a coherent, usable interface around it defining the full user flow from start to finish.

Colour matching is a common challenge in beauty e-commerce. Customers often discover nail shades through social media or real-life references, but struggle to find accurate equivalents within a catalogue of 300+ products. The tool addressed this by allowing users to upload an image and select colours using a draggable picker, returning the closest matches from the Pink Gellac range. The underlying matching logic and core interactions were already defined before I joined the project. My role focused on designing a clear, trustworthy, and commercially effective experience within existing technical constraints.

Colour matching is inherently imprecise. Lighting conditions, screen calibration, and subjective perception all affect results. The main challenge was therefore not technical accuracy, but user confidence, designing an experience that felt reliable enough for purchase decisions without overpromising precision.

Initial explorations tested broader directions such as generating colour palettes or suggesting complementary shades alongside matches. While visually engaging, these approaches introduced unnecessary complexity and moved away from the core user need: quickly identifying purchasable products. The direction was narrowed back to a focused matching experience that prioritised clarity, speed, and commercial intent.

01 / Integrating into existing intent

Instead of creating a standalone destination, the tool was embedded into the search experience as a modal. Competitor analysis and platform behaviour showed that users already relied heavily on the homepage search bar, making it the most natural entry point for intent-driven discovery.

01 / Integrating into existing intent

Instead of creating a standalone destination, the tool was embedded into the search experience as a modal. Competitor analysis and platform behaviour showed that users already relied heavily on the homepage search bar, making it the most natural entry point for intent-driven discovery.

01 / Integrating into existing intent

Instead of creating a standalone destination, the tool was embedded into the search experience as a modal. Competitor analysis and platform behaviour showed that users already relied heavily on the homepage search bar, making it the most natural entry point for intent-driven discovery.

02 / Setting clear expectations

Because the interaction mimics a “scanner” for colour, users could easily assume it generates exact matches. To prevent misunderstanding, results were framed as closest matches and supported with contextual copy, especially in edge cases where no strong match existed. This was critical for maintaining trust and avoiding unrealistic expectations.

02 / Setting clear expectations

Because the interaction mimics a “scanner” for colour, users could easily assume it generates exact matches. To prevent misunderstanding, results were framed as closest matches and supported with contextual copy, especially in edge cases where no strong match existed. This was critical for maintaining trust and avoiding unrealistic expectations.

02 / Setting clear expectations

Because the interaction mimics a “scanner” for colour, users could easily assume it generates exact matches. To prevent misunderstanding, results were framed as closest matches and supported with contextual copy, especially in edge cases where no strong match existed. This was critical for maintaining trust and avoiding unrealistic expectations.

03 / Framed by the funnel

The experience was designed to keep users within a continuous discovery-to-purchase flow. The uploaded image remained visually present throughout, while product previews communicated texture and real-world appearance. Add-to-cart and wishlist actions were integrated directly into the modal to reduce friction at the point of decision.

03 / Framed by the funnel

The experience was designed to keep users within a continuous discovery-to-purchase flow. The uploaded image remained visually present throughout, while product previews communicated texture and real-world appearance. Add-to-cart and wishlist actions were integrated directly into the modal to reduce friction at the point of decision.

03 / Framed by the funnel

The experience was designed to keep users within a continuous discovery-to-purchase flow. The uploaded image remained visually present throughout, while product previews communicated texture and real-world appearance. Add-to-cart and wishlist actions were integrated directly into the modal to reduce friction at the point of decision.

"If my grandma had wheels"

This project was shaped heavily by constraint. With an existing matching system and limited backend flexibility, the focus shifted from building functionality to clarifying it. While the tool launched successfully and was well received internally for its usability and clarity, it has since seen limited visibility within the wider product ecosystem—highlighting how even well-designed features depend on distribution and integration to realise their full impact.