Back
Loblaw's
Digital Experience Redesign
My Role
UI/UX Designer
Researcher
Deliverables
Hi-Fi Prototypes
User Research
Presentation
Team
Aabha Dehpandey
Anurag Daimary
Jargina Pushparanjan
Muritador kareem
Tools
Figma
Year
2023
Project Overview
This project aimed to enhance the digital shopping experience for Loblaws by identifying key areas for improvement and implementing innovative design solutions. Through a combination of user research, wireframing, and prototyping. I explored ways to streamline the customer journey and increase engagement on the Loblaws platform.

Additionally, I incorporated motion design elements to create a more interactive and appealing experience for users. By focusing on usability and aesthetics, this project provided a comprehensive strategy to elevate the online shopping experience for one of Canada’s leading retailers.
Read Detailed Report
The Challenge
As an academic case study, our team was assigned to enhance Loblaw's mobile shopping experience as a way to learn by doing, though we were not contracted or affiliated with Loblaw's.

We identified the core problem as an interruption in the shopping flow, particularly for new users. Initially, users could browse and add items to their cart without creating an account, but when they attempt to check out, they are prompted to register. This sudden registration requirement disrupts the natural shopping flow, leading to frustration.

Additionally, we noticed the item substitution feature—automatically set to substitute unavailable items with similar ones from different brands—was not transparent, often overlooked due to its subtle placement. Interviews and user testing also revealed several potential quality-of-life improvements.

A recurring challenge was the live site’s frequent updates, which sometimes altered or resolved issues we were working on. This required us to adapt our research and, in some cases, even revisited our findings to align with the evolving interface.
How we Tackled it
We adhered closely to the Double Diamond design methodology, progressing through four key phases.

In the Discovery phase, we initiated background and market research, including a competitive analysis of leading grocery brands. Using heuristic evaluations and SWOT analysis, we explored existing strengths and weaknesses in the industry.

Next, in the Defining the Problem phase, we conducted user interviews and developed personas to map the target user journey and task flow, prioritizing issues before crafting a clear problem statement.

In the Ideation phase, we brainstormed solutions, redesigned task flows, and refined the app’s information architecture. We then built wireframes and high-fidelity prototypes, updating the visual style to meet modern standards.

Finally, in the Testing phase, we validated our solutions through user testing to ensure they addressed the identified pain points effectively.
Highlights
//Smooth Scrolling //Text Stagger