PixieDye
Project Overview
PixieDye is a lightweight, web-based demo application designed at CTRUH to showcase our proprietary 3D/AR technology to potential brand partners. The tool enabled users to upload or capture a live photo and instantly preview different hair colors and styles.
UI/UX research
Branding & Identity
Design System
Web App Design
Role
Design Lead
Timeline
3 Days
Tools
Core features
Photo Upload & Live Capture → Users could either upload an image or use their device camera to see real-time hair transformations.
Instant Hair Color Preview → Applied different shades instantly to demonstrate the realism of CTRUH’s 3D/AR rendering technology.
Style Variation → Option to try different hairstyles in addition to colors, showing the versatility of the tech.
01.
Problem & Context
At CTRUH, selling advanced 3D/AR technology to brands came with a unique challenge — the value of the technology was difficult to convey through slides or static visuals alone. Beauty and haircare companies wanted to see how AR could actually look and feel for their customers, but creating one-off prototypes for every pitch was inefficient and time-consuming.
To solve this, we built PixieDye: a lightweight, reusable demo application. Rather than existing as a consumer-facing product, it was specifically created for brand presentations and B2B conversations. This allowed our sales team to:
Demonstrate CTRUH’s technical credibility in a real, interactive way.
Show potential partners exactly how hair try-ons could work for their customers.
Accelerate conversations without the overhead of custom development for each client.
Research & Inspiration
To ground the design, I explored existing approaches to virtual hair try-ons and broader AR try-on experiences. The research showed two extremes: playful but unrealistic filters on one side, and heavy enterprise solutions on the other. Both had limitations — either lacking credibility for professional use or being too complex for quick demos.
This inspired a direction for PixieDye: create a lightweight, polished, and instantly accessible demo that struck the right balance between realism and simplicity, tailored specifically for brand presentations.
Results from different AI Skin Tests
02.
Design Process
Flow Definition
Mapped a simple path:
Upload / Live Capture → Select Hair Color or Style → Preview Results.
The goal was to minimize clicks and keep the focus on the live preview
Wireframes
Created low-fidelity layouts to explore how controls and preview space could be balanced on mobile screens.
Final Design
Delivered a clean, mobile-first UI with minimal distractions, allowing the AR rendering to take center stage.