top of page

Loblaw Shop by Aisle Page

Role: UX Designer
Timeline: 1 Day, Hackathon
Tools: Figma, Photoshop, Google Meet
Platform: Android


Overview: Our interdisciplinary team participated in a one-day hackathon to reimagine the future of online grocery shopping. Through user research, iterative design, and testing, we enhanced the accessibility and user-friendliness of the Loblaw search page. Our improvements, such as visual cues replicating in-person shopping, specifically catered to individuals with memory difficulties. This approach aligned with Loblaws' commitment to accessible online shopping experiences. The resulting landing page reflects our iterative process, ensuring a superior user experience while supporting Loblaws' accessibility goals.

croppedfriends-home-concept-with-copy-space copy.png

Method

For this one-day hackathon, we implemented the Double Diamond process by conducting rapid user research to understand the pain points of online grocery shoppers. We then focused on addressing the specific challenge of memory difficulties, ideating and prototyping solutions. Through rapid iterations and user testing, we refined the design of the Loblaw search page, culminating in a high-fidelity prototype that showcased user-friendly and accessible features. Despite the time constraints, the Double Diamond process enabled us to uncover insights, generate innovative ideas, and rapidly iterate on our design to deliver an impactful solution.
remindme blue wordmark.png

Problem Space

30% of items are forgotten by the average user. Consumers often choose to shop for groceries by recalling their planned purchases from memory, by physically locating the products.
70%
30%
30% of items are forgotten
by the average user

Persona

During my user research, I discovered that users faced challenges in remembering all their grocery shopping items, which informed the development of personas. Avneet's pain points revealed her struggle to remember all the items she needed to buy.
persona.png

How Might We...

How might we imagine the future of online grocery utilizing innovative digital solutions?

Sketches

Using Loblaws' existing UI as our starting point, my teammates and I sketched multiple iterations of the Search by Aisle page. To make design decisions, we held a meeting and employed dot voting to select the most favorable components. Ultimately, we opted for a long-scroll Aisle page that mirrors the organization of aisles in a physical store. This approach enhances users' ability to recall their grocery items and explore new items within specific sections. Once the sketch was finalized, we proceeded to create a wireframe of our design.
Sketch
UX-3.jpg
Wireframes
page.png

Hi-Fi Mockup

transparentbackground.png

Key Learnings

1

It's important to be able to communicate in a way that is accessible across teams

2

Leverage the strengths of team members, particularly when faced with time constraints

3

Designate a team leader to resolve any disagreements efficiently and prevent excessive time consumption

4

For projects with tight timelines, prioritize simple yet effective concepts

Measuring Success

To evaluate the success of the new Aisle search page, we will use the following metrics:
​
  • A/B testing: We will conduct A/B testing to compare the overall purchase rates between two groups – one using the new Aisle search page and the other using the previous version. This analysis will provide insights into the impact of the new design on driving increased purchases.
​
  • We will measure the conversion rate of users who land on the Aisle search page and proceed to make a purchase. This metric will help assess the effectiveness of the page in converting visitors into customers, indicating its contribution to the overall success of the online grocery shopping experience.
​
  • Time on page and bounce rate: By analyzing the average time spent on the Aisle search page and the bounce rate, we can gauge user engagement and satisfaction. A longer average time on page and a lower bounce rate will indicate that users find the page engaging and valuable, enhancing the likelihood of their exploring and discovering new items.
graphicicon.png

Future Considerations

In considering future improvements to the current UI, there is an opportunity to build upon its impressive aesthetics and cleanliness. By incorporating additional features, we can elevate the user experience to the next level. One exciting enhancement to explore is the addition of a filter section that enables users to click on an aisle and automatically filter the displayed items based on applied dietary or other filters, providing a seamless shopping experience for users with specific preferences.

Additionally, allowing users to set their preferences within the filter section or their profile would further enhance convenience. By saving their preferences, users can enjoy a personalized and efficient shopping experience during future visits. These thoughtful considerations have the potential to not only elevate the UI but also provide users with enhanced functionality and tailored shopping options.
bottom of page