I led the design for a virtual sizing app for a startup during its early days. The most exciting part about this project was that these prototypes were not made in mainstream design tools. But the functionality was coded in react using the legacy framer design software back when it used to be a thing.
The objective of the prototype exercise was to mimic the end functionality of using the technology. In the prototype we wanted to show how users can seamlessly measure their body size using their phone's camera and the prototype needed to support that and for the prototype to run in a mobile browser. Sketch, Adobe XD were not going to be of much help here.
A little investigation through different prototype tools revealed that Framer was going to be the right prototype tool since we could leverage react-js into the prototype to engage native camera on the phones. Moreover the Framer prototypes were just web-apps that could be hosted anywhere and be accessed through the Framer mobile app as well as any decent mobile browser that supports JavaScript.
I wasn't very proficient at the coding part since it had been a few years since I last coded something with my own hands but I was ready for the challenge and this gave me an opportunity to learn React for the very first time.
The Journey for the Virtual Sizing app starts whenever a user at any clothing web shop is trying to figure out whether they fit a Small, Medium, Large, or any other size. Instead of manually picking up the size themselves, the user opts to calculate their size automatically by using the Virtual Sizing app integration.
Getting people to scan the right way in the very first attempt was a tricky ask. So as part of the experience and the onboarding I created some animated graphics that would show the user on how they are supposed to record themselves with further instructions on how to place the camera in the right place at the right angle when they're recording themselves.
For accessibility, these animations also had a voice over explaining what the user needs to do.
One of the objectives with our designs was to make our app experience and the design language simple enough so that it can be plugged with any clothing store. I created some initial mocks to test out with users, this gave us time to build our own design language based on the same principles to make our visuals look more polished.
After a few rounds of testing we got some great insights, and we used the data to improve our app experience such as:
Initially we just had a sample video showing people on how to do recording without any audio, this was confusing for people so we added voice-overs to all the instructions
After adding voice overs, we found out in subsequent user testing that a lot of people have their phones set to low volume and when the voice-over generally got played it was at many times inaudible. Hence we added an explicit instruction to increase the device volume and set to maximum.
We found out that some people may not find the right space around themself to do a self recording, so we added a feature to record with a friend's help as well.
We had very specific instructions on how to record the video which would guarantee best results. With all our efforts to have more explicit instructions we found that people would move the camera mid-recording and the whole effort would be wasted. To avoid this we added a silhouette mask over the camera to ensure that the person stays within the bounds.
