How to shop for clothes when you can’t try anything on?
VirtuFit App
VirtuFit is an app that enhances the contactless clothing shopping experience by allowing users to scan clothing items in stores and virtually try them on in an interactive 3D fitting room. A 3D virtual fitting room helps users find the right fit, size and style of clothes and match them with other pieces of clothes in stores.
Time: 10 weeks (2020)
Role: User Research, UI/UX, Human-centered Design, Visual Design
Tools: Sketch, Figma, InVision, Adobe Photoshop, Marvel App
Design Problem
Since the beginning of the pandemic, the classical shopping norms that customers know and love are being re-examined, from using fitting rooms to touching clothes around a store. More and more stores are no longer allowing customers to try on clothes, and customers are scared to try on clothes as they don’t want to stay too long inside stores. As a result, it’s much harder for people to find clothes that properly fit them and that they like.
Goal: my goal for this project is to propose a digital solution that can help consumers make quick and informed purchasing decisions such as finding the right size, fit and style in a short amount of time without physically trying on clothes.
HMW: How might we provide the contactless clothing shopping experience so that customers can spend less time in stores and feel satisfied with their purchases?
Design solution
I spent ten weeks researching, interviewing, sketching and creating the concept for VirtuFit, a 3D virtual fitting room that helps customers find the right size, fit and style of clothes.
Empathize → Define → Ideate → Prototype → Test
Secondary Research
According to the PushOn report, 82% of consumers still want to view, touch and try on clothes before buying them. However, with all the restrictions in place, customers are not allowed to try on clothes anymore, which makes it harder for them to make the right purchasing decisions. Customers are feeling overwhelmed with questions like, will the clothing fit me or not? how might I match this clothing with my other clothes? should I buy it or not, if I don’t like it then maybe I will need to return it? On top of that, over 31% of consumers do not want to stay longer in stores because they do not feel safe, which makes it even harder to make the right purchasing decisions in a short amount of time.
Primary Research
To dig deeper into my problem space, I conducted one-on-one interviews with five individuals. I chose one-on-one interviews for this project because one-on-one interviews helped me deeply explore the interviewees' opinions, behaviours, experiences and motivations regarding their in-store shopping experiences throughout the pandemic.
After conducting five interviews, I identified five common themes across five interviewees, such as crowded stores, health and safety measures, online shopping, interaction with consultants and trying on clothes.
Empathize
Define
Who am I designing for?
My persona Chloe is extracted from my interviewees' pain points, motivations and behaviours. Chloe helped me to understand my users' needs, wants and expectations.
In-store shopping experience map
Chole’s experience map helped to visualize her shopping experience from the start to the end. Through her in-store shopping experience, I had a chance to experience her frustrations and find opportunities for design intervention to reduce her pain points.
Define Cont.
User stories to one chosen epic
I created several user stories to understand the tasks Chloe tries to accomplish. After that, I grouped similar tasks into the following epics, search, reviews, purchase, and search was chosen as a core epic, which became the main feature of the app.
Task Selection
I quickly sketched ideas for Chloe’s task flow and then translated them into a task flow diagram.
Chloe’s Goal: as a consumer, before purchasing a clothing item, I want to make sure that the size and the style of the clothing fit me so that I can be satisfied with my purchase.
Chloe’s Task: To create a personal avatar, go to a store, scan a specific clothing item, try on the clothing item on the personal avatar and check relevant information regarding the clothing item to make the right purchasing decision.
As a passionate UI designer, I found the next steps exciting as I was moving from the problem space thinking to the solution-based thinking.
Ideate & Prototype
Paper Sketches
After collecting specific interface layouts that capture similar functionality screens of Chloe’s task flow, I began sketching the range of potential interfaces, such as the creation of an avatar interface, the scanner for scanning clothes in stores interface and the virtual dressing room interface.
Mid-fidelity Wireframes
My next step was to select the most compelling sketches of my paper interfaces for my digital wireframes. After selecting my most compelling paper sketches, I proceeded to create grayscale digital wireframes in Figma. My last step was to assemble the interactive prototype using appropriate transitions and gestures in Figma.
User Testing
After creating my greyscale prototype, I went straight to usability testing and iterating as many times as possible. Usability testing helped me to obtain practical, real-time feedback that I incorporated to improve my design in order to provide a more optimal user experience.
In total, 5 users were recruited for each round of usability testing (2 rounds = 10 users). Most of them completed all the tasks successfully. But several users had trouble completing two tasks, filling out the measurements for the avatar and checking details about the clothing item.
Tasks
Creating the female avatar for Chloe
Filling out the measurements for the avatar
Selecting the white top clothing
Trying on the white top
Checking details about the white top
Choosing the bottom clothing
Saving the look
Test
Each round of iteration was updated based on the users’ comments and feedback. The goal of each iteration was to reveal areas of confusion and uncover opportunities to improve user experience.
Brand Colour
Keeping my persona and users in mind, I wanted the feel of the app to be modern, warm, minimalistic, confident, and elegant, which is why I decided to go with brown colour as brown represents reliability, elegance, warmth and honesty. Brown is a stable and grounded colour that is believed to help people fit in and belong.
The brown colour was used for all the interactive elements and every other colour was used in greyscale to avoid any confusion and make the interactive elements clear.
Logo
I experimented with a few different designs to select the best design that suits VirtuFit’s branding image.
VirtuFit logo
The elegant typeface of my logo demonstrates the elegance and confidence of my app. The hanger icon represents a 3D virtual fitting room where users will be able to try on clothes. The light brown background represents the main colour of the brand.
Brand
Challenges
This was the first project in that I focused on specific users and their problems. I learned to consider users’ behaviours, motivations and pain points and focus on the solution that reduces their pain points.
This project was completed during the pandemic, and I had to conduct usability testing remotely with 15 users. Initially, it was challenging, but I quickly learned how to adapt to the “new normal”.
From usability testing, I learned that everything from labels, titles, icons and colours can be a determining factor in whether users can have an effective user experience.
Besides this project, I had to work on team projects, and attend lectures and labs. Initially, time management was a blocker, but I quickly learnt that making a list of tasks every day, and identifying and prioritizing urgent tasks helps me to get things done and be productive.
When I have more time
I will continue iterating! I will be keen on revealing areas of confusion and uncovering opportunities for improving user experience.
Implement a personal wardrobe feature, which will allow users to match new pieces of clothes with existing clothes from their wardrobe.
Improve the avatar feature, allowing users to view clothes 360 degrees.
Instead of users filling out body measurements and choosing sizes, I want to have a feature where users will have an option to upload their photos, and the app will automatically generate their body measurements and sizes.
Reflection