Heading 3

Nicky Guan

How to contact
Email: [email protected] / Cell: 415-770-3469
Tools: Sketch, InVision, Axure, Adobe Creative Suite
What I do    
I'm a full stack-designer and digital artist who uses agile user-centered methodologies in all things I do. I specialize in user experiences, visual design, content marketing, and strategies.

ASOS - A Mobile Shopping App

As shopping apps are now the fastest growing segment of mobile, a significant challenge facing retailers is how to persuade consumers to download and use their apps. The UK's largest fashion e-tailer, ASOS, has been doing a great job of attracting customers to use their mobile app and providing an immersive online shopping experience. 
I like ASOS's overall approach to retail because I'm passionate about fashion and their website has unique features such as catwalk videos of models showcasing the outfits on sale and Instagram photos of how influencers have stylized their merchandise. 
However, when it comes to the mobile app,  I've noticed some usability issues that might hinder a consumer's overall shopping experience. Therefore, I decided to conduct usability tests and find opportunities to optimize the user experience of the ASOS app.
The Goal: Re-design shopping cart and checkout flow to create a faster, easier, and more immersive shopping experience, which in turn drives up sales.

The Challenge: ASOS is an online shopping platform which allows fashion lovers from all over the world to access the most trending products. It becomes challenging to learn the context surrounding the customers when they use the app.
My Role: UX Researcher, Product Designer
Duration: 4 weeks
Software Tools: Sketch, Marvel, Photoshop

Research & Discovery

Empathy Mapping

Learn how users are thinking and feeling

The first step I took was to do online research around ASOS's customer-base by conducting interviews with family and friends who've used the app. I then created an empathy map to establish a persona for the largest and most important customer segment, the "20-something fashion lovers".  

User Persona

Identify user behavior and goals

According to Ann Batt's research (2016), 81% of people perceive ASOS's target customer to be young and female with an interest in fashion and leading a digital life that compliments that interest. By combining this data with my previous research results, I created the following persona for a typical ASOS app user.   

Job Story

Focusing on context and causality to establish motivation

Based on Alan Klement's article "Replacing The User Story With The Job Story", I learned that to better understand design problems, we have to first understand the context surrounding the user when they use the app. The context is important in furthering our understanding of the user's motivation and the desired outcome. From this methodology, I created the following job story.

Usability Testing

Let users complete tasks and observe where they encounter experience confusion

For the next phase of research, I did some Guerilla Usability Testing techniques on friends and strangers. Prior to this testing, I ensured that all participants were frequent online shoppers.

My test subjects included users from the local mall and team members from my office. I ended up testing five users (NNgroup research: testing with 5 users generally unveils 85% of usability problems). Each of participants was asked to complete one of the following tasks based on my learnings of the Job Story methodology: 
  • If you are looking for a new bikini, what do you do?
  • If you see a jacket that you really like, can you walk me through how you would decide whether this is the jacket for you?
  • If you decide to purchase a dress, what do you do to complete the order?

Define & Analyze

Organization and Prioritization

Construct a point of view that is based on the user needs and insights

After reviewing the notes and recordings taken from the user testing, I laid out the problems that revealed from user testing and then organized their issues and by categorizing them into similar pain points through an affinity mapping exercise. 
I used a 2x2 map to prioritize these categories by highest importance to figure out what is the primary basis for user frustration. The main goal for any shopping app should be to generate revenue and to increase the popularity of the business. Therefore, I decided to put my focus on the pain points around editing the user's CART and the CHECKOUT process which I believe are the most important factors for both the business and their customers.

Pain Point #1: Edit CART

3 out of 5 users were having a hard time figuring out how to delete  an item from the CART. Also, none of the users tested had noticed that they could save an item from the CART without having to go back to the item details screen. 

Pain Point #2: CHECKOUT

All of the users found it frustrating that they weren't able to edit items through the CHECKOUT process. Four of the users had tried to tap on the item image to edit the item but were instead taken to the MY BAG screen which has no item editing functionality. If users want to make changes to their order, they have to exit the CHECKOUT and then go back to the CART to make their changes. 

Ideate & Create

Pain Point #1: Improve user flows for SAVING and DELETING items in CART

My next step was to brainstorm and come up with solutions to address the issues. Then I started visualizing my solutions by sketching them out. After a few quick usability tests and iterations, I ended up with the following low fidelity sketches. This redesign allows users to figure out how to quickly and easily trigger the Save and Delete functions by fully utilizing the common left swipe mobile gesture and by having the Save and Delete buttons next to each other on one side of the screen. 
Before moving onto prototyping, I walked through my design with a few users to get their feedback. I then created the following high fidelity mockup to better demonstrate my solution. 

Pain Point #2: Improve User Flows of the CHECKOUT process by enabling Edit Items In MY BAG

There was no way for users to edit their orders (items) through the CHECKOUT screen. My approach to solving this issue was to take the existing editing feature from the CART screen and add it to MY BAG. Below are the Lo-Fi sketches I ended up with:     
After a few quick user tests, I turned my rough sketches into High-Fi mock-ups. Now users are able to make changes to their orders in MY BAG by simply tapping on drop-down arrows to open up a selection menu. 


For the next phase, I uploaded my High-Fi mock-ups to Marvel and created a  prototype for another round of user testing and validation :)

Validate & Results

The next phase is to conduct validation tests and to prove that all use-related hazards have been mitigated. The results were positive:

  • Users have no issues using SAVE and DELETE in CART screen.
  • Users are able to edit items through CHECKOUT screen without going back to CART

As demonstrated below, the task success rate for circumventing both of the pain points was 100%! 
As an avid and happy user of ASOS, I had a great time working on this initiative. I had the opportunity to validate my ideas along the way and receive direct input from the people who I was designing for. Overall, my design efforts improved the item editing process and made the check-out process easier and faster for users. The enhanced design provides a better user experience, which in turn should create a more immersive shopping experience and further drive up sales!