title-pagetitle-page

FTSY 3D Capture

2015-2016

UX, Prototyping, User Research

Team of 2 @ Woke Studio

At Woke, I worked with FTSY to design the 3D measurement portion of their app, which helps users find shoes with the perfect fit.

FTSY came to us when their branding and visual style was at a very early stage, so they asked us to focus on creating a solid user experience that they could build on in the future.

Through a process of interactive prototyping and user testing, I created an intuitive flow that guides users through capturing and vetting the high quality photos FTSY uses to generate 3D data. I also created concepts for other parts of the app beyond just foot measurement.

What if the shoe doesn't fit?

It’s a worry we’ve all had when buying shoes online. Sizing is inconsistent across different brands and even within them. What’s more, feet come in all different shapes even if the length is the same.

Finding the perfect shoe for you means understanding the shape of your foot and the kind of fit you prefer. To measure accurately, FTSY takes a series of photos and turns them into a 3D model of your foot.

The FTSY Process

1. Browse Shoes Online

Shopping for shoes online is the best way to see a wide selection - but there’s no way to try anything on or see how it feels.

2. Measure Your Feet

FTSY helps users take a panorama capturing their feet from all angles and creates a 3D model of the foot.

Our work was focused on this step.

3. Find Your Perfect Fit

FTSY helps users choose shoes that fit their foot shape with the right snugness in the right spots.

The Design Problem:

Take perfect photos of your feet from 9 different angles.

 

FTSY’s tech team needed around 10 photos to create accurate 3D models.  Since taking photos from the required angles was ergonomically strange to users, the main challenge was guiding users though the process while minimizing errors, bad photos, and misunderstandings.

Communicating Basic Concepts

We knew early on that we’d have to guide users carefully through the angles, so we explored different ways to represent sequences of photos taken from different angles.

At first we built prototypes inspired by the 4th concept shown here, but after prototyping and testing, we ended up creating something more like the 5th concept.

Guiding The User

The process also needed to have defined breaks in the action where we would give guidance on what to do next. How often to do this, and how best to explain?

Using simple animations or videos was really engaging and universal - a way of showing without telling.

Prototyping

We prototyped several quick mockups using Form, which was the perfect tool because we could use the phone’s camera and accelerometer to show UI elements moving onscreen as the user turned to take photos.

This was a fantastic way of testing if our UI concepts made sense in practice and learning more about what affordances were needed.

I’d never used Form or any other nodal programming interface before, but I really enjoyed learning it and found it more intuitive than writing code.

User Testing

Over 2 rounds of testing with users and stakeholders at FTSY, we learned that it was difficult for users to hold the phone in the right spot, and that we needed to guide people in a more step-by-step process to ensure success.

Refining The Experience

After more protoyping and a second round of user feedback, we decided to reframe the task from “take several photos” to “take a panorama with stops along the way.”

Simplifying the process to just directional stop and go signals reduced the cognitive load and made it a lot easier for users to keep their feet in frame and hold the phone at the required angle - something most people found challenging.

Final User Flow

The measurement section of the app is quite linear, consisting of 3 parts - Prepare, Scan, and Review & Reshoot.

The big emotional payoff comes after the experience we worked on - seeing your feet modeled in 3D and browsing shoes.

3-up3-up
3-in-hand3-in-hand
12-closeup12-closeup
13-hero-shot13-hero-shot

Takeaways

FTSY came to us when their technical requirements were mostly set, but the brand requirements were still evolving. As a result, we weren't able to suggest alternative ways of capturing photos of the feet. If we'd had the chance to be involved at an earlier stage we could have rethought the capture experience in a deeper way.

We created a very high-fidelity prototype that looked, moved, and worked like the real thing. This made it easy to show to users, but we invested a lot of time in hacking together a way to capture high-resolution photos using the limited Form software. In the end, it wasn't really necessary to capture real photos during the user test, and we could have spent that time iterating more on the UI.

For me, this project was a chance to level up my prototyping skills, diving into Form and nodal programming for the first time. Getting users to intuitively understand where to hold their phone in 3D space was a really unconventional communication challenge, and it was a great exercise in reframing a problem. It was also an opportunity to use the physical ergonomics and spatial skills I learned in school doing industrial design work.