CLICS Digital Hair Color Studio APP
Timeline
3-day design sprint for ArtCenter sponsor
6 weeks for final delivery
Role
Product Designer
Skills
UI / UX Design
Product Design
Branding
Team
Worked with a graphic designer, a product designer,
and CLICS engineers
Overview
CLICS provides a digital system for hair salons but faced challenges in adoption. My goal was to redesign the app to help build trust, improve usability, and support salon realize business growth.
When I joined this project, I identified a clear misalignment between what key users needed in practice and what the CLICS system supported.
Clients need a convenient way to view color options and clear reasons to build confidence.
Stylists need simple, intuitive, and persuasive tools to use in front of clients.
Salons need a system that could build trust, showcase services, and drive business growth.
Strategies
Fixing Current Problems:
Creating clarity and efficiency for stylists, while making operations more manageable
Possible business opportunities:
Developing features that not only support stylists’ workflow but also strengthen salons’ ability to build trust, communicate persuasively, and highlight their services.
Fixing Current Problems
Problem:
The platform has a steep learning curve with no homepage or clear entry point to guide stylists into their primary tasks, leaving new users confused and discouraging salon adoption. In addition, the app directly opens to the client list, exposing sensitive client data on the first screen.
Solution:
I introduced a card-style homepage that clearly organizes major modules and covers the stylist’s workflow within the CLICS system. The home view centralizes service management, client tracking, and growth metrics—directly meeting stylist demands. A built-in gallery further enhances persuasiveness and trust with customers, showcasing work while also promoting CLICS salon services.
Problem:
Stylists usually follow a natural sequence: Create/Check Client Profile → Consult → Design. However, the current multi-layer navigation bar, together with the abundance of functions and system settings, distracts their attention. The switch disrupts the service flow and reduces efficiency.
Solution:
I streamlined and consolidated the navigation functions to reduce complexity. Arrange the four main bottom functions according to the stylist’s usage sequence.
Client information, applications (including history and new ones), and consultation notes are all grouped into a single document page for clarity and efficiency.
Problem:
For clients, this page should provide a clear and focused color swatch display; for stylists, it should enable quick, seamless selection during consultation—yet the cluttered layout, redundant navigation, and scattered functions distract both groups from their goals.
Solution:
Simplify the interface by removing unnecessary filter icons and keeping only two primary actions — Dispense Color Swatch and Compare. This maximizes space for swatches and keeps users focused on browsing colors.
Improve clarity and efficiency by leaving only two main functions — Apply and Customize —placed side by side at the bottom for higher visibility.
Business Opportunities
Oppoturnities:
Customers are often skeptical of new technology in hair dyeing, since a failed attempt is costly in both money and time. Stylists struggle to reassure clients, because showing proof of past results usually relies on fragmented methods like personal photo albums, word-of-mouth, or ad-hoc explanations—which are inconsistent and inefficient.
Solution:
I added a Gallery feature .
When recording client photos, stylists can decide whether to keep them private (profile only) or share them publicly in the public gallery for viewing.
Each post in gallery carries actionable details (formula, stylist, description), making examples not just visual but replicable for others. Quick-action buttons transform hair examples to operation, allowing stylists to be ready.
Oppoturnities:
Stylists sometimes risk overlapping or missing appointments when relying on external tools or manual notes, making time management inefficient.
Solution:
Introduce a built-in calendar with a clear daily timeline and the appointment function (customer, barber, date, time) to keep bookings organized and error-free.
Oppoturnities:
A stylist’s work goes beyond providing services, it also involves building trust, managing client relationships, and fostering personal growth.
Previous software solutions addressed only isolated tasks, focusing mainly on the coloring process while neglecting other vital aspects of a stylist’s work. This not only constrained stylists’ professional development but also limited salons’ ability to build the long-term customer stickiness.
Solution:
I designed a personal dashboard with a card-based layout, centralizing clients, portfolio, efficiency, and growth metrics in one place. This enables stylists to:
Quickly track clients
Showcase and search their works through a portfolio
Visualize time utilization, retention, and other metrics in order to drive the stylists' self-improvement
Oppoturnities:
Stylists rely on external clocks to track dyeing time, forcing them to switch between the salon app and the system clock. With multiple clients, it’s hard to match timers to the right customer.
Solution:
I designed a built-in timer in the app,
with preset time options and the ability to assign each timer to a client which ensures one-to-one matching, simplifies workflow, and reduces mistakes.
Design System
Component Library
