UI/UX Design
As the company's online and offline business continued to grow, building a closer connection with customers became increasingly important. To address this, the company aimed to create a Mini Program with a consistent visual brand identity and a clear, intuitive business interaction flow.
The first step in my design process was to research existing fashion and cosmetics Mini Programs in the market. This helped me identify key strengths, weaknesses, and opportunities that could inform the design direction for OTL's Mini Program.
After completing the competitor analysis, I recruited and interviewed several users from social media who were interested in the OnTheList brand. The goal was to better understand their needs, motivations, and shopping behaviors.
Based on the research findings, I created user personas to build a clearer and more realistic understanding of users' goals, pain points, and expectations.
I mapped out the key user flows to define how users would navigate through the Mini Program, from discovering products and events to accessing relevant online and offline information.
Using the user personas and user flows as guidance, I sketched wireframes with the Crazy 8's method. After several rounds of exploration, I selected the concepts that best addressed the MVP goals and converted them into interactive prototypes in Adobe XD.
The prototype was developed to test the core user journey, validate the overall structure, and refine key interactions before moving into high-fidelity design.
The final high-fidelity design focused on creating a polished visual experience with clear content hierarchy, consistent brand expression, and intuitive navigation.
Designed intuitive product discovery flows that help users find relevant products and access detailed information efficiently.
Created engaging online event experiences that connect users with exclusive deals and promotions through the Mini Program.
Designed seamless offline event integration, allowing users to discover and participate in physical store events through the Mini Program.
A comprehensive design system was established to ensure visual consistency across all screens and components of the Mini Program.
