AR Try-On Feature | Branding | UX & UI Design
Mira is a clothing store located globally, and they are going to invest in the digital side of their business. They want to build a new app feature that can attract more customers online during the pandemic. This is a conceptual project for Design Lab's UX Academy.
Role
Timeline
Tools
Team
People are shopping more and more online due to the pandemic. However, when shoppers purchase clothing online, they are mostly overwhelmed by not being able to try it on like shopping in-store. So, how might we create a Try-On feature for the shoppers, so that they can imagine how the clothing would look on them before purchasing it?
• 3D Avatar and Virtual Try-on App Feature
• Logo
• Branding
Research Plan
Research Goals
Assumptions
Methodologies
First, I conducted market research to understand the eCommerce industry in general and the consumers' behaviors on how they are shopping online. Market Research provides critical information to determine who and where the customers are, and evaluate where do we stand. So, Here's what I found.
• Enhance AR technology - 1Digital Agency's poll says that 35% of people say that they would be shopping online more if they could virtually try on products before buying them.
• Mobile shopping - Statistica estimated that by the end of 2021, 73% of eCommerce sales will take place on mobile.
• 43 % of global shoppers found products online via social networks.
• High Shipping Cost - A study shows that High Shipping Cost is the primary reason for shoppers over the age of 18 in the US to abandon the cart.
• Sustainability - 52% of the survey respondents said they wanted the fashion industry to become more sustainable.
• 69% of Americans have shopped online, and 25% of Americans shop online at least once per month.
• 88% of customers think detailed product pages are crucial before making a purchasing decision.
Following the market research, I researched my competitors (both direct and indirect) to learn their approaches to solving similar problems for their customers. I chose H&M, Zara, ASOS and Uniqlo as direct competitors because we have similar targeted user groups. Then, I also researched two in-direct competitors which are Eye Buy Direct (online glasses retailer) and Stock X (a website for buying and selling sneakers and street-wears) since they have innovative features such as AR try-on feature and 3D product displays. View the full competitor research here.
After having a better understanding of the market and competitors, I decided to move forward with the primary research (1:1 user interviews) to gain deeper insights from the users such as their wants, needs, and pain points. I have 4 participants, and their ages range between 20-30 years old. All of them are female and shop both online and offline. View the full interview script here.
Empathy Mapping: I reviewed my notes and recording during the interview and wrote the key statements on the sticky notes. To synthesize the research findings, I created empathy mapping to identify common patterns among participants during the interview. From empathy mapping, I uncovered five insights and generated five needs.
Based on the insights that I obtained from the research, I created a persona to represent our primary users. Here's Sarah, a fictional but realistic persona. I'm going to use this persona during the entire design process to ensure a user-centered design.
After synthesizing the research, I moved forward with defining product goals. Before we ideate our products or features, it's crucial to know what businesses and users want, and if those goals can be feasible from the technical aspects. I made a Venn diagram to lay out user's goals, business goals, and technical considerations and defined the necessary features for our product. Here, we can see some goals are overlapped, and we can define them as common goals.
After brainstorming the possible features for Mira, grouped them into 4 categories (Must Have, Nice to Have, Surprising, and Delightful, Can Have later). The Categories are based on the effort level and importance of the feature. This roadmap will be referred to in further product development. View the full feature road map here.
Card sorting is conducted with 5 participants to learn how they group the items. We will use this data to structure, organize and label the content for the product. View the card sorting result here.
Following the product goals and feature roadmap, I created a site map to organzine the contents on the website. This has helped me to visualize the structure of the app and ensure if it best suits the user's needs.
After creating a site map, which is the skeleton of our product, I moved forward with creating a task flow that will help me visualize what step my persona "Sarah" will take to complete a certain task. Creating a task flow is crucial before sketching anything because it helps us visualize the motivations and primary steps that the users want to complete a task or accomplish a goal. The diagram below shows how Sarah will build the avatar to use the Augmented Reality try-on feature.
Following the task flow, I created user scenarios that help me empathize with the context of our users and articulate their goals and motivations. In this case, the scenario is the persona Sarah found out about AR try-on feature from her friend's Instagram story. So, she downloaded the app to try it. This user flow is to uncover the possible steps Sarah would take to complete the task based on the defined scenario. View the complete user flow here.
Once I have outlined major requirements for the app, I created a UI requirement list which is a to-do list for the key elements identified in the flow chart. After mapping out the list of the key screens I'm going to create, I grabbed a pen and paper to visualize my idea in sketches because this is easiest and fastest way to interpret my ideas.
After deciding the visual layout to move forward, I digitized my sketch to mid-fi wireframes on Figma. This allows me to visualize the priorities such as the hierarchy and usability without taking too much time to implement the details such as color and font.
Before creating a logo and style guide, I started brainstorming on brand attributes representing MIRA based on the project brief. Then, I developed a mood board on Pinterest that reflects the brand attributes "Minimal, Sustainable, Affordable, and Stylish". Afterward, I started working on various options of logos and moved forward with the one that contemplates MIRA's core value. It's essential to keep in mind that the logo must be scalable and readable. Finally, I created a style guide to build a visual reference for the brand. Check it out below.
Following the mid-fi prototype and brand guide, I have a solid understanding of what we are going to build. So, I added the visual details to create a high-fi screens. We are going to use it to test with real users and get approved by the stakeholders.
I created a UI kit (Mobile version) to build a collection of components and resources that help the designers and engineers to build the UI faster in the further steps. This UI kit is a living document and will be updated as far as the product is built further.
I mapped out the interactions on Figma to create a working prototype. This prototype will be used to test how the users are going to interact with the defined tasks.
Task 1 - To create an avatar to use the AR Try-On feature
Task 2 - To add the item to the cart before purchasing
Since we have the working prototype, it's time to test how the users will interact with it. From this testing, We are going to find deeper insights to identify errors and improvements. We will also evaluate whether if it can validate the assumptions or not. Before conducting the research, I created a plan to outline the research goal, objectives, and tasks. View the full research plan here.
I used the "Think Aloud" method to conduct the usability testing because it is inexpensive, and no special requirement is needed. I took notes as my participants talked. I recruited 5 participants through friends and family, and I conducted the testing via Zoom. I got a 98% error-free rate and a 100% completion rate. The error-free rate is calculated as 1 error = 1%, and all the errors are deducted from 100%.
After conducting the usability testing, I summarized the test results with affinity mapping to find the patterns while the users were interacting with the prototype. Like the empathy mapping, I broke down the transcripts and wrote down the key elements on the sticky notes. I was able to obtain five insights from the mapping. I generated five suggestions for improvements based on the insights.
• AR icon is small and inconsistent.
• The options for skin colors can’t cover all the skin types.
• The interaction for color selection isn’t prominent enough for the user.
• User needs “Return Arrow” on screen (4,5,6,7,8,9.10).
• “Shop now” button doesn’t rely the right message to the users.
I used a priority matrix to evaluate the impact and effort level of suggestions. The matrix includes four quadrants that start with Low Impact, Low Effort on the bottom left, and end with High Impact, High Effort on the upper right. Since we have limited time and resources, we need to prioritize the lists before implementation.
After evaluating the suggestions on the priority matrix, I decided to update all the suggested features since all of them lie in the (High Impact - Low effect) quadrant. View the final prototype below.
Measuring the impact and utilizing data are vitally important to create a sustainable product. Based on the metrics below, I am conducting further testings in the future to collect more qualitative and quantitive to measure both the business and user experiences' success.
To measure how happy customers are with the feature through user interviews and surveys.
To collect the percentage of tasks that users complete correctly through the usability test.
To measure how often users use the feature through the data collected over time after launch.
How many percentages we can decrease in returns from AR-guided purchases.
How many more users use the feature and invite others to join after offering immersive digital experiences.
Coffee Factory
A responsive website project
Etrade
Website Refresh
