App redesign
AR design
Time Frame
Feb 2023 - Mar 2023
Duration
4 weeks
My Role
Team
Sarah Park | DesignerMentor
Jessica Teng |. UX Designer
Vincy Feng | UX Designer
Abinaya Abikrish | UX Designer
THE CONTEXT
Rising to the challenge
This project is part of a UX design competition organized by IterateUX, a vibrant community of UX students, professionals, and mentors.
Teamed up with two designers from different parts of the globe, IterateUX assigned us one of five design challenges. In just four weeks, we conducted user research, desktop studies, and crafted a detailed high-fidelity prototype together.
Our efforts paid off—we clinched a spot in the top three out of 100 participants and 27 competing teams. Here’s our journey, step by step, through the challenge and our path to success.
Scroll for the story, or jump to the solution here.
THE PROBLEM
Our design mission
Out of the five design challenge topics available, our team zeroed in on the one centered on "Designing an apparel shopping experience by incorporating an augmented reality (AR) feature."
RESEARCH SYNTHESIS
How does the AR technology work?
To gain 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.
Americans currently use, or would consider using AR for shopping (Think with Google)
Key demographics to adapt AR
Gen Z and late Millennials (Teenage - 29 years old)
Early Millennials (30-38 years old)
Survey respondents were interested in using AR for trying on new makeup or hair colors and trying on new clothes, shoes, or accessories (Statista.com)
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
(Nielsen Norman Group: AR guidelines ; Paper: Virtual Fitting Room Development Using AR & AI Technologies)
COMPETITIVE ANALYSIS
Weaknesses of AR features in Gucci, Snapchat, Uniqlo, and Walmart
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 review statistics
Limited filtering options
USER RESEARCH
Insights from user interviews and affinity mapping
After reviewing existing research, our team conducted user interviews with eight individuals in their 20s and 30s to understand their online shopping experiences and their thoughts on AR technology.
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) to analyze the qualitative data gathered from our user interviews.
The Personas
Nelly
Age: 25
Job: Student
Goal
Find comfortable outfit at a bargain
Buys a small number of high quality items
Pain points
Repeating account registration
Jumping through hoops to get a discount
Shirley
Age: 35
Job: Graphics Designer
Goal
Shop efficiently for quality items
Browse and compare multiple outfits
Reduce chance of returns
Pain points
AR rendering results are not accurate
Difficult to efficiently share product with others
THE OPPORTUNITIES
Primary challenges: browsing and investigating stages
I created a journey map to understand how shoppers find and interact with the service and to discover opportunities for improvement. The map revealed that most pain points were in the browsing and investigating phases of the journey.
THE MVP
Deciding between a new app design or redesigning an existing product
After uncovering general user frustrations with online apparel shopping, our team faced the choice of creating a new app or improving an existing one. Following a review of Baymard Institute's app evaluations, we opted to redesign Macy's app based on user feedback and potential enhancements. Key areas for improvement identified were filtering and category options, the review page, and an AR fitting tool. We chose not to address the sign-in page, assuming solutions like Google sign-in or social media linking were readily available and Macy's had other business considerations in play.
Focused 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.
DESIGN ITERATION
Major design improvements
1
Filters and sorts system
The orders of filters and sorting options are rearranged to reflect user’s needs
Included color information for quick browsing
BEFORE
AFTER
2
Review Page
Include sorting option for reviews
Statistical distribution of reviews and sizes
Display of user photos
BEFORE
AFTER
3
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
THE SOLUTION
High fidelity prototype
Virtual try-on flow
Browsing flow
TAKEAWAYS
Lesson learned / next steps
What's next
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
Time is of the essence
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 allow thorough testing.