ROLE

TIMELINE

TOOLS

UX/UI Designer

2 MONTHS

Figma, Photoshop, Zoom

Style UP

Online Fashion Application

Designing a mobile app, Style Up uses AI to create personalized outfits, match users’ wardrobes, and suggest looks from multiple brands.

Designing a mobile app, Style Up uses AI to create personalized outfits, match users’ wardrobes, and suggest looks from multiple brands.

Online Fashion Application

Style Up is a fashion app powered by AI that helps users create outfits tailored to their preferences. The app recommends outfits based on users' body shape, fabric preferences, and Occassion, and suggests pieces to complement items already in their closet. It also offers personalized looks for shopping from a variety of brands. With a few questions, Style Up helps users discover, style, and buy the perfect outfits easily.

Overview

Introduction

As the Lead UX Researcher and UX Designer for Style Up, an AI-powered fashion app, I guided the project from strategy to execution shaping the user experience and visual design. Collaborating with the team, I focused on creating a seamless and personalized styling journey for women, where AI recommends complete outfits based on body shape, fabric preferences, and occasion.

This case study explores how we addressed the challenges of simplifying outfit coordination and making shopping more intuitive, ultimately designing a tool that empowers users to discover, style, and shop with confidence.

What Is The Problem?

Many women struggle to find outfits that reflect their personal style, especially for specific occasions. The process can be time-consuming and frustrating, often involving endless browsing without clarity on what suits their taste. Additionally, many women face challenges in styling pieces from their existing wardrobes, feeling uncertain about how to create cohesive looks.

How might we reduce the frustration of outfit selection by offering personalized, occasion based recommendations that simplify fashion choices and help women feel confident, stylish, and prepared for any occasion?

  • Simplify outfit selection by providing personalized, occasion-based recommendations.

  • Help women maximize their existing wardrobe by suggesting new ways to style the clothes they already own.

  • Save time and reduce frustration from endless browsing and uncertainty.

  • Boost confidence and self-expression by ensuring every outfit feels cohesive and tailored to personal style.

  • Provide a seamless shopping experience with curated looks from a variety of brands.

What We Were Trying To Achieve

  • Occasion-Based Recommendations: Personalized outfit suggestions tailored to specific events or occasions.

  • Focus on Women's Fashion: Designed specifically for women's style needs.

  • Personalized Style Preferences: Recommendations based on a user’s unique tastes and preferences.

  • Diverse Brand Selection: Each outfit includes items from a variety of brands for a customized look.

  • Increase Customer Engagement: Foster a loyal customer base through interactive features and personalized shopping experiences.

What We Were Trying To Achieve

The Solution

Style Up is a fashion app powered by AI, designed to simplify outfit selection and styling.


It helps women save time, discover personalized looks, and feel confident for any occasion.

Personalized Outfit Recommendations

Get AI-powered outfit suggestions based on your body shape, fabric preferences, and the occasion you’re dressing for.

Style Your Closet

Easily mix and match pieces from your own wardrobe with new items, creating cohesive looks without endless searching.

Shop by Occasion

Discover curated looks for parties, work, workouts, and more. effortless outfits for every moment.

Understanding who we are designing for

Women who struggle to decide what to wear for various occasions and need assistance in creating stylish outfit sets tailored to specific events.

Women with one or two favorite pieces in their closet but unsure how to mix and match items effectively to create cohesive looks.

Design Process

Our team of 2 followed a Double Diamond approach based on the Design Thinking methodology. It was not a linear path; we bounced between stages as the project progressed.

Discover

Understanding users’ experiences with outfit planning apps

A major challenge during user research was finding women who actively used outfit planning apps, which limited direct insights from current users.

To address this, we interviewed 8 women who shop online but do not use outfit planning apps. Each participant tried a few similar apps, then shared their experiences and challenges as first time users.

This approach helped uncover why these apps may have low adoption and revealed opportunities to improve the user experience to attract more users.

Discover

How Similar Apps Work?

In this research phase, we reviewed similar applications to gain an initial understanding of essential and important features. This will help us better understand user needs with more information in the next steps.

We analyzed comparable applications in a specific category and conducted a SWOT analysis. This helped us identify useful strengths for our project and find ways to turn their weaknesses and threats into opportunities to improve our design.

Define

Building Empathy

Define

Empathy Map

Identifying Touchpoints

To wrap up our research, we created a user journey map to analyze the current experience of selecting and purchasing outfit sets. This helped us identify key touch points, challenges, and opportunities for enhancing a seamless shopping journey for our users.

User Journey

Task Flow

User Flow

Content Organization & Hierarchy

User Flows

Develop

Solutions Rooted in User Insights

After analyzing our research data and understanding user needs, we developed solutions to address their concerns and integrated them into our design.

Understanding users' tastes and desired price ranges for outfit sets.

Challenge

1

2

Solution

Asked users about their preferred brands and price ranges.

Identifying users’ seasonal outfit needs for travel based on their destination.

Ask users for their travel destination to tailor outfit recommendations and add visuals to showcase items better.

Users prioritize affordable options in their shopping choices, so we needed to address their price sensitivity.

We created a section for outfit sets under $60.

We displayed set prices directly under each recommendation and added a filter option to sort sets by total price.

Our main challenge was to avoid confusing users while creating an easy navigation process for viewing outfit sets and adding items.

Created two sections:

  • One for users to add an existing item to see outfit sets.

  • One for users to receive outfit sets based on their responses to questions.

Understanding user taste deeply.

Implemented "like" and "dislike" options for feedback on outfit sets. Displayed all outfit sets on the homepage for easy access and quick visibility.

Ensuring users quickly understand the AI stylist feature at a glance.

Added a send icon and a brief message to indicate the start of a conversation with the AI stylist.

3

4

5

6

Develop

Challenge

Solution

Challenge

Solution

Challenge

Solution

Challenge

Solution

Challenge

Solution

We sketched some ideas and designed low-fidelity wireframes that would allow us test and get feedback quickly.

Early Design Ideas

Lo-Fi Wireframes

Outlining The Basic Structure

Logo and Components

Color Palette

To accelerate our design process, we developed a complete UI kit that includes templates, components, and design elements. This kit enables us to build a smooth interface efficiently, ensuring consistency and smooth implementation throughout the project.

Design System

Deliver

Questions Screens

Home Page Screen

Style Me Screens

Navigation Bar

Checkout Page Screens

On-boarding Screens

Delivering a Complete Design

Product Page

User Test

Refining Through Feedback

“Add Item Page”

1. We noticed that users didn’t clearly understand they could access their closet on this page, so we decided to adjust the layout to make it more intuitive.

We decided to place the "Choose from Gallery" and "Take Photo" options at the same level, while making the "Closet" option more prominent for easier access.

“Add Item Page”

2. In our initial design, users had difficulty finding individual prices within the set. We initially added an eye icon, but users didn’t understand its purpose.

Based on feedback, we replaced eye icon with a dollar icon, and during the third usability test, users were able to easily follow the task and find the prices.

“Photo Tips Page”

3. Initially, we designed a set of three scrolling images to guide users in taking photos of their clothes. However, during the first usability test, we found that users didn’t realize these images could be scrolled.

To enhance clarity, we redesigned the section by adding numbered indicators and partially displaying the next image to suggest scrolling. This guides users intuitively to scroll and explore the content further.

Before Usability Testing

After Usability Testing

Before Usability Testing

After Usability Testing

Before Usability Testing

After Usability Testing

To enhance clarity, we redesigned the section by adding numbered indicators and partially displaying the next image to suggest scrolling. This guides users intuitively to scroll and explore the content further.

Throughout the project, we went through multiple iterations, driven by the insights we gained from usability tests. These tests were instrumental in shaping our decisions and constantly enhancing our project.

In testing with 7 users, the most preferred Frame B, finding it easier to view individual items within sets without excessive scrolling. Users also noted that Frame B felt more user-friendly compared to Frame A.

Which Design Works Better?

“Product Page”

A/B Testing

From Static to Interactive

Prototype

  • User-Centered Design: I deepened my understanding of how to prioritize user needs and preferences throughout the design process. Engaging users through feedback was crucial in shaping an effective solution.

  • Color Psychology: I explored the impact of color choices on user emotions and behaviors, learning how a carefully curated palette can enhance user experience.


  • Simplifying Complex Processes: I discovered strategies for breaking down complicated tasks into manageable steps, ensuring a seamless and intuitive user journey.

What I have Learned?

What's Next?

  • Continuous Learning: I plan to further enhance my skills in user research methodologies to gather even more nuanced insights from diverse user groups.

  • Prototyping and Testing: I aim to refine my prototyping skills, focusing on iterative testing to validate design choices and improve usability.


  • Expanding My Portfolio: I will work on additional projects that challenge my design thinking and allow me to experiment with new trends and technologies in UX/UI design.