Overall Outcome
Due to the project's complexity, we divided it into 3 phases. However, the final phase was only partially completed the UI before the project was halted due to leadership changes and financial issues. The platform aimed to enhance professional content and boost stylists retention in the hairstyling industry, rather than generate revenue. Despite this, Phase 1’s launch resulted in significant milestones and a notable increase in new user onboarding over the following 6 months.
Research
Before deep diving into the problem solving, my team and I firstly conducted the following testing and research methods: Desktop Research, Interview(35) & Survey (100), Empathy Map and A&B test.
Define
.png)
Information Architecture (IA)
Design Outcome
This project went beyond UIUX design, encompassing content strategy, video production, and the development of marketing materials for over 80 pages. To ensure efficiency, we divided the project into 3 phases: Phase 1 (MVP) focused on the Dyson Academy, Professional Product Shop, and an 'Invite Friends' feature, providing stylists with learning resources and product information; Phase 2 introduced live streaming, event landing pages, and a membership system; and Phase 3 enhanced the platform with daily activities, a rewards marketplace, and expanded member benefits
* Since the scope of work for this project is too huge to showcase everything, I will only be highlighting the notable ones below.
Phase1: Mater Class Teaser
Phase2: Mater Class Tutorial Template
Design the onboarding process
One of the fundamental design principles to create a great onboarding experience is to reduce the number of steps to access and experience the core values of the App. We want to ensure stylist do not need to go through multiple authentications and long verification process to start their learning journey.
One of the fundamental design principles to create a great onboarding experience is to reduce the number of steps to access and experience the core values of the App. We want to ensure stylist do not need to go through multiple authentications and long verification process to start their learning journey.
Mapping out main scenarios for registration and login
To balance customer experience with the business requirement of data collection, we designed a staged approach. Users can skip stylist verification to access the core app features and complete verification later when accessing advanced features, such as booking an upcoming livestream or viewing the exact prices of professional products
Mapping out main scenarios for registration and login
The team tested the prototype flow with internal users and found:
-
Users were confused by the double authorization process (WeChat and phone number), especially when their WeChat-registered number differed from their actual one.
-
After registration, users wanted to track their hairstylist verification progress (1–3 days), despite receiving a WeChat notification upon approval.
To address this, we simplified the flow by removing the initial WeChat authorization and directing users to the hairstylist verification page. We also added a progress screen post-submission, with status updates available on the profile page. Users can later link their WeChat profile photo or upload one directly.
.png)
Wireframe
Design System Library
.png)
.png)
Insights Top-Finding
Reflection
This multi-phase project spanned several months and required ongoing maintenance to align with new product launches and industry trends. As the lead designer, I was responsible for UI/UX, user research, video production art direction, and live stream guidelines. However, due to leadership changes and the broader economic downturn, the project was discontinued 3 months after the 2nd phase has launched, as the company decided not to continue investing in a project with no immediate financial returns. Despite this, the project significantly contributed to improving the brand’s content, offering long-term potential despite immediate sales impact.
Design Framework
We followed this framework to achieve a scalable and sustainable design to create a delightful user experience.
Discovery
-
Kick off and alignment
-
Requirements gathering
-
User research
Describe
-
Co-creation workshop
-
Synthesis
-
Confirm the main features
Create
-
User Flow
-
Key Screen Template
-
Mapping the system components
-
Design system library
-
Prototyping
-
A/B testing
Scale
-
Design Implementation
-
Design & data tracking
Sustain
-
Design Documentation