top of page
Brand.png

OutfitAR

UX / VISUAL / AR DESIGN

Clothing Try-on App Design
Project

AR Clothing Try-on App

Role
Date

October 2022 - September 2024

Visual / UX / AR Designer

Overview
▌OVERVIEW ▌

What would you do if your girlfriend doesn't know which dress to wear before she goes out?

| Design Process |
1

Problem

2

Competitive Audit

3

Wireframes

4

Prototype

5

AR

Problem
▌PROBLEM ▌
| Problem Overview |

My girlfriend is a fashionable girl, who would like to purchase new clothes almost every week. She has so many clothes that she even couldn't remember what kind of clothes she has. Every time before she goes out, she will spend 20 - 30 minutes choosing what to wear. So I decided to design an app to help her find the outfit she likes in a short time.

| How to Choose Your Outfit |
1

Traditional Way

2

New Way

1.gif

What would you do before you go out? You need to find clothes in your closet, then try them on and see how it looks like in front of a mirror. If you are not satisfied with the outfit, you need to take them off and get back to the closet for other clothes ...... Try different clothes back and forth until you like it.

p_20cs_freeguy_homeent_21930_49e74453_ed
phone.png

What if we can do that in a different way? Maybe you can see how you look like with different outfits just in the mobile phones. Then, after you decide what to wear, you can go to your closet and find the clothes you want directly and confidently. And obviously, users can save lots of time if they can choose clothes through mobile phones.

VS

Diagram-01.png
Diagram-01.png
Competitive Audit
▌COMPETITIVE AUDIT ▌
| What's Important for a Clothing Try-on App |

I used different clothing try-on apps in the market, and summarized six important points for this kind of apps:

1. Collection: Users can save their favorite outfits with specific category;

2. Clothes on Body: The app needs to show how clothes look like on a digital avatar;

3. 3D Display: Some clothes are special from the back or the sides, so it's important to show them from different angles;

4. AR Display: Definitely, it's great to see how it looks like on users' own bodies;

5. Transparent Background: Upload or take a picture to the app, it will delete the background automatically;

6. No Shopping: This app is for personal use, so that there is no advertisement or purchasing links in it.

Collection

1.jpeg

AR Display

4_edited.jpg

Clothes on Body

2.pic.jpg

Transparent Background

5.png

3D Display

3.webp

No Shopping

6_edited.jpg
| Competitive Audit for Popular Clothing Try-on Apps |
Competitive Audit-01.png

The competitive audit shows that none of these products in the market right now satisfy the important six points for clothing try-on apps. Therefore, I decide to design an app with all these features, trying to provide a better user experience.

▌WIREFRAMES ▌
| From Sketches to Wireframes |
Wireframes

In my perspective, a good product should be functional and straightforward, so I was trying to create an app only with necessary user flows. Everything starts from the homepage, and users will be directed to the fitting room, the closet, and the saved collection:

Site Map-01.png

After I constructed the site map, I began to do some sketches and generated the initial wireframes:

Sketch.gif
| Initial Wireframes |

Homepage

Homepage.png

Fitting Room

Fitting Room.png

Preview

Fitting Room_Preview.png

Closet

Closet.png

Collection_1

Saved Outfit.png

Collection_2

Saved Outfit_2.png
▌PROTOTYPE ▌
| Updates |
Prototype

I invited four users to test the prototype and updated my design according to their feedbacks. I added the bottom navigation bar on the homepage and the shuffle button on the fitting room page, and moved the 'Add New' button from the bottom to the top, in order to better the user flow and experience.

Before

After

1

Home Page

- Add bottom navigation bar

I added the bottom navigation bar for all pages, so that users could switch to any pages as easily as they want.

Homepage.png

Bottom Navigation

bottom nav.gif
iPhone 11 Pro - Portrait.png
2

Fitting Room

- Add a shuffle button

I added a shuffle button in the fitting room, in order to help users find those outfits that they had never tried before. In this way, they could have new experience with what they have.

Before

Fitting Room.png

Shuffle

Button

After

shuffle.gif
iPhone 11 Pro - Portrait.png
3

Closet Room and Collection 

- Move 'Add New' button from

   the bottom to the top.

I moved the 'Add New' button from the bottom to the top in closet room and collection page, in case that there were too many items in one page and users might miss the button.

Before (Closet)

Closet.png

Add New

After (Closet)

Closet.png
iPhone 11 Pro - Portrait.png

Before (Collection)

After (Collection)

Saved Outfit.png
Saved Outfit.png
iPhone 11 Pro - Portrait.png

Add New

| Final Prototype |
Homepage.png
Add.png
Add_3.png
Closet.png
Closet_2.png
Fitting Room_1.png
Fitting Room_Preview.png
Saved Outfit.png
Saved Outfit_2.png
Saved Outfit_3.png

Add New

add new.gif
iPhone 11 Pro - Portrait.png

Choosing Clothes

choose clothes.gif
iPhone 11 Pro - Portrait.png

Preview

shuffle.gif
iPhone 11 Pro - Portrait.png
preview.gif
▌AR CLOTHING TRY-ON ▌
| Work Flow |
AR

In order to fulfill AR clothing try-on, I learned several softwares and built my work flow:

1. Design clothes in Marvelous Designer, which is a popular tool for fashion design. Then, export 3D clothing model as an FBX file.

2. Import the 3D model into Blender, and use “Decimate” tool to simplify it. Then, export the simplified 3D model.

3. Import the simplified 3D model into Mixamo, and add skeleton to it.

4. Import the simplified 3D model with skeleton into Effect House, and make the AR clothing try-on effect.

Marvelous Designer

Blender

Mixamo

Effect House

md.gif
blender.gif
mixamo.gif
effect house.gif
| AR Effect |

In order to show the real effect on human body, I invited Yefei Guo to be my model, and tested the final AR function.

ar1.gif
ar2.gif
ar3.gif
ar4.gif
ar5.gif
Takeaways
▌TAKEAWAYS ▌
| Technical Problems |

This is a concept, rather than a solid product because of technical problems, like 3D models for clothing and AR body tracking. In my project, I jumped the part about how to make 3D clothing models through pictures, which is hard for right now. However, I believe this technology will come to life soon, and there have been similar tools used to scan and build 3D models for old buildings and environment In the field of architecture and archaeology. Moreover, I did create the AR clothing try-on app, but it doesn't fit human bodies perfectly. For example, if users move too fast, their shoulders may appear or the clothes may disappear for one second. All these are beyond my capacities, and I believe this project could be better if these problems were solved.

| More Research |

Needless to say, user research is one of the most important parts for UX design, however, for this project, more user research is needed. If I had more time, I would invite more users into my research. For example, I summarized 6 points to evaluate AR clothing try-on apps, but I only made the conclusion based on my won experience and my girlfriend's need. I believe this project could be more reasonable if I met more potential users. Similarly, only a few users took part in the usability research, which was helpful, and I updated the prototype according to their feedbacks, but I failed to expand the user capacity because of limited time.

bottom of page