MyCloset

Elevate your style with AI: Introducing an app design with an innovative AI outfit generator and dressing room for users in need of help choosing an outfit from their wardrobe.

Team

Elizabeth Lee

Sonia Halmi

Dulce Sanchez

Charlotte Truong

Role

UX/UI Designer

Project Member

Duration

4 weeks

Problem

Throughout our research, we have noticed that individuals often find it challenging to put together fashionable, coordinated outfits using their current clothing collection. This difficulty contributes to decision exhaustion and results in many clothes being underused.

Solution

To assist users save time and easily craft personalized outfits, we developed two primary functions for our app:

  • An AI outfit creator

  • A virtual dressing room

Overview

In today's fast-paced world, finding the perfect outfit can be challenging. Our AI-powered app is designed to revolutionize your wardrobe. Our AI Outfit Generator feature uses AI to analyze your style, body type, and the clothes from your wardrobe, generating personalized outfit suggestions. Our Dressing Room feature allows you to virtually try on outfits and accessories with app-provided clothes and clothes saved in your closet. Whether you're preparing for a special event or refreshing your everyday wardrobe, our app is your personal style assistant. 

User Interview

Research

To identify users' pain points in finding an outfit in a wardrobe and determine desired features and functions, we carried out 5 user interviews.

We focused on 3 specific questions to guide us in the right direction:

  1. Do you have any issues with choosing an outfit to wear despite having a full closet? If so, what do you think the reason might be?

  2. What factors or occasions influence your outfit choices?

  3. What features would you find most helpful in a virtual closet app?

Key Takeaways

  • Users often gravitate toward purchasing singular pieces without considering how they will coordinate with other garments.

  • Express a lack of interest in spending the time and effort to mix and match in order to discover new outfit combinations.

  • It has been suggested that incorporating the following features would be beneficial:

    • A platform where users can explore numerous outfit combinations and receive styling inspiration tailored to their preferences.

    • An outfit generator that suggests ensembles based on specific styles, body types, and occasions.

    • The ability to virtually try on outfits.

Survey

Our group encountered two primary challenges. One was that we had multiple ideas for our features but lacked clarity on which one would resonate most with users. Second was finding the best method in which we would input user body measurements. To find the best solution, we conducted an open survey with 17 users participating.

Choose the best method to create an outfit generator: (1) Link outfit inspiration to your app (Pinterest style). (2) Add in all the clothes from your wardrobe into app. (3) Scan individual items that users have a hard time matching into the app.

Which do you prefer when taking body measurements? (1) Take a picture of yourself for app to determine your body type. (2) Choose your body type within a list of body types provided on the app

Our Target User

After conducting research and interviews, we created a user persona for our app to target.

Meet Bella Ting!

Art Designer + California-based/27 years old

Behavior Demographic:

  • Fashion-conscious

  • Shops for every special occasion

  • Likes to look presentable when going out

Goals/Needs:

  • Wants to stay updated on the latest fashion trends

  • Open to trying new styles and wants days to wear unique outfits

  • Wants to shorten the amount of time spent trying to find an outfit

  • Wants to look put together and professional for work

Pain Points:

  • Takes a long time to choose an outfit/feels like there’s nothing to wear

  • Keeping up with the fast paced fashion trends

  • Challenging to style unique pieces of clothing

  • Finds it difficult to transition her wardrobe between seasons

  • Often wears the same outfit combination 

Competitor Analysis

We conducted a competitor analysis to evaluate the strengths and weaknesses of each competitor. This allowed us to identify best practices to adopt and pitfalls to steer clear of. Key points from our analysis include:

  • All competitors' platforms are user-friendly and intuitive.

  • Close to none of the apps provide robust AI assistance.

  • Users frequently encounter in-app purchase requirements for specific features.

Problem Statement

Our app aims to aid in curating an outfit from personal wardrobes.

We have observed that people struggle to create stylish, cohesive outfits from their existing wardrobe, leading to decision fatigue and underutilized clothing.

How might we help people to effortlessly create stylish, personalized outfits from their existing wardrobe, while saving time and boosting their confidence in daily fashion choices?

Storyboard

Ideation

We developed a storyboard centered on the challenge our user encounters when selecting an outfit and proposed a resolution for their issue.

User Flow

Task: Save an outfit from the AI creator.

Steps:

  1. Open the app and land on the home page

  2. Select the “AI Creator” option from the navigation tab

  3. Either scan an item from your wardrobe to find outfits for or select a filter option

  4. Click “style me” to generate outfit options

  5. Scroll through different looks and heart the ones you want to save

Initial Sketches

Design

During the initial wireframing stage, each group member independently produced multiple wireframes. Post sharing and discussion, we selected the most favorable components from each wireframe to establish a primary style to progress with. Ultimately, we opted for the third design as the foundation style to move forward with.

Low Fidelity Wireframe: Onboarding

Our main goal was to create an efficient app functions and navigation for users to easily understand and navigate through.

  • The initial phase involved designing an intuitive onboarding experience that introduces users to key features and guides them through the app's core functionality.

Low Fidelity Wireframe

We prioritized user clarity by implementing an intuitive navigation system and adopting a minimalist design approach, ensuring users can seamlessly comprehend and explore the app's structure.

Low to Mid Fidelity Testing: Tooltip

Users expressed confusion about certain functions, particularly title, AI scanning and filters.

  • We designed a tooltip to clarify each function the app offers for users.

Low to Mid Fidelity Testing: Setup Page

Users have voiced privacy concerns about body scanning features and confusion about the photo-taking process - whether to remove all outer clothing, take the photo from the neck down, or at what angle. Additionally, users have highlighted the need for a broader range of body type options to improve user comfort and inclusivity.

To address this issue, we:

  • Expanded the variety of body type choices.

  • Transitioned from scanning users' bodies to having users input their measurements manually.

A/B Testing: Dressing Room

We were facing a dilemma regarding the styling of our dressing room.

  • Do we incorporate clothes suggested by the app or solely utilize items already in the users' wardrobe?

Feedback: 

  • Most users preferred versions 1 & 2 and wanted the option to choose from both app-provided clothes and items in their wardrobe.

Low to Mid Fidelity Testing: Dressing Room

While testing version 1 design, feedback showed users preferred arrows over swiping gestures for trying on virtual clothing.

UI Style Guide

The interface embodies a minimalist design, featuring clean lines, ample white space, and a carefully curated color palette of soft neutrals.

Mid to High Fidelity Iterations

Users found the camera icon in the dressing room redundant since it was already available in the AI outfit creator section. 

Changes: 

  • Replaced the camera icon with a new icon that dynamically generates outfits through AI.

  • Sliding animation was implemented to ensure a user-friendly transition between different clothing options.

High Fidelity Mobile Mockup

Interactive Prototype

FInal Thoughts/Next steps

Initially, we encountered difficulties as users struggled to grasp the purpose of each feature and how to utilize them effectively, with the dressing room pages proving to be a significant challenge. Our aim was to develop a dressing room experience that is intuitive and straightforward. Through rigorous usability testing and A/B testing iterations, we identified multiple solutions to our challenges, including implementing tooltips and streamlining page layouts. As a result of our efforts, we successfully crafted an engaging and enjoyable app for users.

In the future, we want to introduce a new Dressing Room avatar enabling users to experience a 360-degree view of the outfits. Additionally, we would want to integrate a travel feature for users to curate wardrobe selections tailored to their destination.