The UX Development Story


Clothes 

You're walking down the street and you see someone wearing a really cool shirt that you instantly want. Chances are, you probably will never own that shirt. 

Why? Because you don't know what that shirt is, where it's from, how much it costs, what it would look like on you, or even what to wear it with.

The Problem


Mirror Mirror on the Wall

SpotShop captures the piece of clothing you're looking at and creates an outfit to match. It also puts it in the context of Virtual Reality so you can truly visualize the outfit as a whole. 

The Solution


The UX Process

 

Interview Session

 

Interview Notes

 

Storyboarding

 
Cardboard View

Cardboard View

Laying the Groundwork 

I had no idea how people bought their clothes. I needed to get some input from a wide array of potential users. 

 

Interview Insights

Buy consulting people of different ages and genders, I gained insight into a processes that I knew very little about. 

I talked to a middle-aged woman, and two girls and one guy all in their 20s about their shopping habits and opinions on styles and looks. Here's what I found:

Key insights:

  1. "Color, Texture, and Fit are the most important things I look out for when picking out a dress."
  2. "I start by browsing through 100 dresses, I pick 10 that I want to pick out, 5 that I check in front of the mirror with, and 3 to try on." 
  3. "I get a lot of ideas from Pinterest, but rarely buy anything online because I can't try it on first."
  4. "If I'm going to pay for a shirt, I want to make sure it has multiple uses. If I can dress it up for dinner and dress it down for work, I'm more likely to buy it."

 

Current State of Shopping

Shopping is done either in-store or online, with not much overlap. My vision for SpotShop was to combine in-store and online shopping into a single experience with Virtual Reality.

There are benefits to both. Online shopping is fast and abundant, but hard to visualize. Store shopping is great for feeling the materials, but trying clothes on takes too long.

 

STORY TIME

Before starting to even design the interface, I wanted to lay out how the user would interact with the product. 

Ideation

Based on the use cases and scenarios that I learned about during the interviews, I wrote out my ideas, drew out storyboards, and sketched the Information Architecture to make the buying experience as effortless as possible. 

 

Keepin' it real

Although this exercise only required a Low-Fidelity Design, I consulted an Mobile Developer and a UI Designer to determine the feasibility of my ideas. We brainstormed about the tech that could be used for solving this problem. 

Key Ideas:

  1. The Google Cloud Vision API is awesome at identifying things like barcodes, logos, colors, text, objects, faces, context.
  2. Google Cardboard is great for prototyping Virtual Reality. VR is great for understanding real life sizing and scaling of objects.

App Breakdown

 

Keeping Calm 

Time started to play a big factor in the project. My ideas were all over the place. I realized that I needed to keep this project simple and well-designed instead of trying to create an app that does everything.

 

PRODUCT SCAN

Using Google Cloud Vision's API, SpotShop can recognize clothing by looking at its shape, logo, color, context, and text. It requires no input from the user apart from holding it up to the garment.

 

Purchasing 

Once the product is identified, buying it requires only one tap, and one fingerprint scan. 

People are impulsive and indecisive. Oftentimes, people leave an app mid-purchase. Reducing the amount of interactions to purchase completion guarantees more items sold. 

 

Outfit Suggestions

Based off of a suggestion from one of the user interviews, SpotShop includes a smart outfit suggestions feature which analyzes the scanned product's colors, creates a color palette, and suggests clothes to complete the outfit.

By pressing the "New" button, you can scroll through an endless amount of Machine Learning generated clothing suggestions.

 

REAL // virtual 

A big issue of online shopping is the problem of size and scaling, especially for dresses and uncommon garments. Virtual Reality is a great way of putting things in context for the user to understand the true scale of clothing.

SpotShop includes a Third Person Perspective of the scanned item and the outfit. However, to truly know how the outfit would fit you, you can view it through the First Person Perspective. 

It's interesting that this perspective is often ignored, even though 99% of the time, you'll see your outfit from a first person, top-down perspective. 

Third Person View

Third Person View

First person View

First person View


Enough talk, try out the Prototype I built!

Prototype