Background
TheFit. changes the online experience of the future by powering personal, relevant experiences for millions of shoppers, bringing transparency to consumers and data driven insights to businesses. Users take two pictures with any smartphone following instructions in a web app. Within one minute, a personal Body ID is created containing users’ body measurements, which then can be used online to purchase the right size or for virtual fitting.
Summary
Immediately after joining the team, usability testing revealed that the app's usability was not as good as expected and, therefore, not yet ready for a Beta release. None of the users were able to interact with the app to achieve the desired outcome due to several factors: the instructions on how to use the app were unclear, the camera UI did not provide the correct affordances for proper interaction, and users were unsure of why they should sign up for the service, how to access their profile, or how to update their previous measurements.
After multiple rounds of redesign, prototyping, and user testing, we were able to refine the app from an early prototype to a Beta release, addressing all of our users' pain points.
Home screen and "Find my size" call to action on partner' shop
Role
As a member of a two-person UX design team, I took the lead role and was responsible for guiding the entire design process and methodology, including testing, research, and redesigning the mobile app and core experience.
Challenge
The challenge at Thefit was to transform its 3D scanning technology into a simple, user-friendly app that would provide accurate clothing size recommendations for users shopping online. Another important constraint was time; we had only four weeks to make the app usable and meet users' needs before the already scheduled beta version launch.
Process
Audit and early research
The first task I tackled was conducting usability testing paired with think-aloud sessions to understand how users interacted with the app and identified its pain points. We asked 10 users to complete the following tasks: open the app, take a picture, find the recommended size, and, finally, decide if they would sign up for the service. To our surprise, all users struggled to complete these tasks and achieve their goals, both during the testing and in the debriefing session. The following pain points emerged:
Inability to operate the camera.
The recommended size did not match their actual clothing size.
Users did not see the value in signing up for the service.
Attention to instructions and 1st design iteration
The first problem we needed to address was users not receiving the correct clothing size recommendations. This was caused by the fact that the algorithm powering the camera was highly precise, requiring users to follow specific instructions to achieve the best results. However, most users skipped the instructions and went straight to the camera UI. As a result, more prominent instructions were necessary. To resolve this, we designed a series of screens with clearer, prominent, more attention-grabbing instructions and signifiers, such as "wear tight-fitting clothes" and "take the picture from head to toe."
Later, we conducted a short moderated usability test, and all users were able to receive accurate recommendations
Instructions before taking the picture
Affordances, constraints and 2nd design iteration
The most prominent issue was that users couldn’t figure out how to operate the camera. The camera wouldn’t shutter until specific requirements were met, such as achieving perfect vertical alignment of the device. Most users were unaware of this and struggled to take a picture. When they did manage to take one, it was often accidental or the result of trial and error.
Another recognized problem was that users, in an attempt to keep the camera at waist level and capture a full head-to-toe picture, would often bend their backs and look through the phone at an awkward angle, rather than simply kneeling or sitting down. We needed to address this as well.
To resolve these issues, we redesigned the camera UI, adding a level indicator on the right side to guide vertical alignment and a set of clear instructions to help users operate the camera. Once the instructions were followed, they would disappear, and the shutter button would highlight in green to indicate that the picture could be shot.
We then conducted another round of moderated user testing with these redesigns, which led to positive outcomes.
Instructions while taking the picture and confirmation screen
Why should I sign up? 3rd design iteration
The final aspect of the app to address was onboarding users and effectively communicating the value of signing up. The Fit. would only store users' measurements and sizes if they signed up; otherwise, they would have to go through the same process each time they wanted to use the service. To solve this, we made the instructions explaining the benefits of signing up more prominent at the end of the process.
Recommendation screen and customer sign up screen
Outcome
The redesign gradually introduced more streamlined and direct instructions compared to the original version of the app. Affordances, signifiers, and constraints were strategically applied to better guide the users' experience. By the end of the four-week timeframe before the beta release, all users tested were able to understand the instructions, operate the camera with confidence, and recognize the importance of signing up for the service. It was a race against time, and we had to adapt our methodology to the situation to deliver the best possible outcome.