Avatar MEASUREMENT VIEWER
Body scanning app & web measurement dashboard
Giving everyone access to personal body measurements and a way to share them with others.
I designed the mobile-responsive version of a new workflow connecting the TrueToForm scan app with the measurement web dashboard, implementing over 50+ screens and introducing new features.
Background
TrueToForm’s 3D body Scanning technology generates 3D avatars via a mobile scan. The web dashboard - among TrueToForm's suite of products - provides designers and made to measurement brands access to 3D measurement data based on the avatars sent from the mobile app. TrueToForm decided to extend these dashboard features to mobile app users after receiving a growing demand from bespoke designers and everyday scanners.
Timeline
From initial explorations to final designs, all completed within 5 weeks while simultaneously managing multiple projects.
Project Goals
Keep designs cheap and simple.
Aquire more users.
Team
CEO & Co-founder
CTO & Co-founder
Developer
Product Designer
Previously, only web dashboard users—mainly designers and made-to-measure brands—could access avatar measurements, while mobile app users conducting 3D scans could not. The challenge was to extend measurement access to everyday scanners and consumers.
Objective 1 : grow TrueToForm's user base
Our first objective was to give mobile users a way to share their avatars, increasing app visibility and expanding TrueToForm’s user base.
Objective 2: Enable measurement access to mobile scanners
Our second goal was to give mobile users access to their avatar measurements.
Engineering Constraints
Previously, only web dashboard users—specifically designers and made-to-measure brands—had access to avatar measurements, while mobile app users conducting 3D scans did not. The challenge was to extend this measurement access to everyday scanners and consumers. In collaboration with leadership and engineering, we evaluated the viability, effort, and impact of two approaches. Given limited engineering resources, we ultimately decided to redirect users to the web dashboard app.
My design co-worker and I brainstormed different ways of linking out to the measurement dashboard from the Avatar Preview screen in the mobile scan app. The mobile app's original measurement icon triggered a pop-up module stating "View your measurements on your dashboard." This model did not provide a direct link-out to the measurement dashboard.
Original
Icon
Button (Chosen)
In light of previous user feedback, it was observed that some users mistook the original measurement icon for a toilet paper roll. In response, I brainstormed a variety of global icon designs for measurements. Subsequently, we conducted a preference test among the different designs to determine the most effective option.
Among the alternative designs presented to my cross-functional team was a secondary button that adhered to TrueToForm's existing style guide for the iOS application. After discussion, as a team we decided to go with the secondary button as it more explicit than the icon button.
In the original scan app, scanners could only share their avatars by inputting a share code that was linked to a made to an apparel brand's web dashboard. Initially, the CEO requested the design team to build a public avatar toggle with a share link. A mobile scanner could choose to share their avatar publicly by switching the toggle on and sharing their link.
Original
Toggle Off
Toggle On
A designer prior to leaving TrueToForm had previously come up with a desktop designs for the new avatar viewer. However, given engineering constraints the entire web dashboard did not yet have mobile responsive designs. Since users would be redirected to the dashboard from their mobile scan app, it was imperative that we came up with mobile responsive designs to prevent further user-dropoff.
Free plan vs. Paid Plan
With the paid plan, users can unlock the full set of 60+ measurements. Designing the measurement panel for paid users was simpler, as all measurements are automatically revealed once the user unlocks the avatar, unlike the five measurements available to free account users.
Mobile bottom sheet pros:
Avatar, avatar details, and part of the measurement panel are visible
Bottom sheet component is a low engineering effort
Bottom sheet component is a universal design that users are accustomed to interacting with
User can easily return to view the measurements displayed on the avatar
A design colleague and I agreed that the best way to evaluate the new flow was through usability testing. We recruited five participants to test our initial prototype.
Testing Objectives
Identify any usability issues within the iOS app and the measurement viewer
Validate the usefulness of the new features from a scanner perspective
Identify overall feeling and atitudes of participants on the measurement viewer
My final contribution to this project involved handing off updated designs to our developer and an updated prototype to the UX researcher for conducting a second round of testing.
The handoff file included designs for users with a free plan, users with a plan, and flows for edge cases:
Pixel perfect high fidelity screens
Prototypes
Specs & other necessary notes for interactions
Notes with updates for the design system
This project served as a significant test in balancing engineering requirements with user needs. While there were numerous occasions where I desired to implement alternative designs, I gained valuable insights into effectively prioritizing engineering tasks based on our team's bandwidth.