étoile
Mobile App Design
étoile (defined as “Star” in French) is the first clothing brand that offers a virtual try-on Augmented Reality (AR) feature via an iOS app. Users can select any item of clothing on the app and try it on virtually with AR through their iOS smartphone.
étoile believes that offering a virtual try-on feature makes a significant difference to the user experience and e-commerce. They believe users can find the perfect outfit they have been searching for without visiting in-store, and have a time-saving shopping experience.
Project Objective
• Design a brand logo for the company that can be modern and feminine at the same time
•Design an app that allows users to virtually try on clothes anywhere using the AR feature
•Design an app that is easy to use and browse through the site with filtering options
•Design the app to be able to handle more complex features in the future, such as multiple items at the same time via AR
ROLE
UX/UI Designer
Brand Designer
Mobile App Designer
DURATION
4 Weeks
80HRS
TOOLS
Figma
Miro
Photoshop
Process
Research
I have conducted user research to learn more about the impact of AR in the fashion industry and get insight into how users make a decision on purchasing clothing in e-commerce.
Research Goals
• Understand the latest trends in fashion e-commerce App
• Discover competitive clothing brands
• Determine what features need to be included to make the app more easy and straightforward to use
• Discover what are the pain points users experience in shopping via APP
• Understand the users’ shopping behaviors, including habits, needs, and motivations
Research Method
• Market Research
• Competitive Analysis
• User Interviews
Market Research
Market research helped to collect data and resources of the current clothing industry market, trends, and demographics.
Fashion: E-Commerce Industry
Fashion e-commerce involves buying and selling fashion-related items online. In 2020, fashion e-commerce accounted for roughly 29.5 percent of the total fashion retail sales in the United States and has continued to experience a steady annual growth rate since 2003.
Mobile App Retail Market
As the e-commerce industry grows, the mobile commerce (m-commerce) industry also witnessed unprecedented growth. By 2021, the world’s m-commerce sales will make up for 53.9% of all e-commerce sales.
82% of Internet users in the United States have used a mobile device to shop online
35% of US consumers use only their mobile device to buy online
Augmented Reality (AR)
Augmented Reality (AR) has been one of the biggest innovations. According to a Neilsen global survey from 2019, consumers listed Augmented and Virtual Reality as the top technologies they’re seeking to assist them in their daily lives.
In fact, over half (51%) said they were willing to use AR to assess products.
77% of shoppers want to see product features like colors or style
71% of shoppers would shop at a retailer more often if it had AR
55% say AR makes shopping fun
40% of people are willing to pay more for a product if they can experience it first through AR
Competitive Analysis
To find how current clothing brands use their App and AR features on their App. Also, to gain information of what is working and not working from the other competitors.
Feature Matrix
Feature matrix was a useful tool to understand the value vs the cost of features in competitors' products. From a competitor review perspective, it allowed where the benefit in their feature set lies, what elements are easily duplicated, and which are not.
User Interviews
User interview was conducted to understand to collect more qualitative data of users' shopping habits and which platform they use, and why.
•Participates: Individuals ages 25-35 who shopped women’s clothing via e-commerce in the past 3 months.
The interview was conducted with 5 participants below:
Participant 1: Female (35), Accountant, Single, Orange County, CA
Participant 2: Female (28), Real estate, Single, New York, NY
Participant 3: Female (33), Sales Manager, Married, Los Angeles, CA
Participant 4: Female (29), Marketing Specialist, Single, Seoul, Korea
Participant 5: Female (26), Software Engineer, Single, San Francisco, CA
Affinity Map
After the user interviews, an affinity map allowed us to collaboratively analyze the research findings.
User Interview Summary
User Goal
Virtually try-on clothes at home with an easy to navigate app that motivates users to shop online faster
and easier
User Needs
• Clean and easy UI design
• Quick and easy to navigate
• Saving time
• Accuracy of AR feature
• Customer approved product (Reviews/Ratings)
• Affordable price
• Recommendations for
clothing combinations
User Frustrations
• Ordering wrong size, fit,
and color item
• Delayed delivery dates
• Unexpected styles
• Unexpected material of
the product
• Payment security
• Time consuming
• Comfort level of the product
User Motivations
• Virtual try-on
• Mix & match clothes at home
• Shop for special occasions,
work, and leisure
• Purchasing specific products
Research Findings
• All participants’ concerns and frustration for shopping online were the size and fit.
• 4 out of 5 participants shop online every 3 months.
• 3 out of 5 participants shop online for special occasions.
• 4 out of 5 participants stated the reason for shopping online is to save time.
• 4 out of 5 participants shop online for specific items
• All participants stated that the “Loyalty Rewards Program” is less important to them.
• 3 out of 5 participants that the “Rating/Review” feature is very important to them.
• All participants are interested in using the AR feature.
Persona
A user persona, Hanna, was created based on the insights gained from user research. The user persona, Hanna, helped me to better empathize with the target user throughout the design process.
Empathy Map
Empathy map allowed us to understand and communicate the problems and mindset of our users in an easily digestible manner.
Point of View (POV)/ How Might We (HMW)
POV and HMW statements helped us to reframe the design challenge in a way that incorporates all the information and insight we have uncovered so far. POV statement allowed us to reframes the problem in a way that is simple to understand and insight. HMW statement allowed us to think clearly and concisely as to what the real problem is and how we might solve that problem.
App Map
An app map includes the proposed pages to help plan the structure of the app. The app map is used as a blueprint for the app to help to organize all contents on the app as well as understanding the navigation
and flow.
Task Flow
To complete the main task (purchasing a product), a task flow allowed us to create a path to the key screens. Task flow focused on an ideal flow where it remains linear.
Low-Fi Wireframe
After the crazy 8’s method, the sketches were translated into low-fidelity wireframes.
Brand Logo
The feminine yet minimal and modern brand logo will appeal to the target audience. And the brand name étoile represents, “Star” in French. The brand message is to the users is “Shine bright like a star”.
UI Kit
A UI kit allowed us to speed up the entire design process and helped us achieve consistency and cohesiveness throughout the entire app.
Hi-Fi Wireframe/ UI Design
High Fidelity Prototype
Usability Testing
Test Objectives
To test the users' ease when navigating the app to complete a task
To test the overall quality and the flow of the design
To test how quickly the users can complete the task
To validate whether the design solves the user’s needs
Observe the preferred method of the checkout process (Cart menu vs My Cart)
Observe the user’s hesitations, frustrations, and confusions while navigating the app
Task 1
Find a “Navy Polka Dot Dress” and save it to “Favorites”
Task 2
Find a “White Maxi Dress”, try the AR feature, and
purchase the item
Test Methodology
In-Person: The participants will be completing the given task on their phones using Figma Mirror
Remote (Zoom): The participants will be completing the given task on their computer while sharing their screen on Zoom
Participants
Number of Participants: 5-6 Participants
Age Demographic: 25 - 35 Years of Age
Participants shopped women’s clothing via e-commerce in the past 3 months and have an interest in
the AR feature
Affinity Map
An affinity map was created to sort, prioritize, and rank the user testing feedback.
Key Takeaways
All participants were able to complete the given tasks successfully
All participants stated that the app was easy to browse
All participants highlighted that the AR feature was a positive experience, and satisfied with their
shopping experience4 out of 5 participants stated that AR experience was the most valuable experience
3 out of 5 participants stated that they would like to use the AR feature every time they shop on the App
1 participant suggested having an “AR instruction” for a better AR experience
2 out of 5 participants hoped to have a color icon on the filter for a better browsing experience
2 out of 5 participants hoped to have a “popup sign” to notify the user the item was added to the cart
Priority Revision
Based on the user testing results, the highest priority revision was made.
Next Step
Conduct additional usability testings with the priority revision
Discover more studio photos for the product page
Add more pages to the App
Increase the prototype functionality
Make further adjustments