sur mesure - A Mobile Tailoring App
July 2020
Problem Statement

With online clothes shopping becoming more preferred (and for some, required) over in-store shopping experiences, finding clothing that fits is paramount.
Clothes that don’t fit usually lead to shoppers wasting money on returns and clothing waste in many other instances.

Solution

A mobile app that serves as a tailor so that users get the most accurate sizing when shopping for clothing. Using the camera on their smartphones, users can get their measurements without pulling out a measuring tape.

Role & Responsibilities
UI Design
UX Research
UX Design
The Process
IdeationResearchMockups
Ideation

I started off by brainstorming the different functionalities this application could have to help a variety of users.

My goals included
✪ Creating a useful and engaging app for fashion enthusiast, and shoppers
✪ Building the confidence of users in their purchases with better fitting clothing
✪ Creating a space where users can shop for made-to-order pieces by independent designers
In efforts to help reduce mass production waste, support independent designers, and invest in high quality clothing.
✪ Helping to reduce the fashion industry’s impact on the environment by reducing clothing waste
In the United States alone, clothing waste contributed to about 11.3 tons of municipal solid waste(MSW), or 7.7 percent of all MSW landfilled in 2018. (source)

Scope & Constraints

The scope of this project was a mobile application that would solve a real world problem. The solution had to include four specific functions that would center around the problem I was trying to solve.

Some of the cONSTRAINTS included
➣ A limited timeline, as this project was a part of a course, I only had 4 weeks
➣ Limited resources for research and testing
➣ Working on the app research and design alone
Research

Competitor Research

MTailor is a shopping app that acts as a tailor for users, allowing them to measure themselves within the app and order custom clothing. The app is mainly targeted towards men looking for suits that fit them well.

MTailor uses machine learning algorithms in conjunction with the user’s camera on their smartphone to get an accurate measure. (source)

The Nike app includes a feature where users can scan their feet with their smartphone to find their correct shoe size. (source)

Drest is a luxury fashion styling game that uses Augmented Reality(AR) that allows users to create fashion looks on 3D fashion models. However, doesn't allow for users to use their measurements.

One of the features is allowing users to try clothing pieces out on size-inclusive Drest Fit Model avatars to encourage savvy purchases. (source)

From this research, I found examples of applications that can use the camera on smartphones to get an accurate measurement of its users. We also see that users being able to view clothing pieces on someone their size could encourage them to make confident decisions when it comes to purchasing clothes online. I was able to take my findings and create categories within the app.

Shop

Users can search for specific clothing items from popular brands and get suggestions on sizing for that item.

Explore

Users can create or browse fashion styling posts to inspire or get inspired by others.

Tailored

Users can shop for made-to-order clothing pieces by independent designers for high quality pieces.

Profile

Users can update any personal information, including their personal information and measurements.

User Survey

In order to get a better idea of what people would think of an app like this, I created a survey for people to answer questions related to their online clothes shopping experience. The questions in this survey help understand what is most important to users.

Some questions asked were concerning how often they shop online, especially given the time of creating this application, we are in a global pandemic that restricts most from going in stores. Other questions explore what people like and dislike about the online shopping process, and what happens when they would have to return items.

The biggest concern when shopping online is sizing.

Most respondents noted that the size of the clothing piece and then the price are the most important aspects of their decision to purchase. When returning clothing items that don’t fit, 75% have said they ship the items back by mail, which can be costly and time-consuming depending on the size of the package. Over 54% don’t end up purchasing what they assume would be their correct size the second time around, some noting:

“It no longer holds my attention.”
“It's usually a hassle and I'm already disappointed.”
“It just no longer seem appealing”

Hybrid Card Sort

To understand how users would categorize different tasks, I created a hybrid card sort activity online where there were four main categories respondents could place tasks into. They were also able to create a category if they felt there was a better fit elsewhere.

Below is an image of the hybrid card sort activity participants completed online using Optimal Workshop, as we were following social distancing protocols during the pandemic:

From the card sorting activity, I was able to gain an understanding of the way users would categorize the task they would be able to complete within the app.

All participants placed account-related actions, such as changing a password on an account, under the Profile tab. However, when it came to finding clothing inspiration and searching for tailored pieces, there was more variety on the placement.

While everyone agreed checking the status of a tailored order would be under the Tailored tab, finding a designer to purchase a piece from was not only in the Tailored tab for most people, it could also be under Explore and Shop for others.

The naming of the Explore tab gave users the impression that not only could they find fashion inspiration, but would also be able to explore different brands they could shop from. I decided to change the name of the Explore tab to Styling, which would be better suited for its purpose.

Mockups

Sitemap

Before getting into wireframes, one of the assignments we were required to complete was a sitemap for our applications. The sitemap below helps organize what components and actions will be on each page. For example, the purple cards are related to a user shopping for a custom piece under the tailored tab.

Wireframes

Mockups

Get started by taking measurements, and shopping from major brands.
Find styling inspiration or be the inspiration.
Shop custom made, tailored pieces from independent designers.
Make changes to measurements, email, and more in profile.

Retrospective

Given the short time I had to complete this project, sur mesure had a lot of functionality to it; however, there is still more that could be done to improve the overall experience of the app, here are a few of my ideas and some feedback received from users who have interacted with the final mockup:
‍
☆ Although users can browse a variety of brands, it would be more efficient if they would be able to do all their shopping within the app, being able to have a cart where they can add multiple items and checkout all at once.

☆ A wishlist! When we think of most shopping applications, there is some form of a wishlist for users to save pieces they wish to purchase.

☆ Underneath the product details, there could be fashion posts from others wearing that same piece so that the user could get an idea of what it would look like on different bodies.

☆ The Styling tab could be even more tailored to the user, creating a section with other users of similar sizes.

☆ There is potential for users to follow others underneath the styling tab to support their favorite accounts. Along with following others, users could also follow "tags" to stay up to date with the latest post associated with the tags they are interested in.

© Gahouray Dukuray