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
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.
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.
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.
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.
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.