Overview
I led a design team to create a store locator that could be used across any Loblaw site. The solution had to set a framework with best practice that teams could follow while still being customizable to specific business needs.
My Role
I was the design lead for the project, guiding and mentor two junior product designers. This was my first experience leading a fully-remote team (due to COVID-19).
I helped to:
- Scope the initial project with client and Deloitte teams
- Source a design team with UX design, visual design and research skills
- Provide feedback and guidance on wireframes, visual designs, research and accessibility
- Run post-MVP scoping sessions with the client and sell follow-on work
Overall goal
Create a usable store locator that works for all Canadians
Toolkit
- Figma
- Usertesting.com
- Adobe Analytics
- Storybook
It's not as easy as you'd think
Problem
Over the years, Loblaw Companies Limited has made a huge number of acquisitions in retail. While this has seen their business skyrocket into the homes of millions of Canadians, it's also left them with a huge number of online customer-facing websites and apps to support. A key component to any online business with a significant brick and mortar presence is an effective store locator. Without this, customers who are uneasy about purchasing online have no other channels to purchase from. Loblaw wanted to build a store locator that could form a basis for any existing and future retail business that needed to utilize it.
Approach
This project had extremely short timelines, only eight weeks in total for design. I worked with project leadership to create a design team plan that included discovery & ideation, wireframes, visual design and two rounds of usability testing. The plan included two full-time product designers working in a staggered pattern as well as oversight from me. This made it financially feasible for the client to take on a design team of three.
I started by analysing existing data on store locator use and co-creating a core user flow with another designer. Analysing existing data helped us understand what existing Loblaw customers found were the most valuable features of a store locator. This led us to three core user needs; finding store opening hours, getting driving directions, and being usable on a mobile.
Using existing data, we hypothesised what the core user flow should be
Me and my team also captured many of the existing store locator sites the client had to understand if there were any themes running through them.
The existing store locator designs were a bit of a mess
Using data, our core user flow, and competitor scan we designed and usability tested a set of initial low-fidelity designs.
Low-fidelity wireframes that were tested with users
The testing I led had to be quick given the tight deadlines of the project. We went from creating a test plan to having a findings report in a week. This included writing a script, recruiting eight participants, analysis and write-up of insights.
A participant looking at store details during usability testing
Building inclusive products during a pandemic
As a web app, the enterprise store locator had to meet strict accessibility standards for 2021 set by the Ontario Government. I worked with the Loblaw Accessibility Director to create an approach that included testing our product with Fable, a Toronto-based company with remote access to a huge community of people with accessibility needs.
Creating a keyboard tab-order flow for screen readers
Early remote testing with a person who is partially sighted using the Fable platform
Mapping out the future of store locator
We managed to design a MVP version of the store locator pretty quickly so we worked with the client to understand what the next 6-12 months looked like for them. I encouraged the team to create a set of enhancement concepts that spoke to this which, at the time of writing, is facilitating on-going discussions about extending our team on the project.
Getting the client excited about future possibilities
.png)