TrueToForm’s companion scan app is the core software that powers all of our other solutions by utilizing our proprietary scanning algorithm to capture highly accurate measurements. Those measurements are then generated into an avatar for use in garment design, manufacturing, and shopping.
Design Team Lead
Design Strategy
Complete UX/UI Design
UX Research Lead
Video Production
CEO
CTO
Full-stack eng
2 interns
2020 - 2024
As our solutions started expanding and our clientele started growing. It was obvious we needed to ensure the app's success.
To make the app successful, we needed to make the scan process WAY more intuitive and usable, despite the complex needs of our scanning algorithm.
As our solutions started expanding and our clientele started growing. It was obvious we needed to ensure the app's success.
To make the app successful, we needed to make the scan process WAY more intuitive and usable, despite the complex needs of our scanning algorithm.
We only had one developer, who was simultaneously working on our other products
Working for other startups in parallel, I only worked 20 hours a week for TrueToForm
As a startup still in seeding rounds, we needed things to stay as cheap as possible
Before I joined, scanners usually needed a direct contact with the TrueToForm team to get through the scanning process. Even then, the acceptable scan rate for use in avatar generation was only ~50%
Along with updating the linear app flow, I also pushed for removing unnecessary steps on a technical level, like all of step 4.
As mentioned, one of the biggest bottlenecks to project success was limited resourcing.
I quickly designed a style guide that, at minimum, made our brand feel professional and trustworthy; building it out just enough to streamline design and implementation.
Preventing any extra spend, I used free Google fonts.
The original landing page was jarring, as it only had one CTA without any context, which felt "sketchy"
To save time, I took inspiration from globally trustworthy sign up flows, and eased account creation frustration by adding a “continue as guest” option.
Leadership also wanted to integrate accounts, as they’re necessary for keeping user specific data in our repositories, which also give us insight to provide relevant updates and features for retention.
After doing competitive research & interviews, I decided on a less linear process, as this approach was quoted as “long and grueling” by interview participants, and would be easier to make future adjustments on.
With the “avatar hub” design, steps were broken up into digestible bits, and doubled as a way to avoid additional development complexities that came with a linear process.
Land on avatar library page after log in
Press "New avatar" icon button
Complete "New avatar" steps
Land on avatar page
The trickiest part about designing for the scan flow was guiding users through uncommon 3D interactions while also fulfilling the needs of the scan algorithm: appropriate space & distance from device, device placement, performing a 360 spin, etc.
My goal was to create robust user support systems that would guide users, in real time, through the scans; all while remembering to keep implementation cheap.
Using one long instructional video for scan preparedness proved unsuccessful, testing uncovered that user clothing and location decisions were primary reasons for scan failure.
Using a checklist rather than an instructional video added more significance to garment selection and is more digestible.
Test participants reported that the vertical scroll made the scan process feel shorter.
Getting users to understand how their space, position, and movements related to their device placement was tricky.
Testing revealed there wasn’t an understanding of the symbiotic relation between device placement and position. User’s rather would contort to the fit their device’s initial placement.
I used a sort of “level-up” system. First allowing users to use their own instincts to adjust into a silhouette, then helping them fine-tune in the next step.
🐕 Dog hair provided by huskies
Echo & Kota
After users did their best at positioning their device and themselves to fit the silhouette, pressing start would lead them into the “fine-tuning” step.
I set up verbal/visual real-time guidance systems based on the proportional relation between the joints and tracking boundaries.
To avoid disrupting their position, scan capture begins automatically once in position.
The full body scan uses different joint targets based on device position and the complexity of additional joint detection.
Joint checks
Positioning check levels
Once the green check appears, users are told to hold their arms up and wait for the scan capture to begin.
A beep counts down to the start of a single 10 second spin, as turning too fast or too slow would ruin point cloud data capture.
Mobile full-screen viewports are just zoomed in 3:4 aspect ratios. Having a full-screen viewport would’ve ruined the algorithm and reduced the horizontal view space for the user.
Users don’t typically prefer being dragged through tutorials. In addition to providing basic pre-scan videos, I added tutorial/instruction “refresher” moments when contextually relevant.
Scan help links to our Help Center are also scattered throughout the app.
Ability to easily flow through the avatar creation process while supporting algorithm needs heavily increased rates from 50%
Design updates helped surge app usage, as more businesses trusted their customer's abilities to use the app
Various companies signed up for TrueToForm accounts, as they trusted the app’s scan precision and scalability
3D interface isn’t very common in apps. If given a few more developers, the app’s brand, style, and flows would’ve heavily been reminiscent of an immersive 3D space.
Being a companion app to TrueToForm’s primary solutions, users are less likely to install yet another app. Just as well, being iOS dependent has stunted growth into the Android market and thus business sign ups
