Avatar MEASUREMENT VIEWER
AI-powered 3D body scanning app & measurement viewer
Giving everyone access to personal body measurements and a way to share them with others.
Background & impact
I redesigned 50+ screens and shipped new flows and features for TrueToForm's iOS scan app and web dashboard platform.
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
Key screens
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.
Objective 1 : growing TrueToForm's user base
The first objective the CEO outlined to the design team was to provide a way for mobile app users to share their avatar with others. The goal with an avatar share feature was that this would spread greater awareness of TrueToForm's app and grow TrueToForm's user base.
Objective 2: providing measurement access to mobile scanners
Our second goal was to enable mobile users to view their avatar specifications. The team and I analyzed the viability, effort required, and potential effect of two options with the CEO, CTO, engineer, and product designer. In the end, management resolved to guide users towards the web dashboard app as we were constrained by having just one engineer for this initiative.
Option a - more seamless user experience
Provide measurements directly via the mobile app by building a measurement viewer within the mobile app.
Pros: more seamless user experience for mobile app users since they don't need to leave the mobile app.
Cons: higher engineering effort since this would need to be built from scratch.
Option B (chosen) - considerably less engineering effort
Connect user to avatar measurement by redirecting them to our existing measurement dashboard website.
Pros: less effort given that our measurement dashboard is already built.
Cons: risk for user drop-off considering that users are asked to redirect to a new app and sign into a new eco-stystem.
Connecting the mobile app to the web measurement dashboard
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.
Share avatar feature
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
Coming up with mobile responsive designs
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
After mocking up potential design solutions, I recommended a bottom sheet design solution to the team. The key differences with the free plan screen is the 'start plan to view' call to action and the basic measurements section.
Free plan - locked state
Free plan - unlocked state
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
Locked - default
Locked - bottom sheet
Unlocked - default
Unlocked - bottom sheet
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.
Has a plan - locked state
Has a plan - unlocked state
Locked - default
Locked - bottom sheet
Unlocked - default
Unlocked - bottom sheet
Usability testing round 1
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
Reaction to share link
Original
Participants were accustomed to using the toggle component and found the design easy to use and preferred it to the share with a code option. However, some users were still concerned that this avatar would be public and didn't quite understand the copy.
Updating the Share Link Messaging
I brainstormed new copy that explicitly explains who has access to this link. Drawing inspiration from existing apps like Gmail, I opted to change our toggle component to a dropdown design.
This adjustment allows for a clearer differentiation between users who have access to the link. Additionally, I utilized ChatGPT to generate new thread ideas.
Disruptive link-out experience & welcome module confusion
Original
Originally, the CEO had asked to use an existing module within our design system for the login flow. However during usability testing participants overall felt linking out to a website from the scan app was a disruptive experience and would prefer the end-to-end experience to take place all within the scan app. Some even shared that they would abandon the flow at this point.
Update: improving the link-out flow
The usability tests revealed that the language in our welcome module was confusing and the content was overloaded. As a result, we've decided to completely scrap the welcome dashboard module from the flow and replace it with a new link-out module that explicitly explains to the user what will be happening.
Improving contrast on the measurement panel
Original
Overall most users were impressed with the granularity of the bottom sheet list but some were also overwhelmed by the number of measurements.
Update: improving the link-out flow
In the first round of testing, many users failed to notice the IN/CM or Circumferences and Lengths toggle. Initially, I refrained from altering the design as per the CEO's request to keep design changes minimal. However, following usability testing, we concluded that some UI adjustments were necessary to enhance the visibility of the toggles and buttons in the measurement panel.
Prototype 2 handoff
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
Reflection
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.