Dress Your Shape

Browser plugin that uses computer vision to match people with styles that flatter their shape from any online clothing store

Tools Used
Figma, Pose OSC, MaxMSP
Date
2019 - 2021
Type
Web Design, Research
Role
Product design, strategy, research
Tools Used
Figma, Pose OSC, Max MSP
Thesis Directors
Dr. Mina Johnson Glenberg, David Tinapple, Dr. Prewitt
Duration
1.5 years (Jan ‘19 - Apr. ‘21)
Intro
Problem
Research
Low-Fi Prototypes
Interviews
Iterations
Final Design
Problem

A browser plugin to filter for flattering clothing styles

The Dress Your Shape prototype is a browser plugin that uses computer vision to determine a person's body shape to find flattering clothing styles at any online store.
This product was designed for my undergraduate Thesis, where I challenged myself to learn about required technology, and follow UX practices to create a complete and interactive prototype for how such an interface might exist in the real world. The prototype includes a Dress Your Shape website to create brand presence and an example how a person might use the Dress Your Shape plugin on a clothing site named Santo Spirito.
The final product uses Figma design, Tensor Flow pose estimation, and Max MSP programming to categorize body shape and recommend clothing styles.
Problem

Dressing to flatter a specific body shape is a complex math

Each person has a unique body that is flattered by particular styles. Understanding how to dress for a specific body is a complex math that involves proportions, comparisons, angles, and much more.
For this reason, shopping can be a complicated and daunting tasks. With the advancement of computer vision and AI technology, finding flattering clothing should be a simple and automated task—but still it is not.
***NOTE—The target audience for the current is MVP is limited to cis-women due to availability of research.

How might we support women in finding clothing styles that flatters their shape?

Research

Understanding shapes, styles, and current techology

I spoke with many experts in the field (personal stylists and ASU professors of fashion, apparel and costume design) and conducted a literature review to learn about:
Five most common body shapes

JMARS data is too complicated

I learned that five body shapes are most common among the target audience. Due to the complexity of the task, I was advised to focus on only those five shapes for the MVP.
Dressing for each shape
Specific styles flatter each of the five shapes, I created graphics to summarize information gathered across multiple sources.
Computer vision to determine shape
I found that body shape can be determined by knowing the distance between specific joints.
I used Tensor Flow Pose OSC and Max MSP to prove that distance between joints can be found using current computer vision technology.

JMARS data is too complicated

Low Fidelity Prototypes

Two possible solutions built in Figma

Once I determined that it was possible to build Dress Your Shape, I began ideating possible solutions and narrowed down my ideations to two possible solutions. I built low fidelity prototypes using Figma to represent these solutions.
Education App
Teach women which styles flatter each unique body shape
Integrated Browser Plugin
Inform women which styles flatter their shape as they shop
User Interviews

Preference toward integrated browser plugin

Computer vision to determine shape

JMARS data is too complicated

I discovered in interviews that learning about body shape and clothing styles in an education app is too time consuming for the target audience.
Interviewees preferred the integrated browser plugin. One woman said this was because "it does the work for you,” providing straight forward solutions rather than complex explanations. Another key takeaway was that many people do not know what a browser plugin is and therefore could not understand how Dress Your Shape is separate from the shopping website. I needed to clarify this concept in my next iteration.
  • PoseOSC to gather location data from image
  • MaxMSP to calculate distance between data points and parse results into five body shape categories
Iterations

Separating brand identity and browser plugin tool

I iterated the previous prototype by creating two separate websites to clarify how Dress Your Shape technology would work as a browser plugin. One site represents Dress Your Shape as a company, and the other shows an example of the technology being used while a person shops on an online clothing store called Santo Spirito.

Dress Your Shape Company Site

JMARS data is too complicated

I built the Dress Your Shape Website to create brand presence, and clearly identify the companies goals, research and vision for improving the online shopping experience.
The purpose of this site is to clearly show how this product would operate if brought to development.

Online Store Example

JMARS data is too complicated

I created the Santo Spirito website (named after my favorite area in Florence) to represent any online clothing store.
Here you can see a person use Dress Your Shape's pose estimation software to identify body shape, and then filter for styles based on that shape.
Final Design

Explaining my design decisions for thesis presentation

Dress Your Shape is an innovative prototype for a product that would change the shopping experience as we know it today. It would give women the power to seamlessly find styles that they look and feel good in—something that is usually a very complicated task.
Watch the video below to hear me explain some of my design decisions.
Dress Your Shape is a dream that I have been wanting to create for as long as I can remember. I am very grateful to have worked with such a brilliant and supportive team who have helped me bring this dream to life.

Reflection

JMARS data is too complicated

The concept for Dress Your Shape is an idea that I have been imagining for as long as I can remember. It makes me very proud to say that I have finally brought that dream to life!
I defended Dress Your Shape as my undergraduate thesis to a panel of 3 judges and 15 guests, by presenting the interface and a 47 page research paper. I successfully passed my thesis and even got asked by a couple panelist if they could invest in the product! Who knows, maybe one day I will start working on Dress Your Shape again and bring to a browser near you.
Screenshot from thesis presentation Zoom call
Next Project
10k