Jessica Teng
Macy's App Redesign
Product, AR Design
My Role
Team lead for user research, UX design and case study presentation
Team
Sarah Park | DesignerMentor
Vincy Feng | UX Designer
Abinaya Abikrish | UX Designer
Timeline
Feb 2023 - Mar 2023
(4 weeks)
Tools
Figma, Figjam, Photoshop, Miro, Clipchamp, Google Doc
Problem
The rise of e-commerce has brought convenience, but the inability to physically try on items before purchase remains a significant drawback. In the apparel industry, return rates are soaring, with 26% of consumers having returned clothing in the past year (Statista). This poses a pressing challenge for fashion retailers in sustaining online success.
Context
IterateUX is a vibrant community comprising User Experience students, professionals, and mentors collaborating to foster growth in the field of UX Design. Recently, our team engaged in a design challenge hosted by Iterate UX, marking our debut in such competitions. We are delighted to announce that amidst over 100 participants and 27 competing teams, we achieved one of the top three scores in the challenge.
Design Challenge
Among the five design challenge topics provided, our team selected the one focused on "Redesigning an existing apparel shopping app by incorporating an augmented reality (AR) feature." Our objective is to create a streamlined and intuitive apparel shopping experience that leverages AR technology.
Starting With Questions
As an individual who personally grapples with the challenges of limited visibility and accurately envisioning the fit and appearance of garments while shopping online, I have contemplated possible solutions to address these issues. In order to align our team with the needs of our users, I have formulated the following "How Might We" questions to guide our research efforts:
-
How might we design a shopping experience that enables users to efficiently locate their desired products on a screen with limited visibility?
-
How might we leverage the power of AR technology to assist users in visualizing how clothing will look on them?
-
How might we streamline the process of finding fitting information for each apparel item, empowering users to make well-informed decisions?
RESEARCH
How does the AR technology work?
Research Goals
-
Gain a deeper understanding of AR technology and the data required to generate accurate AR renderings
-
Explore the usability of existing AR fitting technologies
-
Understand where and how consumers typically shop for apparel
To gain reliable insights into online shopping and AR technology, I conducted extensive secondary research by drawing on a range of reputable sources, including Google Scholar, the Nielsen Norman Group, and the Baymard Institute. In total, I studied 25 news articles, reviewed 364 design elements for their performance, and performed 4 competitive analyses, which led to some fascinating discoveries.
Key Demographics To Adapt AR
-
Gen Z and late Millennials (Teenage - 29 years old)
-
Early Millennials (30-38 years old)
Technology Requirements
To get the best results with AR scanning, the users need to:
-
Have sufficient lighting
-
Use a clean background
-
Pose correctly
-
Wear form-fitting clothes
-
Tie up long hair
-
Front and side view
Competitive Analysis
To gain a better understanding of what the competitors are offering, I conducted a competitive analysis of four popular apps that feature AR technology: Gucci, Snapchat, Uniqlo, and Walmart.
Competitor Weaknesses
-
poor AR discoverability
-
limited ability to discover on-sale items
-
inadequate instructions for capturing AR photos
-
poor distribution of user reviews statistics
-
limited filtering options
User Research
After seeing the existing research, statistics and competition in this space, we wanted to hear first hand our target user’s experiences to cater the final product towards their needs.
Our team conducted user interviews with eight individuals in their 20s and 30s to gain valuable insights into their online shopping experiences and their thoughts on AR technology. Through open-ended questions, we sought to understand their methods for determining the right fit for apparel and the factors that motivate them to make a purchase. Some example questions include:
-
Can you tell me about a recent time when you were looking to purchase apparel?
-
What motivates you to shop for apparel?
-
What factors do you consider when deciding whether an apparel is a good fit for you?
-
What app features do you find most helpful when shopping?
-
Can you describe your most recent experience with AR shopping?
To analyze the qualitative data gathered from our user interviews, I created an affinity map, ten empathy maps (one for each user, along with a combined one for users in their 20s and users in their 30s). I use this method to discover patterns in users' shopping behaviors, wishes, and preferences.
Personas
To form a deeper understanding of our users' goals, needs, experiences, and behaviors, we created 2 personas for each of our user segments.
User Journey
I created a journey map to build a better understanding of how shoppers find and interact with the service and to discover opportunities for improvement. The map revealed many user problems and opportunities at the consideration and loyalty stages of the customer journey. I found that the most pain points were in the browsing and investigating phases of the journey.
Key Themes
Within these data, we discovered some key themes in the users.
Users like...
-
On sale items
-
Easy checkout process
-
Applicable filters
-
Logical sorting system
-
Reading reviews
-
Check user photos
Users are frustrated about...
-
Not being able to browse more photos
-
Difficult to find items on sale
-
Receiving item that’s not the right size, especially length
-
Registering for yet another app
Users are frustrated about...
-
Not being able to browse more photos
-
Difficult to find items on sale
-
Receiving item that’s not the right size, especially length
-
Registering for yet another app
After synthesizing our research, we decided to focus on a redefined HMW statement:
"How might we assist bargain shoppers in easily browsing for on-sale apparel and making informed decisions on fit suitability with the help of AR technology?"
DESIGN
Ideate
We chose Macy's app for the redesign challenge based on user feedback and its potential for improvement. By analyzing Baymard Institute's app reviews and conducting our own team review, we aimed to identify the key issues to address.
Our team identified several areas in which the Macy's app could be improved, including sign-in, filtering/category options, the review page, and an AR fitting aid. However, we decided to focus on addressing all of these areas except for the sign-in page. We believe that solutions such as Google sign-in or social media account linking are readily available, and the fact that Macy's app does not already employ such a solution likely stems from other business considerations. Therefore, we prioritized our efforts on enhancing other aspects of the app to provide users with a seamless and engaging shopping experience.
Our team designed a user flow that provides users with two starting points: the first is triggered by an email notification for an on-sale item, while the second starts with the discovery of discounted items within the app. Ultimately, we decided to prioritize the app as the starting point for our redesign.
User Flow
Our team developed a user flow that offers two starting points: the first being triggered by an email notification for on-sale items, and the second starting with the discovery of discounted items within the app. Due to time constraint, we decided to prioritize the app as the starting point for our redesign efforts.
Three Main Flows
Our revamped design focuses on three main flows:
-
browsing on-sale items
-
investigating product quality
-
using augmented reality (AR) to see how products fit
By streamlining these key flows, we aimed to create a more intuitive and user-friendly experience for customers seeking to make the most of Macy's app.
4 Major Design Improvements
01
Sale & Clearance visibility
-
Relocated the “sale & clearance” category to the top for easy discovery
-
Renamed “shop” navigation to “category” for better clarity and reflection of the page
02
Filters and sorts system
-
The orders of filters and sorting options are rearranged to reflect user’s needs
Product description
-
Added color information
-
Product description display were redesigned for a cleaner view and more screen space for photos
03
Reviews Page
-
Include sorting option for reviews
-
Statistical distribution of reviews and sizes
-
Display of user photos
04
Virtual Try-On
-
Virtual try-on are made visible on the results page and product page.
-
Voice instruction and on screen pose guide simplified the photo capturing flow and improved scanning data accuracy
Clickable Prototype
Next Steps
We received positive feedback from our mentors and the community, and will move forward with usability testing in the near future. Our planned steps include:
-
Drafting user testing interview questions and script
-
Recruiting testers and scheduling testing meetings
-
Analyzing our findings
Takeaways
-
Working on an unfamiliar subject was an exhilarating experience for me. It allowed me to research, listen, and empathize with users even more deeply. As a result, I gained new knowledge and a curiosity for AR technology and ecommerce.
-
Our experience has taught us the value of evenly dividing time for each project phase. Unfortunately, due to time constraints, we were unable to complete testing on our target audience. In the future, we will allocate time more effectively to ensure thorough testing.