MirrorFit

An innovative app and mirror system that enables consumers to virtually try on clothing before making a purchase.

/User Research /UX Design /Mobile App /Product Design

My Role

Interaction & Visual Designer, and User Researcher

Team

Madison Troutman
Ori Amiel
Zehra Jaffrey

Timeline: 2 months

Project Overview

Background

MirrorFit is a course project I worked on with my team in INST367 (Prototype and Development Studio) during my time at the University of Maryland. This project involved 2 months of in-depth research, prototyping, and user testing.

For this project, we were told to assume that there are no limitations to technology and anything is possible.

Context

According to a survey conducted by Power Reviews, out of the 7,688 consumers who make online clothing purchases, 70% state that they return items because they don't fit. 32% also mentioned that they don’t like the item after receiving it.

The process of returning items might not seem harmful at first, but when 70% of consumers adopt this practice, it can cause significant environmental harm.

Transportation involved in returning clothes contributes to carbon emissions. Additionally, returned clothes are often not resold but end up with third-party vendors or in landfills.

Given that not everyone has easy access to a retail store, many people opt to shop from the convenience of their phones. This raises the question: How can we minimize the number of online purchases being returned while retaining the convenience of shopping from our phones?

The Solution: Bringing the Shopping Experience to Consumers

  1. Users can shop online from stores that are partnered with this mobile app.

  2. A “Try On” button for customers to try on the clothing and see how it will look on them through the mirror.

The Process

Research: Conducting Interviews and Analyzing Data

We initiated our research by conducting interviews with six students across campus, focusing on their shopping habits. The insights gathered from these discussions were then systematically organized into an affinity diagram for in-depth analysis.

Affinity Diagram

Utilizing this affinity diagram, we can perform a comprehensive analysis that will inform and steer the development of our product, ensuring it aligns closely with user needs and preferences.

From our Data, We Found:

  1. Despite not always finding what they need, many people still prefer in-store shopping for the tangible experience it offers, such as the opportunity to try on clothes and feel the fabric quality firsthand.

  2. Social media platforms are a significant source of fashion inspiration for many individuals, people like to post and gain affirmation from other.

  3. Shopping online has filtering features which makes finding the exact type of clothing easier.

Investigating Other Apps & Competitors

After deciding on the problem we want to solve, we began looking at other apps and potential competitors to see what features worked for them. I begin noting down the some “likes” and “dislike” along with what could they have done better.

1. Sims 4: A video game with character outfit customization allowing players to combine different outfit styles.

  1. Adjusting the characters build, which will influence how clothes look on them.

  2. Ability to customize different pieces at once.

  3. 360 degree view allows the player to see how their character look from all perspectives.

2. ZERO10: Our competitor who focuses on creating an augmented reality clothing experience.

  1. Real-Time and photo view give users options to either see themself trying the clothes on at the moment or use a static photo.

  2. Sharing on social media allows users to receive feedback from others.

  3. Limited to one item restricts users to try on multiple clothes at once, preventing the ability to purchase complete outfits.

In certain locations, ZERO10 partnered with Tommy Hilfiger and Coach to have large displays with kiosks for customers to try on a piece of item, giving it a life-size feel.

Paper Prototyping: Deciding on Features

We came to a consensus that an innovative solution is to use augmented reality in the form of a mirror to display how clothing will look and fit on the user.

Using pen, markers, poster paper, and post-its, we began to plan out the design of our product. Keeping note of what features are necessary and what are good to have. Our main goal was to make the mirror as the main product, so we tried to incorporate as many intractable features as possible.

Iteration 1: Brainstorming

User Testing: Paper Prototype

We carried out a series of user testing sessions to gather valuable insights. Our focus was on understanding which features users found impactful and identifying any elements that could be eliminated without compromising the user experience.

From the tests, we found:

  1. There is very little onboarding process to teach new users the concept of this product.

  2. There needs to be better flow, how does the two product work hand in hand?

  3. The mirror seems to have everything, if you add a search function, is the phone app even needed?

Low Fidelity: Finalizing Features

Based on the feedback received from our paper prototype user testing, we rethought our design approach and decided that the best way to implement this idea was to make the app the main product and the mirror a supporting device.

Key Features of the App

Sizing Questions

We aim for the app to assist users in finding the correct size that fits them. However, during our testing sessions, we found that many people do not know their exact waist, chest, and neck measurements. What they are familiar with is the size of the shirt they currently wear, whether it's S, M, L, XL, or XXL.

Style Quiz

With the style quiz, the user have the option to either fill it out or to skip it altogether. Filling out the style quiz will feed the algorithm information and provide pieces that suites the user’s taste.

Social Media

Fashion and social media is like peanut butter and jelly. They just have to go together. During our paper prototyping phase, we recognized that social media integration would be a feature many would appreciate and enjoy. The ability to post and gain feedback from others is an invaluable experience.

Try on Button

Our main feature enables users to try on different pieces of clothing with just a click of a button. This function projects the item onto the mirror, applying it to the user in a manner akin to a filter.

After transferring most of the features from the mirror to the app, we revisited our user testers to have them retest it and received a stamp of satisfaction. From there, we began working on the final design of the product.

Final Design

Onboarding

Users answer some questionnaires that allows the app to cater around their needs.

Device Pairing

For the app to communicate with the mirror, we will be using a bluetooth pairing feature.

Searching

Searching for items is simple: users can shop by brand, or they can use the search bar to look up a specific item.

Try On

The try on feature will allow the user to test how the clothing piece will look on them.

Social Media

Users can take a photo with MirrorVision and post it on the built-in social media platform to receive comments and reviews from community members.

Next Step

When we presented this project to our class, everyone loved the idea of shopping for clothes using augmented reality. However, there was debate about whether the mirror was the best medium for this purpose. The discussion had two main viewpoints: the mirror, being too large to carry around, is quite restrictive; on the other hand, relying solely on the phone display might be too limiting due to its small size.

As of now, we believe the mirror serves its purpose. Nevertheless, there is always room for integrating new technologies, such as creating a completely immersive shopping world.

Reflection

Project Takeaway

The most valuable lesson I learned from this project was that things do not always go as planned. In the early stages, we aimed to diverge from an app-focused product and think outside the box. Positioning the mirror as the main product presented a unique approach with its own set of challenges. We encountered numerous roadblocks along the way, necessitating frequent shifts in our ideas to ensure the project's success.