Nicky Guan


Email: guannicky@gmail.com

Telephone: 415-770-3469

Linkedin: https://www.linkedin.com/in/nickyguan/

Tools:  Sketch, Adobe Creative Suite, Flinto, Framer
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 UX Case Study
To Help Build A Better Personal Online Shopping Experience
As shopping apps are now the fastest growing segment in 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. 
 

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 the behavior and goals of your user group.

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
Test with users by letting them complete tasks and observing 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
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 the users had 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: Editing the 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
Brainstorm and come up with creative solutions.

Pain Point 1: Improve the User Flows for SAVING and DELETING items in the CART.     
   
My next step was to start visualizing my solutions. I began with sketches on paper. 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. 
    


































Prototype
Build a representation of your ideas and show to others.

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
Test your prototype with the original user group to get feedback.

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 above, the task success rate for circumventing both of the pain points was 100%! 

    
TLDR;

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! 

Thanks for reading! If you have any follow-up questions or comments, please feel free to connect with me via Linkedin or email me at guannicky@gmail.com . I would love to hear your thoughts and suggestions on my design process and how to improve this feature :)

Note: I do not work for, nor am I affiliated with ASOS. This UX study was conducted for educational and research purposes.