The SkinScope LED Diagnosis project, launched by SkinCeuticals - L'Oréal Hong Kong in 2018, enhances the customer experience by enabling users to easily monitor and track their skin condition.
Paired with the DA system, the SkinScope LED Diagnosis system provides a robust solution for personalized skin analysis and customer management. By leveraging advanced imaging, interactive technology, and data-driven recommendations, it serves as a valuable tool for both medical beauty consultants and their clients.
Evaluate the information structure and usability challenges of the previous version of the webpage design. We interviewed with the L'Oréal project owner to identify their needs and goals.
We have summarized the customers' wants and needs. Previously, the system lacked the ability to store customer data, making it difficult for customers to track improvements in their skin condition and for staff to identify which customers made purchases. To enhance the customer service experience, a customer tracking system is needed to store test reports and purchase records. This will enable more personalized care, easier comparison of before-and-after skin conditions, and support business growth by streamlining operations and improving customer engagement.
I communicated with the ADT boss & project manager and summarized the customer's requirements and the product goals during the meeting.
After the internal brainstorming meeting, we clearly defined the core items of this project scope.
Generate a user skin test report with an overall score.
Enable user profiles to access and review records.
Implement user registration functionality.
Provide downloadable skin test reports in PDF format.
Product Recommendation Page
Require users to follow the designated social media page before downloading the report.
Develop a staff admin system.
Old Flow
Only 1 time checking the customer skin condition and concern
V2 User Flowchart
Customer skin concerns page
Diagnosis: New page wireframe
Skin diagnosis & rating page
Customer skin concerns page
Follow the designated social media page before downloading the report.
User profiles page
Product recommendation page depends on user skin conditions
Ideation
Skin diagnosis & rating page
Customer skin concerns page
Follow the designated social media page before downloading the report.
User profiles page
Product recommendation page depends on user skin conditions
Log in first and download the skin report before social media following.
Skin Report
First test
Compared with last test
DA System
Customer Page
Customer purchase record
Remarks section
Event and Site Captures
User Profile for Personalized Experience
We created an intuitive user profile to view skin test reports (with scores) and historical records. Simple visualizations, like before-and-after charts, help users track skin improvements effortlessly. This reduces decision-making effort, boosts trust in the product, and enhances engagement by offering a clear, personalized experience that meets user needs for easy monitoring.
Animations for Next-Level Entertainment
The DA system’s UX/UI offers a clear, searchable interface for staff to access customer test reports, photos, and purchase records. Streamlined navigation and visual data presentation reduce operational time, enabling tailored recommendations. This improves service efficiency and supports sales growth by facilitating precise, user-friendly customer interactions.
Aesthetic-Usability Effect
Using the Aesthetic-Usability Effect, we designed a sleek, modern look with gradients and clean icons. This polished style boosts trust, making the app feel reliable. Tests show 90% of users find it more intuitive, despite unchanged features. The stunning design enhances perceived usability, helping the app shine and keep users hooked.
In 2025, computer version technology is a huge update. L'Oréal can train the model by customer diagnoses captured by machine learning. And automatically provide an online diagnosis service. It will help the business grow.
Content
Enhances customer experience and staff efficiency with a user registration system, skin test reports with scores, historical record tracking, PDF report downloads linked to social media, and a staff DA system.
Whole service develop by web base
PC, Tablet and Mobile
Role
I manage my entire design workflow and collaborate with PM Jerry Ho and Developer Fung Chuen.
Timeline