Case Study – Inchroma Website Redesign

Client: Inchroma
Project Focus: Improving website UX/UI for a hyper-allergic hair dye product
Role: UX/UI Designer, Visual Designer, Motion Designer, Video Producer & Editor
Tools Used: Illustrator, Photoshop, Midjourney, Fliki, Canva, CapCut, ChatGPT

🧴 About the Brand

Inchroma is a start-up founded by my friend J, offering hyper-allergenic hair dye solutions specially formulated for people with sensitive skin. Their hero product—Gray Hiding Treatment—is designed to be gentle, effective, and easy to use, especially for middle-aged users concerned about irritation and harsh chemicals.

🔍 Discovery & Pain Points

During an in-depth walkthrough session with J, we reviewed the existing website and gathered both business and user insights. The main pain points were:

Unclear Brand Messaging
The homepage banner did not make it obvious that Inchroma was a hair dye brand, leading to user confusion.
Lack of Product Explanation
The site didn’t adequately explain what makes the product hypoallergenic or how it works—missing a key opportunity to educate users.
Hard-to-Follow Instructions
Instructions on the product packaging were only verbal, which many users found confusing or unclear.

Inchroma Website - Before

🎨 Design Solutions

✅ 1. Banner Redesign

Goal: Make it clear at a glance that this is a hair dye product.

Design Thinking:

Featured Inchroma’s top product prominently.
Target audience is middle-aged men, so I used AI (Midjourney) to generate an ideal model.
Background foliage adds a natural, clean aesthetic—psychologically reinforcing the "gentle on skin" message.
Custom “Dermatologically Tested” stamp icon added to emphasize safety and credibility.
Updated feature icons for Hypoallergenic, PPD & Ammonia Free, Odor Free, and Non-Irritant.
Design language was unified to match the product packaging.

👇Final Banner Design:

✅ 2. Explainer Video: “The Science Behind Inchroma”

To clarify what makes Inchroma hypoallergenic, I created a 1-minute animated explainer video from scratch. This helped communicate product benefits in a simple, science-backed way.

What I Did:

Scripted a short, engaging explanation
Create the script and storyboard base on the explanation
Sourcing and editing relevant video assets
Edited clips to visualize the product's hypoallergenic science
Designed clean transitions and making custom animations to simplify complex information
Used AI tools to optimize both pace and accessibility

The final result is a concise, educational video that makes the product's unique value easy to grasp.

👇Final Video:

🎥 Watch the Video in full size here

✅ 3. Easy-to-Follow Instructions

Customers were struggling to understand the usage instructions, especially first-time buyers. I redesigned them into an easy-to-follow step-by-step visual guide:

Transformed text instructions into clean visuals
Added minimal yet clear illustrations
Use plain language for better comprehension

This made the experience more intuitive and drastically reduced cognitive load.

👉 Final Instruction:

Inchroma Website - After

📈 Results & Takeaways

The new banner immediately conveys product category and benefits at a glance
The explainer video improves understanding and user trust
The visual instruction guide improves usability, especially for first-time users

“The new design makes it so clear what Inchroma does. We’ve seen better feedback and more confident purchases since the update.”
— Joey, Founder of Inchroma

👩‍🎨 Final Thoughts

This project blended modern visual design, customer empathy, and storytelling. From AI-enhanced visuals to motion content and UX simplification, each touchpoint was carefully crafted to build clarity and trust.

Page updated

Google Sites

Report abuse