Redesigning the Hooked on Phonics Checkout Experience to Build User Trust and Reduce Friction
This case study explores how my team uncovered and addressed major usability challenges in the Hooked on Phonics online shop. While the platform supports browsing, cart management, and checkout, our usability and eye-tracking research revealed that users often felt constrained, confused, and slowed down by missing controls and an outdated checkout experience.
Product Designer, UX Researcher
15 Weeks
Figma, Tobii, VWO,
Private Panels
Shriya Chipde, Rex Fukuchi, Claire Jen
OVERVIEW
Hooked on Phonics is a commercial brand of educational materials offered through a subscription model. The current shop's checkout flow had never received a major update and fell short of modern e-commerce standards, resulting in known pain points like high cart abandonment, high bounce rates, and poor mobile usability.
The goal of this research project was to measure where attention drops off and where users hesitate, allowing the team to deliver a prioritized set of improvements that align with user expectations, reduce friction, and ultimately increase conversions for one-time and add-on purchases.
The goal of this research project was to measure where attention drops off and where users hesitate, allowing the team to deliver a prioritized set of improvements that align with user expectations, reduce friction, and ultimately increase conversions for one-time and add-on purchases.
A Powerful Product, An Outdated Experience
The Hooked on Phonics shop was creating friction for users trying to complete a purchase, preventing them from moving efficiently through the flow.
- Friction & Drop-off: High cart abandonment and bounce rates indicated users were struggling to complete the final steps of a purchase.
- Trust and Usability: Limited clarity, poor mobile usability, and a lack of modern trust signals discouraged users from completing higher-priced purchases.
- Missed Revenue Opportunity: The friction limited the potential for growth in one-time and add-on purchases beyond the primary subscription model.
Our Hypotheis
We believed the lack of clarity, flexibility (e.g., editing cart items), and a dated visual design were creating high interaction costs and cognitive load that pushed users to abandon their carts.
THE GOAL
Deliver a prioritized, realistic set of improvements to the checkout flow that increased user trust, reduced friction, and ultimately boosted conversion rates for one-time and add-on purchases.
THE PROCESS
How We Combined Eye-Tracking, Moderated Testing, and Real User Behavior
We began with a team alignment session and reviewed business goals:
- Identify friction in the cart-to-checkout journey
- Understand trust signals and drop-off causes
-
Evaluate whether the interface meets expectations for a modern e-commerce experience
We selected eye-tracking usability testing as our core method to uncover not just what users said — but what their eyes revealed.
Methodology Overview
To surface both cognitive and behavioral friction, we used:
-
Tobii Pro Eye-Tracking
-
7 in-person usability sessions (4 mobile, 3 desktop)
-
6 core tasks covering browsing
adding editing checkout
-
Think-aloud interviews
- SUS (System Usability Score) survey
-
VWO click and friction maps
My personal focus included co-designing the research plan, running sessions, and analyzing data across desktop and mobile.
Task Design + Pilot Testing
We designed seven realistic shopping tasks for participants, including locating grade-specific learning kits, adding and removing items from the cart, adjusting product quantities, and applying a coupon during checkout. We piloted the test script internally to refine the task wording, ensure clarity, and confirm the flow worked smoothly with the eye-tracking setup.
Synthesizing Findings
Our team annotated each session independently and then triangulated patterns. I contributed to clustering findings into four core themes:
-
Inefficient and inflexible cart modal
- UI design choices reducing readability and efficiency
- Outdated checkout layout harming learnability
-
Poor product findability on the All Products page
We then aligned these themes with visual evidence from gaze maps, heatmaps, and user quotes.
WHAT WE FOUND
A Checkout Experience That Felt Rigid, Outdated, and Hard to Navigate
We crafted a user journey map to depict what our seven testers experienced while using the website.
Let’s look at what our team found!
01. Redesign the Cart Modal for Control and Clarity
Users expected more visual indicators and control over shopping cart functions.
Users expected more visual indicators and control over shopping cart functions.
- 6/7 SUS responses flagged efficiency issues
- Users attempted to click outside the modal to close it
- Many searched for absent “+ / –” quantity controls
- Eye-tracking showed long fixations searching for editing options
VWO click heat map show dead clicks outside of pop up.
SOLUTION
Rethinking the Cart Modal (Clarity + Controls)
02. Increase UI Readability & Visual Consistency
UI Design Reduced Readability and Slowed Users Down
UI Design Reduced Readability and Slowed Users Down
3 users found it hard to find the ‘Remove’ button and took other routes to remove target products.
Low-contrast buttons and thin, hard-to-read text reduced usability.
CTA position inconsistency across pages caused confusion
SOLUTION
Improving Visual Hierarchy & Readability
03. Modernize the Checkout Page Layout
Checkout Page Layout Felt Outdated and Hard to Navigate
Checkout Page Layout Felt Outdated and Hard to Navigate
Problems included:
- Coupon field hidden behind a click
- Return-to-shop link buried at the very bottom
- Users clicked the logo expecting it to navigate back
- Lack of express checkout options like Apple Pay
Users had trouble finding entry fields in expected locations
VWO heat map show clicks on logo, indicating the users trying to navigate back to the product page.
Checkout flow is missing other preferred payment methods
- 3/7 users mentioned Apple Pay as a way they would prefer to purchase items on HOP shop
SOLUTION
Modernizing Checkout for Today’s Shoppers
04. Improve Product Findability
Product Findability Suffered From Long Titles & No Filters
Product Findability Suffered From Long Titles & No Filters
Users relied heavily on titles to differentiate products but struggled with:
- Long, inconsistent product names
- Lack of filters or sorting
- Difficulty identifying age ranges
- Confusion between products with and without app access
Users expected clearer filter options
VWO click map also show relying on the filters to find products.
Users heavily rely on product titles when navigating.
(Tobii Heat Map)
SOLUTION
Enhancing Product Findability With Filters + Search
CONCLUSION
How This Work Changed My Approach as a Designer
This project sharpened my ability to merge behavioral research with interface-level design improvements. Through eye-tracking, I learned how to identify not just what slowed users down, but why they hesitated, misread, or misunderstood elements.
As a Product Designer & UX Researcher, I strengthened my skills in:
- Running moderated sessions
- Synthesizing gaze and click data
- Creating research-backed redesigns
- Aligning UX issues with business goals
- Communicating insights through a compelling narrative
We presented our findings to the Hooked and Co. team in a final research presentation, supported by eye-tracking evidence and annotated design recommendations.
The team responded positively to how clearly the insights mapped to real user behavior and noted that many of the pain points we identified aligned with their existing concerns about the checkout experience.