T&T Supermarket
Click & Cart
01 Overview
Rethinking the Online Storefront
At the onset of the pandemic, I was brought in as the lead visual designer to spearhead the redesign of a grocery giant’s e-commerce platform. With staffing shortages in physical stores, the company needed a compelling online shopping experience to accommodate the surge in digital consumers. The goal was to modernize the outdated platform, enhance usability, and increase customer engagement and sales.
Key Tasks
User research
Front-end Design
Information Architecture
UI &UX design
Content Creation
Role
Lead UX
Visual Designer
Project Type
UI/UX Design
Timeline
3 Months
02 Project Goal
High-Level Statement
Design an intuitive and engaging online shopping experience that improves usability, fosters customer trust, and increases online traffic and sales in response to pandemic-driven demand.
03 Challenges
The Struggle Was Real
Outdated Platform
The existing e-commerce website was not optimized for modern usability standards, leading to customer frustration and high drop-off rates.
Pandemic Demands
With physical store staffing shortages and increased reliance on digital shopping, the platform had to scale rapidly to accommodate a surge in online traffic.
Low Usability
Customers struggled with confusing navigation, complex checkout processes, and an unresponsive mobile experience, leading to abandoned carts and lost revenue.
65%
of users in usability tests struggled with navigation, highlighting friction points that needed urgent redesign.
40%
of customers abandoned carts due to checkout inefficiencies, prompting a streamlined checkout flow.
50%
surge in mobile shopping revealed that the existing site failed to meet mobile expectations, necessitating a mobile-first approach.
30%
of competitor platforms emphasized personalized recommendations, influencing our feature prioritization.
04 Research
Understanding the user
To understand user pain points, I conducted a multi-phase research process. This included moderated usability testing with a diverse group of participants, in which users were observed as they navigated the existing platform, allowing us to pinpoint friction points in real time. Additionally, I conducted structured customer interviews to gather qualitative insights on shopping behaviors, pain points, and feature expectations. To supplement these findings, I performed a competitive analysis by evaluating industry-leading e-commerce platforms, benchmarking best practices in navigation, personalized recommendations, and checkout flows. These research methods provided a well-rounded foundation for data-driven design decisions.
04 Research
Visual Engagement
Research indicated that users responded well to visually distinct promotions, leading to the design of high-impact banners, motion-based callouts, and AI-driven product highlights to enhance engagement.
Mobile-First Optimization
Usability tests highlighted mobile friction, leading to redesigned touch interactions, intuitive mobile menus, and a responsive checkout process.
Streamlined Navigation
Testing revealed that users struggled to find products, so we simplified categories, adjusted filters, and introduced predictive search suggestions.
05 Key Learnings
33%
increase in website traffic within the first quarter post-launch.
30%
improvement in user satisfaction due to enhanced usability.
24%
growth in online sales, directly addressing the pandemic-driven surge.
27%
increase in repeat purchases, strengthening customer loyalty.
06 Result & Impact
Design Solution
We implemented a modernized UI with an accessible colour palette, ensuring contrast compliance for readability and usability. We refined typography with scalable fonts that improved legibility across all devices, and introduced a structured visual hierarchy using clear call-to-action buttons, whitespace optimization, and dynamic content placement to guide users seamlessly through the shopping experience. Additionally, we incorporated interactive elements, such as hover states and micro-animations, to enhance user engagement and reinforce intuitive navigation.
06 Result & Impact
Thanks for reading
UI/UX Design
T&T Supermarket