0
0

GROCERY GATEWAY: EYE TRACKING

Project Type

UX Research; Usability Testing

Project Output

Usability Testing Analysis Report

Project Length

1 week

TEAM

Husain Zaidi, Kristen Turner, Yasir Hussain

MY ROLE and PROJECT SUMMARY

We were given the opportunity to use the Usability Labs at Humber Media Centre, which is equipped with Eye Tracking devices, capable of producing Heat Maps, Gaze Plots etc. Using these technologies, we organized and conducted a series of usability testing on the website of Grocery Gateway, for their ‘search’, ‘add to cart’, and ‘checkout’ process. We decided on target user profiles of 3 age groups 20-30 years, 30-40 years, and 40-50 years old, based on which we recruited the participants. Then we conducted the eye tracking test, with one person being a moderator and 2 people assuming the role of note takers. 

After conducting the test, we exported all the relevant assets (heat maps, gaze plots) and individually analysed the results. Each team member assumed the role of moderator atleast once, as there were 3 participants and 3 team members. We then individually did the analysis of the eye tracking test results and made individual analysis reports highlighting the usability issues as well as design recommendations for respective issues.

Introduction

Grocery Gateway is an e-commerce store, owned and operated by Longo’s, that provides home-delivered groceries across Toronto and GTA area. Grocery Gateway services are accessible to customers either through their online website or their mobile app.
The purpose of this study is to perform, in a controlled usability lab, a series of user tests with at least 3 participants representing each user profile as outlined later in this report.

The participants will be asked to perform the following tasks:

 

  • Land on the website homepage and explore further by browsing for any special offers available at the moment.
  • Logging in to the customer account. (account details to be provided to the participant before starting the usability study)
  • Adding 5 items to the cart. (item list to be provided to the participants before-hand)
  • Checking out with 5 items in the cart. (task can be stopped right at the payment gateway step)

The above-mentioned tasks will be tested with participants from each user group, to identify the elements or steps causing usability issues and to test the overall user experience.

Evaluated Scenarios

Scenario 1

Navigate to the Grocery Gateway website at www.grocerygateway.com and

explore the website by looking for any special monitory offers at the moment.

(example: Discount coupons, buy 1 get 1 free, new user discounts etc.)

Scenario 2

Sign-in to the Grocery Gateway website using the following credentials:
Username: example
Password: password

Scenario 3

Add the following list of items to the shopping cart:
• JACKSON-TRIGGS CHARDONNAY
• DUBRETON CENTER CUT PORK LOIN CHOPS
• LONGO’S CIABATTA CLUSTERS
• ORGANIC ROMAINE LETTUCE
• ORGANIC RED ONIONS – 3lb bag
• LACTANTIA SALTED BUTTER – 454 gm

Scenario 4

Check-out and purchase the items added to the shopping cart. Stop the task at
the payment information page. Use the ‘Home Address’ already fed into the
profle. Select the earlier delivery slot (time and day) available.

Detailed Findings - Usability Issues

No ‘Side’ Navigation button to change banners on Homepage

Heat Map shows participant searching for ‘next’ banner button

Recommended Design: Add ‘Next’ and ‘Previous’ Buttons

Rating: Low Importance Issue

Upon landing on the homepage, the participant was looking for Offers and Discounts currently available on the website. The participant wanted to flip through the rotating banners because he wanted to skip to the ‘first order discount’ banner, his immediate response was to click on the extreme right because his mental model was expecting a button to change to the next banner. After several tries, the participant realized that there’s no button or clickable are there. Eventually, he figured out that banners can be changed by clicking on the little ‘page indicator’ circles at the bottom of the banners, but as the heat map shows the user spent too much time with clicking the page indicators as they’re too small.

Design Recommendation

Adding a ‘Next’ and ‘Previous’ button on both sides of the banner will really help users to skip through the banners faster and get to the banner they actually want to interact with. The buttons should also be translucent and not opaque so it doesnt hide any important information that the user might have to see. The page indicators at the bottom can be kept as is, since they inform users about how many banners and there and which one is currently being displayed. Although they should not be made clickable if the recommended buttons are added.

Multiple Sign-in Buttons. Redundant ‘My Account’ Menu

Multiple Sign-in buttons. Redundant ‘My Account’ menu

Recommended Design: One Point of Sign-in

Rating: Low Importance Issue

Participant: “Oh, I need to login before adding items to my cart. Oh looks like I’m already logged in. Oh wait, I’m not” When the participant progressed onto the task of logging in, upon reading ‘My Account’ they assumed they’re already logged in, since ‘My account’ in their mental model means will show their account details, which indicates user is already logged in.
The two Sign-in button also throws user off. Since their frst action is to reach for ‘My Account’, 2/3 users took that Sing-in button to log-in. 1 user used the button on the extreme left. Gaze Path also shows that participants do not look at the extreme left button in their natural scan path.

Design Recommendation

Keeping only one Sign-in button will not confuse the users in making the choice between the two. Replacing the menu button label ‘My Account’ with ‘Log-in / Sing-up’ will help users immediately know that they’re not logged in yet and clicking on that menu, they can either choose to login or create a new account. Once the user is logged in, the menu button should say ‘My Account’.

Ambiguous ‘Invalid Username and Password’ Message

Ambiguous Error Message

Recommended Design: Use clear and specific language

Rating: Low Importance Issue

If entered incorrect username or password, the website returns with an error message ‘Please enter a valid username’ and ‘Please enter a valid password’ under BOTH entry field. This is highly frustrating for user, as they are made to believe that they have input both the fields incorrectly, whereas in actuality only the password is incorrect.

Design Recommendation

The error message should be clear and specifc, so that the user knows which credential they need to input again. Replacing the main message with ‘Password does not match the username’, will let user know that they have input ‘either’ (only, one) of the felds incorrectly instead of both (in current scenario).
Furthermore, clearly marking the username with ‘This email account/username is valid’ will let users know that the username is correct. And marking password feld with ‘Please enter a valid password’ will surely let them know that they only need to put the password again.

‘Out of Stock’ Items that are Removed from Cart, are not listed

Heat Map shows participant scanning for removed item

Rating: Important Usability Issue

When an item which was added to cart goes out of stock, then the user is presented with a feedback during the cart review/check out process. The Error message states ‘OUT OF STOCK. REVIEW ITEMS REMOVED FROM YOUR STOCK’ . Our participant stumbled upon this situation and then spend 13 seconds scanning the page looking for the items that went out of stock and are removed from the cart. But the website does not inform the users which items are removed. The user was itritated by it, since it increases their cognitive load as they have to recall by memory what item is missing from the list.

Design Recommendation

If the items go out of stock and are removed automatically from the cart of the user, then at the checkout/cart review page it should be mentioned and listed which item went out of stock. The ‘out of stock’ text can replace ‘quantity’ information, since the user cant interact with it anyway. The item should be clickable though, so that the user can click on the item and fnd similar items from its description page.

Too Fast and out of vision ‘Add to Cart’ feedback popup

Gaze plot shows user couldn’t read any information on pop window before it closed.

Rating: Important Usability Issue

Participant: “Oops! there was something there. I missed it.”

On the search result page with listed items, when the participant adds an item to the cart a small notification window pops up showing the item added to the cart. As the gaze path shows, the participant gets a very brief time to read the notification. Since there’s a lot of text in the pop-up window, the participant is unable to read what the pop information says.

Design Recommendation

The feedback of the item being added to the cart should be somewhere close to their vision, i.e. the ‘add to cart’ button. Secondly, the feedback window should stay on the screen for longer, at least 2 seconds. (currently, it stays for less than a second) and should have a ‘close’ button so that if the reader is used to seeing it and does not want to read it, it’ll embed in their muscle memory to close it or ignore it. Lastly, there should be very less text in the feedback pop up window, only ‘Item added to cart’. Too much of text and user gets confused where to focus and they miss the notification altogether.

No visible ‘Checkout’ button

There is no visible checkout button

Recommended Design: Add ‘Checkout’ to the cart icon

Rating: Low importance Issue

Participant: “Okay last item added. Ummm, do I have to go to the cart to checkout?”

 

After adding all the items to the cart, 1/3 participant looked for a ‘checkout’ button to proceed to checkout. Their mental model stated that the ‘Cart’ button was to view the items in the cart and there would be a more direct path to checking out. Even though the Cart button does take the user tot he checkout page, as the checkout menu is embedded in the view cart page. But the user’s expectations were different, since they were not familiar with Grocery Gateway interface.

Design Recommendation

Since most users are well versed with process of online shopping and cart and checkout system, the interface works fine for the experienced user. But to the more inexperienced users to online shopping or first time Grocery Gateway users, the cart button was not ‘obvious’ as checkout process too. Hence the design recommendation would be to simple add the text ‘checkout’ below the cart button, so that all types of user groups are informed about the affordance of the cart button.
Furthermore, clearly marking the username with ‘This email account/username is valid’ will let users know that the username is correct. And marking password field with ‘Please enter a valid password’ will surely let them know that they only need to put the password again.

Contradictory Delivery Instructions during Checkout

Heat Map shows user spent alot of time contemplating instructions

Delivery Instructions are contradictory

Rating: Important Usability Issue

During the checkout process, Grocery Gateway website presents some instructions regarding placing the order and choosing the delivery time. The instuctions listed arent very clear, and 2/3 participants admitted that they did not undersatand the frst two instructions at all, and they seemed to be very contradictory. The following instruction suggest that you only have 90 mins to place your order, before your time slot expires: “Choose a day and time for delivery. You will have 90 minutes to place your order before your reservation expires”
The second instruction suggests that you have till 7pm to place the order.
“Cut-off times for placing an order for next day delivery are 7 PM (for next morning delivery)”

Design Recommendation

Rephrase the delivery instructions to simpler language and true to the system behavior. Simpler language with clearer instructions will help users process the checkout alot faster. (Participants took about 23 seconds to read the whole instructions and contemplate over it)

Poorly laid out Delivery Instructions Information

Cluttered layout of the information about delivery instructions

Recommended Design: Space out each instruction in seperate line

Rating: Medium Importance Issue

Participants took about 23 seconds to read the whole instructions and contemplate over it. This is partly due to poorly laid out structure of the delivery instructions. In a paragraph format, there are multiple different (irrelevant to eachother) instructions. 1/3 participant did not bother to read instructions at all. On the other hand, 2/3 participants took alot of time to read it. This wastes alot of time for the users and adds to the negative experience. The participants who get overwhelmed looking at a ‘paragraph’ to read might miss out on important information.

Design Recommendation

The delivery instructions information should be laid out point wise in seperate lines. Since the instructions arent related to eachother, it’ll be easier for users to skim through them if they’re well spaced out and in seperate lines.

No Option to Edit Items list at Order Review page

There is no option for user to edit the cart on the Order Review page.

Rating: Important Usability Issue

After going through the entire checkout process of Selecting Delivery address, then Choosing Delivery Window, then Adding Payment options, finally the user reaches the Order Review page on which the user is presented with the list of items in their cart, ready to be ordered. The whole purpose of the Order Review page is for a user to cross-check and if there are any mistakes then rectify it, BUT there is no way for the user to edit the item list (increase the quantity of an item or remove an item). This is very frustrating for the users if they find they have to edit the cart. The only option is to click ‘Continue shopping’ and then the user is taken to the Homepage of GG and from there they can click on the cart and edit it and repeat the checkout process!

Design Recommendation

There should be an option to Edit the Items in the cart, change their quantity or remove them. The price should also reflect the real-time changes as the user edits the cart. This will save alot of time and effort for the user, compared to current site map where the user has to repeat the entire process to make a single change to the item list.

User Can Not ‘Continue as Guest’ after Session Timeout

Cluttered layout of the information about delivery instructions

Recommended Design: Space out each instruction in seperate line

Rating: Medium Importance Issue

If there is inactivity on the GG website for a few minutes, the user is automatically logged out. While it can be a good security measure, it causes a lot of usability issues for a user who’s trying to just browse items as the website does not let the user continue without logging in! To get past this, the user will have to enter the Grocery Gateway website URL in the address bar and start from scratch.

The button ‘Continue Shopping’ throws off users even more, as it suggests that they can continue to browse the site as a guest, without logging in, but the button is really a ‘submit’ button for log-in option and returns the error feedback when pressed without entering the credentials.

Design Recommendation

After the session time out, the users should be allowed to continue as guest as well as login to their accounts. Hence, a ‘Login’ button (which is more aptly named for its purpose) and a ‘Continue as guest’ button is suggested, to remove the barrier for any user to continue browsing on the Grocery Gateway website.

Next Steps

The next steps that can be taken in order to further improve the experience of the website can be summarized as follows:

 

 

  1. Since this usability test involved only three participants, it would be better to recruit approximately 15-20 participants in order to analyse the usability issues in depth and gain more clarity.
  2. The recruited participants should be of different age groups as the ideal users may be of different ages and the usability should be targeted towards improving the experience of all potential customers.
  3. By deploying more participants, there would be identification of more issues along with their severity.
  4. Exploring all possible solutions for the identified problems.
  5. Determination of the correct and most appropriate set of steps to be taken in order to come to solutions that are feasible keeping in mind the various constraints.
  6. After application of the solutions found, another prototype with the improved experience should be created and it should be further tested with more participants after a discussion with the stakeholders, designers etc.
Back to Projects

Art for Change

Art for Change is a non-profit initiative, started by Husain Zaidi in 2019. 

Our Vision 

The artworks created for Art for Change focuses on social and global issues, which are unfortunately ignored by our society. Through my art, I humbly hope to break the stigma around these issues and start a conversation which can make a difference in someone’s life. 

Our Mission 

All the sales generated through Art for Change is donated to a chairty of your choice! Through our combined effort, let us support the charibable organizations accross the globe to help make this world a better place to live.

Download resume