ECommerce

Our Design Approach

The Principles

Within the 12 months, we crafted designs that truly resonate with our users. To ensure the product’s viability, desirability, and feasibility, we conducted a range of activities, including:
• 30+ interviews with real Gen Z users to gather authentic insights.
• Weekly user testing and design reviews to refine new feature designs and align on vision.
• Bi-sprint internal workshops to integrate insights into future sprint planning.

These efforts helped us develop initial personas and establish key design principles to serve as our guiding north star throughout the design journey for the next 12 months.

Initial user interviews with real Gen-Zs

Three key personas derived from the research

Key principles summarized based on interview insights

Principle 1: Cheerful and playful

A visual system for everyone

I developed the visual system by first identifying the core values the brand wanted to communicate—energy, authenticity, and self-expression. Through research and iteration, I explored design elements that could bring these values to life in a scalable way. I introduced a set of reusable UI components, stickers, patterns, and animations that aligned with the brand’s playful identity while ensuring consistency across different touchpoints.

This system not only made it easier for the team to create marketing assets and in-app visuals quickly but also reinforced a cohesive brand experience. By establishing a structured yet flexible design approach, the visual system helped maintain brand recognition, enhance user engagement, and create a more delightful, immersive experience for users.

Visual patterns I created as the foundation of this visual system

Examples of brand elements

Responsive image containers

Reusable visual elements I made for the brand

Visual elements I created for marketing purpose

Playful moments throughout the experience

Principle 2: Authenticity and transparency

Real-time cart updates

For Gen Z users, a seamless and efficient digital experience is key—they expect clear visibility into any changes made to their cart while minimizing unnecessary steps. After evaluating multiple options, we selected the following design as the best fit.

How did we handle the 'Out of Stock' situation

Genuine brand storytelling

Gen Z values authenticity in brands and personal relationships and dislikes exaggerated or insincere marketing. They prefer genuine user-generated and personalized content over overly polished advertisements. “If the brand is making the world better, I would like to buy from them... ” one of the interviewees mentioned.

Brand story videos we made for each partner on the platform

Principle 3: Diversity and Inclusivity

Representation That Feels Real

We designed for diversity and inclusivity by ensuring users could see themselves reflected in the experience. Instead of relying on generic or overly polished content, we prioritized videos created by real hosts—people of similar age, background, and style—so users could connect with authentic voices they resonate with.

To further enhance representation, we introduced a scrollable video queue featuring models of different body types showcasing the same outfit, helping users visualize how products would look on them. By embedding inclusivity into both content and interaction design, we created a space where everyone feels seen, valued, and empowered to engage with confidence.

Build trust with authentic hosts from diverse background

Product showcased in different body types

Product Launch

Handoff and QA

Beyond design, I took ownership of design QA to ensure the live app matched Figma designs seamlessly. This included conducting thorough checks, identifying discrepancies, and writing detailed QA tickets to guide developers in resolving issues efficiently. This process guaranteed a polished, high-quality user experience.

Example of handoff file I gave to PO and engineers

I wrote QA tickets for devs to work on design bugs

Legal Review

Before launch, I worked with the client’s legal team to review the design and copy, ensuring compliance and minimizing legal risks.

This collaboration led to unexpected yet crucial tweaks, such as replacing a sad-face emoji with a neutral one to avoid a "leading" tone. Additionally, we adjusted button designs, making them equally prominent instead of visually prioritizing one, aligning with legal guidelines.

Layouts tested with users and the winning layout

The launch party 🎉

In April 2023, we celebrated the app’s launch with a party at the client’s office, marking a major milestone. The app achieved over 1,000 downloads within the first two weeks, a testament to its impact. This was one of the most intense yet rewarding projects I’ve ever worked on—not only building the product from the ground up but also shaping the client’s design culture and coaching them to embrace design-centric business decisions.

The launch party we threw - everyone got a shopa hoodie!

Live Shopping App for Gen-Z