Overview
Virtual Fitting Room is a Shopify app that enhances a clothing merchant's product pages and provides customers with a better notion of an item's feel and fit through close-ups of the fabric and a virtual fitting room.
It was developed with a team of 4 fellow students during a 5-day design sprint, midway into BrainStation's UX diploma program, in partnership with Shopify. We were challenged to come up with a digital solution to bring the brick and mortar sensory experiences that consumers can get in-store online.
Role
Product Designer
Tools
Figma, Procreate
Problem Space
With COVID-19, retailers around the globe are forced to close their retail stores or limit operating hours to help curb the spread and adapt their businesses online. However, despite the number of online shoppers continuing to rise, many consumers still prefer to shop in-store. Particularly for certain product categories such as apparel, the sensory gap of the online shopping experience may keep consumers from making confident purchase decisions.
Design Challenge
How might we better communicate the hand-feel and fit of clothing to Millennial online shoppers, in order to help them make more confident buying decisions?
Research Insights
Kicking off the design sprint, my team and I used Day 1 to gain a better understanding of the current state of the apparel retail industry. In particular, we looked at online shopping behavioural trends and found that:
‣ E-commerce as a whole is projected to grow by nearly 20% in 2020.
‣ 45% of global consumers are shopping more on their smartphone since COVID-19 began.
‣ 91% of shoppers say they miss shopping in-stores, but only 5% of shoppers plan on trying a product in store any time soon.
Interview Insights
We also wanted to hear real, personal accounts of the electronic retail landscape, so we interviewed 5 Millennials about their habits and attitudes towards online shopping. These interviews made it clear that the quality and fit of a clothing item largely affects a purchase decision, but because it is difficult to determine the true fit of a clothing item online, people feel less confident shopping for clothes online than in-store.
Following these interviews, we also had a stronger and more cohesive idea of who our target user was and developed a persona:
Ideation
Knowing our target user and their online shopping frustrations, we spent Day 2 coming up with, sketching, and carefully considering several potential solutions. These included a virtual storefront to simulate browsing through merchandise, the incorporation of video carousels featuring the product, and the integration of social media-like elements such as "stories" — short videos of users wearing the product.
With a little guidance and feedback from Shopify's designers, we refined our ideas and developed the concept of a virtual fitting room on the product page. It would involve the customization of a 3D avatar to match the measurements of the user and the translation of tech pack data from clothing manufacturers to accurately render clothing designs and how they would fit. Users would be able to virtually try an item of clothing on, toggle a 360° view, and look through detailed, close-up photos of the real fabrics.
Storyboard
With our chosen solution, we imagined how it might improve our target audience’s experience of online shopping by helping them become more confident with their buying decisions. We storyboarded a scenario in which she needs a new outfit and looks online (1). And though there are good reviews (2), she is still uncertain about the look and feel of the item (3) until she sees herself with the item on via the virtual fitting room (4) and through the close-up fabric shots (5). And when it arrives in the mail days later, it perfectly matches her expectations (6).
Wireframes + User Testing
Day 4 consisted of designing the bare bones of our solution through wireframes and prototypes, and testing its usability with users. We found that the avatar and the interface we created to customize it was intuitive, but also discovered mechanics that users struggled with, such as swiping up/down to open/close user reviews, and were able to improve them.
Hi-Fi
The first couple hours of the 5th and final day were spent finalizing our design, injecting colour and style into the hi-fidelity prototype until we presented our research findings and final product to the class and to the Shopify team.
