Auto-Localization

7 min read
– Role
Senior Product Designer

– Year

2020
– Company
Loblaw Digital

– Responsibilities

UI/UX

Interaction design

Experimentation
Leadership

For June 2019 I joined two Product Growth partners Moe & Raghav, to ideate initiatives that could help increase customer acquisition beyond traditional marketing and promotional offers. Using product growth tactics powered by experimentation, and analyzing quantitative and qualitative data.

One core problem for new customers that stood out to us was the necessity that visitors needed to choose a location to start shopping online. We wanted to align our experience closer to that of a typical ecommerce store – as simple as adding an item to the cart.

Challenge

Alleviate friction by automatically selecting a location

The hypothesis was a simple one, if we use the customers IP address to find and set a nearby store we’ll increase cart starts from new users. Store selection, however, is so foundational to the shopping experience on PC Express. Not only is the order fulfilled in store sharing stock with in-store shoppers, store selection also enables product assortment, pricing, offers & promotions and the cart, the technical implications to changing the flow were profound.

Before committing to invest in the work the product team decided to test the hypothesis with a couple of small A/B experiments. The first, a British Columbian town with a single Superstore, using the test platform, they set a small percentage of new customer traffic to that location automatically. The second test scaled up the first experiment to include more areas with a single store in the nearby vicinity, totalling around 50 stores across the central and western provencies. We observed a 9% lift in carts across both tests and decided to explore the idea further, with programmed logic to accurately predict the nearby store automatically.

We observed

9% increase in cart start rate
To quickly test our hypothesis we ran two inital experiments. Setting the store location for a percentage of new customer traffic using the Adobe test platform for towns and cities across Canada, tested against traffic through existing manual experience (control).
Initial approach

Nobody appreciates a pop-up dialogue

I first articulated the design with the assumption that customers want to be informed about decisions we make on their behalf. Knowing we were eliminating friction later, showing a message when they landed on site informing and asking for confirmation initally felt like a good approach. Using a widget style drop-down to build an association for the user on where they can modify the location, influenced by patterns on other sites. The buttons made the UI passive but gave the customer options to modify location and a pathway to start a delivery order.

The inital design was too disruptive on site load and the density of 
actions created alot of cognitive load

After review with the team I realized that I had made a few core oversights. I’d focused too heavily on the happy path scenario of customers landing on the homepage and made an assumption they want to shop online. Customers could be arriving on site for a range of reasons like viewing the flyer, looking for store information or from promotional material. In hindsight the UI felt disruptive and disconnected from customer intent. Finally I hadn’t properly anticipated other messages and prompts that show up on site load, a cookie prompt that the design system team was working on was in conflict, essentially covering the majority of content when viewing on a mobile device.

Keep tasks contextual to actions
I took all this feedback as an opportunity to welcome the team into my process more. We reframed the experience through the lens of contextualizing the dialogue prompts to specific customer actions. This helped align with their intent and only asked the customer to make specific choices when absolutely necessary, like asking them when they added to cart, if the nearby location we had chosen was where they would like to pick up their order.

Supporting PC Express Delivery

Mid-design cycle our dedicated delivery service was building toward launch and needed pathways to help onboard customers to the service, or give them options to switch from a pickup order. Together with the delivery team we reworked the flows to check for availability in the customers area, with a hand off to delivery via our partners at Instacart or a path back to pickup when PC Express delivery wasn’t available as the service scales up. We revised the design to keep the options clear and the actions explicit so they could move quickly through the experience to get back to their shop.

Although the UI supported our delivery launch, the programmed logic in our initial test to localize customers to their nearest store created issues later in the journey. The tech team wanted to take some time to refactor and improve the code.

Reiterating flows to reset the team

After the problems from our launch experiment and the fact that our project had changed hands a number of different times, it felt like the team had lost the sense of what the experience should be. For example, there was much confusion around what action triggered what specific state in the UI. I took the time, as the development team refactored the code, to improve our flow maps. We walked through as a team to capture any gaps in the experience and gave everyone more confidence and clarity in what we were building.

Using these flows as an artifact for communication helped us have better conversations whilst uncovering some new questions and scenarios.

Broadening impact

At this point we had confidence from promising results that we were helping new customers start carts if they came to shop online. The merge-cart problems from our previous test were noted, from design to product to tech we all saw gaps in the experience after reiterating the flows. We were close, but we believed a few more sprints to address three final gaps would help broaden the impact of the teams hard work. Our next push focused on these core issues:

Locations without online shopping
A number of the store banners don’t offer online shopping through PC Express. When we localize customers, we want their nearest location selected, whether online grocery pickup is available or not. Previously, some customers chose nearby locations that had no shopping capabilty, making the digital shopping experience confusing. We reworked the platform to support add to cart buttons regardless of online shopping capabilty and provided new flows to transition customers from a nearby location with no option to pickup to one that does.

Instore shoppers
A large percentage of our customers shop in-store only, checking the site for weekly flyers and store hours. With the ability to localize to a nearby location, we improved how we present the flyer experience by removing the need to search, taking a step out of the flow. Alongside the flyer we better presented hours and location information for the wellness services we offer in stores and updated each store’s details. In all these scenarios we inform the customer of the nearby store we have set and give them an option to save as their preferred store for next time.

Our output consisted of just a few additional modals but we spent time to work through all scenarios.

Merge cart

The tech team refactored the code to eliminate the merge cart issue. However, we wanted the user to feel more in control of how their cart was managed. To better understand what the experience was and how we wanted to improve it, senior product designer Tiffany Cheng and I did a deep dive into the flows. Our extensive mapping covered changes in location, fulfillment types, order status and cart level size restrictions for delivery. Our output consisted of just a few additional modals but we spent time to work through all scenarios. This aided us in communicating through the complexities of the system while dissecting each interaction.

71.33%
lift in carts (Nofrills)
59.28%
lift in carts (Maxi)
35.42%
lift in carts (Loblaws)

Results

Auto-localization had an incredible impact on metrics across the board. Pre-selecting a location for users clearly removed a major barrier.  We saw an increase in cart starts for pick up, delivery, and marketplace customers across shoppable and non-shoppable banners - with no negative result on orders.

We saw extremely positive results within our core KPIs . Loblaws banner saw a lift in cart starts by 35.42%, Nofrills banner increased 71.33% and Quebec store banner Maxi 59.28%. We also saw a lift in delivery specific carts on Loblaws 81.93% and 78.15% on Maxi. With efficacious results we pushed forward with the rollout across the rest of the banners on the PC Express platform.

Learning

Start with flows & scenarios not UI

Sometimes problems seem small enough that as designers we might jump into hi-fidelity explorations right away. For this project in the beginning I jumped into designing the UI too quickly. Analysing customer scenarios and mapping out the flows, however trivial it might seem, tend to focus us on the core interactions and help identify gaps in our assumptions or understanding. 



Although my first critique was humbling, when I welcomed the team into my process it not only helped reframe the experience for the better but also showed me the importance of these activities as we approach and frame up any design problem.

When the team was rallying to get the project back on track later, after changing hands, flows and customer scenarios became the most powerful and effective artifact that we all leveraged to make our final launch successful.

– Team


Next Case study
Timeslot Selector
All work
View all projects