An eye tracking prototype test for an e-commerce platform

The objective of this illustrative study was to delve into the effectiveness of design elements, such as layout and icons, in guiding user navigation and enhancing the checkout experience. By testing the app prototype and evaluating usability insights before building it fully, we aim to save engineering time and resources from going to waste.  

Methodology and study design

This study was conducted remotely using Tobii UX Explore, with participants invited by email and taking part wherever they were. We used the 'Think Aloud' method, gaze recording, and Figma prototyping to explore and innovate around designing a new e-commerce site. This evaluation was conducted through the eyes of six participants, who explored three key areas: the landing page layout, the icons on the product page, and the checkout page.

Landing page problems 

The landing page serves as the 'storefront' of an e-commerce platform. It sets the tone for the shopping journey, and its design can significantly influence the user's first impression. 

Surprisingly, our study found that some design elements caused participants to liken the site to a social media platform, such as Pinterest, rather than an e-commerce platform. The landing page lacked elements that gave it a commercial feel – such as displayed costs, product ratings, and deals. 

Navigating the checkout 

The checkout process is a critical junction where an enjoyable shopping experience can either culminate in a successful purchase or result in a frustrated customer abandoning their cart. Our findings showed that users gravitated towards familiar elements at checkout. 

Users looked for clear information on delivery fees, the total cost of all items in their basket, and coupon redemption options. One participant even revealed their implicit expectation for delivery information placement based purely on their gaze pattern. 

The importance of prototype testing 

This study underlines the importance of familiarity and clear commercial indicators in e-commerce design. As users' implicit expectations steer their online shopping journey, intuitive design that guides the user seamlessly from the landing page to the checkout page can be the difference between a visitor and a customer. These insights pave the way for improving user experiences, leading to more engaging, user-friendly, and successful e-commerce platforms.