An AR feature that helps users find suitable clothes and improves their efficiency
of online shopping for Lululemon
TYPE
Client Project
TEAM
Zhiyue Wang
Yu Cheng
DATE
Oct - Dec 2021
(10 Weeks)
TOOLS
Figma, Miro, Unity
ABOUT
This project takes Lululemon clothing shopping platform as an example to study how to improve the efficiency of online clothing shopping for users. We integrated AR technology into the clothing purchase process to solve the pain points of online clothing shopping and improve user experience.
MY ROLE
Conducted interview and observation in user research; Participated in the distribution and editing of need finding questionnaire; Designed the paper prototypes, Hi- Fi prototypes and AR prototypes; Conducted a usability testing focused on viewing the details of the product feature.
Create
If you don't know if the clothes online are right for you, how about creating "Another Self" and having him/her try it on?
Place
If you want to make the effect more realistic, how about putting "Another Self" in your real room?
Change
If you want to change the color or size, you can simply selecting the choices.
View
If you want to see the details of the product, try to approach the avatar.
◉ BACKGROUND
Users encounter a variety of difficult problems when shopping online for clothing during the epidemic.
With the increase of rent, labor cost and the prevalence of COVID, more and more brands are encouraging users to shop online. However, when shopping online, users often encounter a variety of difficult problems. For example, the size does not fit, the material and color is unimaginable, the logistics and transportation are slow, it is not clear how to match the clothing, etc.
Past
Now
◉ Initial Design Question
During the COVID, how can we design an online platform to improve the clothing shopping experience for people?
◉ Interview & Observation
What are people's attitudes to
clothing shopping online?
Semi-structured Interviews
Survey
Observation
Activity examined:
1. We examined users’ online shopping experience and their attitudes towards online and offline shopping.
2. We examined the process of returning and changing products online.
3. We examined the process of how users selecting and purchasing online.
Methods:
1. Needfinding interview
• Interview tasks:
Understanding what features matter when users shopping online.
Finding out what they like and dissatisfied with the existing online shopping experience.
• Interviewee: Interviewed 6 online shopping users aged 20-30, including income and no income user groups.
2.Observe the online shopping process through users’ shared screens.
• Gave the interviewee a link to a shopping website, including Gap, Lululemon, Taobao, and a shopping website that the interviewee chose voluntarily.
• Asked them to buy a skirt or top.
• Observed their behaviors and attitude during the process.
"Clothes bought online are often returned because the size is not the right and the quality is not as expected."
“The virtual experience should be more realistic, otherwise it will backfire.”
"The pictures should be more detailed and true, otherwise you don’t even know that the clothes are transparent."
"I often use Photoshop to put myself and clothes together to see if the clothes suit me"
◉ needfinding
Identify user needs.
- User needs a way to know if the size of the clothes is suitable for him/her.
- User needs a way to match clothes and get feedback quickly and clearly.
- User needs a way to know the size of each piece of clothing, the height and measurements of the model, and the size of the clothes on the model.
- User needs a way to let his/her friends help him/her select the clothes again after selecting online.
- User needs a way to experience a more realistic try-on virtual experience.
- User needs a way to see the details of every product clearly, like material and color.
- User needs a way to get clothing recommendations based on browsing history, and they want to see them in obvious places.
- User needs a way to see more reviews and photos from buyers to judge if the product is worth buying.
- User needs a way to try on clothing before checking.
- User needs a way to increase efficiency of fitting.
- User needs a way to get discount information easily.
- User needs a way to check recommendation items from influencers easily.
- User needs a way to try more different clothing in a very short time.
- User needs a way to see more photos and description about the clothes.
- User needs a way to return goods simply and efficiently.
- User needs a way to invite friends when they are trying on the clothes virtually in real-time.
- User needs a way to store his/her body data and don’t need to spend too much time on selecting size.
- User needs a way to have a clear, smooth, and design-conscious online clothing shopping experience.
◉ Affinity Diagram
Analyze our datausing an affinity diagram.
Affinity Diagram
By dividing our thoughts and interview records into categories for comparison and observation, we found that size, time, and design categories account for a large proportion. People are more concerned about the size of the products in the existing online clothing shopping platform, hope to save time, and look forward to improving the online clothing shopping experience through the new design of the platform.
◉ INSIGHTS
Scope down the focus.
Efficiency
Users seek efficiency in online shopping, they want to find the style of clothes they like quickly, then get the information and reviews about the clothes quickly, and finally buy the exact size of clothes that fits them.
Experience
Users hope their shopping experience is enjoyable and fun. For example, some users want to shop with friends, and some users hope online shopping could be as rich and interesting as shopping in stores.
◉ Refined Design Question (POV)
How might we improve the efficiency and experience of shopping for Lululemon users?
With the brand lululemon as our starting point, we want to investigate the problems of online clothing shopping more deeply. We hope to explore how to improve the efficiency and experience of online shopping for our users and give them a sense of pleasure and accomplishment in the process.
◉ User Profile
Who is our target user?
Based on the data collected in all user needs, we created four types of behavior variables and mapped 12 surveyed persons to behavior variables. Subsequently, we found two clusters within the scope of behavior variables as the basis for constructing user profiles.
User profile 01 (Click)
User profile 02 (Click)
Join our team
◉ Brainstorming
Main ideas
of improving the efficiency and experience.
To improve the efficiency and experience of online shopping for lululemon users, we conducted brainstorming and listed possible solutions to this problem. Finally, after discussion and voting, the following solutions were selected:
AR Models: Use AR try-on models to display product information
AI Assistant: Recommend products suitable for users’ body size through intelligent algorithms
Social Shopping: Allow users to see the details and features in an more interactive way
Join our teamWe created three paper prototypes and then ask users to build a virtual model that fit themselves, place an AR model in their room and see the details of the product they choose in an interactive way.
◉ WIREFRAMING
Basic user flow.
We aimed to simplify the steps to get the right size, color, design, and details for a lululemon product and enable a more interactive online shopping experience. We drafted the main wireframes based on our design goal.
Join our team
Solution #1 (Rational choice)
Recommend products suitable for the user's body size and style to users through intelligent algorithms
One of the biggest problems users encounter when shopping at lululemon is that they don't know how to choose a size. This solution helps users enter their body size information simply and efficiently, and synthesize a virtual 3D model based on this data. If users know their specific body data, they can choose to enter the numbers directly. If they do not know, they can adjust the body shape by adjusting the slider.
Solution #2 (Most likely to work)
Use AR try-on models to display product information
This design showcases true-to-scale Lululemon products through AR fittings. The user could place virtual models in their room through an iPhone camera to simulate the product's try-on. The model could show the size, color, collocation, product details, etc., to customers more intuitively to improve shopping efficiency.
Solution #3 (Most likely to delight)
Restore offline shopping experience through AR, allowing users to see the details and features of the product they choose in a more interactive way
Users no longer need to spend time making appointments with friends offline, and they can choose clothes with friends in the virtual fitting room. When users approach the model, they can see the details clearly. After clicking on the message button, users can also view the latest user's messages on clothing-related details.
◉ USABILITY TESTING
Validate design with stakeholders.
Usability testing goals:
1. Select the core functions that can improve shopping efficiency as the design basis for the next iteration.
2. Use Usability testing to find out the user experience and accessibility problems in the prototype.
3. Through user testing, further dig into the user's attitude and demands for AR virtual fitting.
Core question:
1. How can we help users build virtual profiles so that they can better choose the right size and view the look?
2. How might AR models fitting display improve the efficiency of chosing size and color when shopping online?
3. Whether users can see the details and the comments of the product efficiently?
Overall takeaway:
1. Virtual fitting feature has improved the efficiency of Lululemon shopping
This includes customizing the user's body model, showing products one-to-one and comparing products through AR, and viewing details that help users improve the efficiency of fitting.
2. Size recommendations and virtual profile generation are a relatively new experience for users, and the interaction process should be as simple and routine as possible
Users want to view virtual models with simple operations rather than complex processes.
3. User feedback helped us understand the lack of some features
This includes rotating and moving delicate models, adding shopping cart and wishlist with one click, returning to the previous menu on some pages.
See full feedback here
◉ TOP 3 Changes
What improvements will we make?
Based on the feedback we received from user testing, we iterated on the design. The main improvements for the next stage are listed below：
1. Give up the function of sharing live shopping with friends and keep only the core features
2. Modify the colors and fonts using lululemon style, so that the UI is consistent with Lululemon's original shopping app.
3. Improve user interaction with AR models through a gamification way. Including imitating the way of customizing avatar in the game, rotating, zooming in, checking the details in the game, etc.
◉ ar design process
How did I test it in a more realistic way?
I created different clothing materials for the virtual model, imported the .fbx model into the Unity Scene, and then built it in IOS system for testing.
◉ USER FLOWCHART
What's the final flowchart?
◉ hi- fidelity
Final design.
01
Customize your body model
After inputting the figure data, users can get a virtual 3D model that matches their figure. If they don't know the specific data, they can adjust the slider until it suits the body.
02
Try on clothes in your room by AR
Users could place virtual models in AR room through an iPhone camera to simulate the product's try-on easily. They could also choose different sizes and colors to view the real effect in the AR space.
03
Match clothes
After selecting the color and size of the clothing, users can see similar product recommendations and matching recommendations in the drop-down interface. Users only need to click to view the try-on.
04
View clothing details and features
When the user walks into this virtual model in a real scene, the user can see the material details of the clothing clearly. If they click the buttons on the screen, they can also see the characteristics of different parts of the product. Users can decide whether to buy or not from a more realistic perspective.
◉ reflection
Takeaways.
◎ The integration of technology and daily life can make users feel excited
Almost all users really like the idea of placing models in AR to find suitable clothes and view details when using this prototype for the first time, and they all think it is very useful (especially during Covid).
◎ Data privacy is always worried by users
In the second round of user testing, users emphasized the importance of their own data privacy. I hope that the next step can assist some design content to explain how the data is kept confidential, thereby increasing participation.
◎ The validity of the virtual model is affected by certain factors
Based on final design, some users said that how to accurately measure and input their body data may affect the effectiveness of the model. If there is a chance, I will consider incorporating other design techniques.
◎ Consider increasing the brand
Within the last year, Lululemon has been increasing their diversity and inclusion efforts to include those on both ends of the physical spectrum – extremely thin and plus-size. I also hope to collect more data about edge users which could be reflected on personas and prototypes .
◉ prototype
You may also like
Why working with us?
100% remote
Lorem ipsum dolor sit amet consectet adipiscing elit et ac adipiscing.
Unlimited PTO
Lorem ipsum dolor sit amet consectet adipiscing elit et ac adipiscing.
Flexible hours
Lorem ipsum dolor sit amet consectet adipiscing elit et ac adipiscing.
Medical insurance
Lorem ipsum dolor sit amet consectet adipiscing elit et ac adipiscing.
Career growth
Lorem ipsum dolor sit amet consectet adipiscing elit et ac adipiscing.
Great culture
Lorem ipsum dolor sit amet consectet adipiscing elit et ac adipiscing.
What our clients say
Lorem ipsum dolor sit amet consectetur adipiscing elit et ac adipiscing quis enim mi turpis etiam.
“The best CRM platform, ever”
Lorem ipsum dolor sit amet consectetur adipiscing elit massa enim neque tincidunt aliquam vel urna orci ante. felis vel elementum cum elit arcu hendrerit id ultrices nulla molestie posuere non arcu accumsan.
John Carter
CEO & Co-Founder
“Techplus X is the next-gen CRM””
Lorem ipsum dolor sit amet consectetur adipiscing elit massa enim neque tincidunt aliquam vel urna orci ante. felis vel elementum cum elit arcu hendrerit id ultrices nulla molestie posuere non arcu accumsan.
Matt Cannon
Lead of Design
“The best CRM platform, period”
Lorem ipsum dolor sit amet consectetur adipiscing elit massa enim neque tincidunt aliquam vel urna orci ante. felis vel elementum cum elit arcu hendrerit id ultrices nulla molestie posuere non arcu accumsan.
Sophie Moore
CEO & Co-Founder
Open Positions
Lorem ipsum dolor sit amet consectetur adipiscing elit et ac adipiscing quis enim mi turpis etiam.
Can't find the perfect position?
Contact us anyway. We may have an available opportunity for you in the future.
Contact