Order Dashboard

10 min read
– Role
Product Design Lead

– Year
2022
– Company
Loblaw Digital

– Responsibilities
UI/UX
Interaction design
Product strategy
Leadership

Through the pandemic Loblaw's online grocery service PC Express saw extraordinary demand. Triple revenue growth allowed us to scale our service in many exciting ways. It also exposed and highlighted the gaps in the offering when compared to our direct competitors. A key area for improvement was customer communications. Our inconsistent communications were described by customers as perfectly adequate or totally lacking.

Examples of mobile designs for the noname website alongside famous noname product packaging for products like peanut butter and tomato sauce
Challenge

How might we improve communication on PC Express?

With such an ambiguous problem our product team approached discovery work by mapping out an information and communication journey. I worked with my product lead Nina Coutinho to analyze how we communicate across the key stages of the shopping journey on PC Express. We examined our customer flows and journeys and outlined the technology, infrastructure and processes that enable communication touchpoints at each stage.

In partnership with Jessica Pavia and the human research and insights team, we connected this to a pain-point analysis that surfaced customer verbatims from our post transactional OSAT (Overall Satisfaction) survey and key themes from our chatbot data.

We examined our communication touchpoints across the customer journey with our research team helping outline a customer pain-point analysis.

The pain-point analysis gave us three core areas of opportunity to prioritize.

Realtime updates
Over 5,000 customer responses mentioned not receiving the right communication at the right time. This made up 22% of all responses analysed.

Substitution Preferences
4,313 comments touched on giving customers the option to set substitution preferences that could be shared with the store before placing an order. This made up 19% of the comments in the analysis.

Inconsistent pre-arrival phone calls
Customers rely on pre-arrival calls from the store to inform them of substitutions and expect a call to clarify useful information about their order. We saw 4,128 comments (18%) that related to issues with a lack of clarity about substitutions or a complete lack of pre-calls.

Flow showing the six step process for adding items to cart
This exercise was inspired by Airbnb’s Brian Chesky's 11-star Experience framework.

Ideating by looking back and forward

After walking cross-functional stakeholders through our communications touchpoint journey and the key opportunities from our pain point analysis we used a couple of distinct workshops to ideate further.

Retrospective analysis.

This workshop interrogated our core themes through the retrospective lenses of what we are currently doing, what is working and not working, what have we tried before and what would we like to do.

Five and ten-star experience exploration.

I led the development of narratives of a five-star experience and a ten-star experience for our colleagues and customers with cross-functional partners. A five-star experience should be somewhat achievable at the time of exploration with the ten-star experience should be intentionally aspirational to help the team push thinking beyond current constraints or inertia.

Examples of mobile designs for the noname website alongside famous noname product packaging for products like peanut butter and tomato sauce

My design partner Mengxu Zhao developed an incredible competitor analysis where we learnt what key innovations industry leaders are using to keep their customers informed.

Our competitor analysis, highlighted best-in-class delivery apps like Uber Eats, Instacart and Doordash as services that keep customers well informed of the status of their order with high-touch post-order communications from checkout to pickup or delivery.



We asked ourselves how this comes to life for our service and how we might present a vision for an improved post-order experience?

Concept cars are produced by automotive manufacturers to showcase new styling and/or new technology, whilst providing a platform to gauge customer interest.

Showcasing a vision with an experience concept car

The experience concept car acts as a way to rally the team around a hypothetical experience of connected ideas. Although similar in output, embracing the spirit of the concept car separates them from a prototype. Prototypes usually consider constraint and feasibility, including flows closer to that of a production-ready experience. Teams may often call these exercises and artefacts Design Northstars, but personally, I’ve found that this gives them too much directionality and expectation. An experience concept car is malleable and bespoke, an exploration of ideas that likely need to adapt to make it into production and reach scalability or may not be feasible at all. It helps prescribe a proposed future vision grounded in research or trends that we have observed.

An experience concept car is malleable and bespoke, an exploration of ideas that likely need to adapt to reach scalability or may not be feasible at all.
Examples of mobile designs for the noname website alongside famous noname product packaging for products like peanut butter and tomato sauce
The process starts with a customer narrative and high-level wireframes, this intentionally helps envision the type of experience without designing screens. I used this to get buy-in to the approach and articulate our thinking.

With our focus on improving post-order communications, I knew I needed to connect a multitude of ideas and features into a single cohesive experience that we could validate with customers to understand value and what impact we might have on our operations team. I believed that an order dashboard customers could visit to get information about and make updates to during the process of placing and then receiving their order, would help keep our customers better informed and control of the process. It would provide potential solutions to our three core areas of opportunity (Realtime updates, improving substitutions and inconsistent pre-arrival phonecalls).

Prototyped Features

Testing the concept car

Like a concept car that does a scheduled tour of reveals at auto shows we wanted to get our concepts in front of customers to gauge reactions. Working with Design Researcher Eve Cuthbertson we developed a plan to explore the experience with customers through a series of moderated interviews.


We had two core learning objectives:

  • Assess comprehension of the overall post-order dashboard experience for a pick-up order.
  • ​Gauge how much control over and communication from their post-checkout experience customers want.

We spoke to 17 participants in hour-long concept evaluation interviews. We also included conversations with 2 Fable participants, to get feedback on how folks using assistive technologies would navigate the experience.

Key insights

Order status is essential to the dashboard; however, must be visually highlighted to drive more value.

Customers appreciate notifications that provide direct value, but the best time for engagement is highly personal and situational.

Surprisingly self-serve substitutions in order review were unanimously preferred to 2-way communication​

Customers appreciate notifications that provide direct value, but the best time for engagement is highly personal and situational.

Ranking our tested concepts against highest predicted value to the customer helped us prioritize MVP features.

Paring up our qualitative feedback with the volume data from the quantitative data used to develop our pain point analysis we were also able to loosely rank the concepts according to the highest predicted value to the customer. This helped our product partners better understand how to prioritise features into our plan to build an MVP and help tech investigate key architectural changes needed to deliver the foundation of order dashboard experience.

Examples of mobile designs for the noname website alongside famous noname product packaging for products like peanut butter and tomato sauce
We launched order dashboard across both mobile and web platforms with cross-functional partners committing to a design-focused roadmap.

Scaling to launch

Our extensive research and tested concept car led to a design-focused roadmap embraced by leadership and engineering partners. I adapted the concept car’s patterns for the web, coordinating a new transactional email journey with our digital team and developing core experience designs for our iOS app. This phase refined the designs for various flows, cross-platform interactions, and edge cases. 
Collaborating with engineering, we created new backend services to enhance post-order communication and features.

We launched the web version in late 2021 and the iOS app in early 2022. Order dashboard has acted as a catalyst to scale new features to improve the post order experience, like customer check-in, sustainability & reusable bagging options and delivery driver tipping.

The frequency of communication is helpful without going overboard. Important out-of-stock or substitution notifications are well executed.
– Competitive analysis sentiment H1 2022
Improved
customer sentiment toward communications captured in an independent competitive review

Results

In our 2022 competitive review we improved our ranking in communications with customer sentiment stating that there was both improved consistency and a better sense of feeling informed. Customers also stated that communications integrate seamlessly into adjusting the order. As communication scores have trended upward, committing to scaling our vision will help us continue to improve. To continue to evolve the order dashboard other designers have continued to shape the vision with further iteration. Giving customers more control and less reliance needed on pre-calls with self-serve options like substitution approval, order rescheduling and push notifications. 


Continued Iteration

Arrival check in

Launched 2022 – Design by Adrianna DeVries

Bagging Preferences

Launched 2023 – Design by Max Romanoff

Points redemption

Launched 2023 – Design by Daniel Park

Substitution Management

Launched 2024 – Design by Max Hu & Max Romanoff

Learning

Championing an experience led MVP.

From initial research and strategy all the way to prioritisation and execution, being able to lead a human-centred design driven approach to our roadmap was incredibly fulfilling. Taking learnings from research into a visionary prototype that could be validated and tested with customers gave leadership much confidence in what our design team wanted to prioritise. It helped me understand how better to take an ambiguous challenge from 0-1. Finally, rather than letting business needs or technical constraints define scope of an MVP, we aligned and rallied the team around an ideal experience and in turn setting a solid bar for quality for a transformational experience to the customer journey.

– Team


Next Case study
Auto Localization
All work
View all projects

Order Status

The order status page is the foundation of the overall experience with details and updates as the order passes through the stages of the post-order journey. It also acts as an anchor page to help customers make specific actions at different points in the journey. The statuses are also reflected on the app homepage in a condensed component that can drive customers to their order status page.

Add items to order

After placing their weekly order, customers often have a number of days to wait until they pick up, during this time they can update the order until our colleagues start shopping. I designed a streamlined search and browse experience to give customers the ability to quickly add new items right from the order status page. I combined this with helpful notification reminders to give customers a quick prompt to add anything else they might have missed before our team starts shopping.

Push notifications

We wanted to add push notifications to the app as a way to communicate real-time updates. The notifications adapt to each stage of the post-order journey and help to launch time-based actions, like choosing and reviewing substitutions, prompts and reminders and messaging.

Customer Check In

When arriving at the store customers are asked to phone and give details of the parking space and their order. The store phone line can get backed up and busy times and customers are left on hold. Arrival Check In allows the customer to deliver this information from their device. This more accessible way to let the store know they have arrived and where they are parked can also be measured via an instore dashboard that gives colleagues detailed information on orders to be loaded and current customer wait time.

Arrival Detection

A clean handoff makes the pickup experience feel seamless and convenient. Wait times grow as customers arrive all at once and our runners at the store are not adequately prepared. Arrival detection explores how customers can give stores an expected arrival time with permissions and location services. Helping colleagues prepare their order for handoff ahead of time as the customer sets off for the store.

Order Review

Inconsistent pre-arrival phone calls contribute heavily to customer dissatisfaction. As stores get busier the overhead to call every customer gets more burdensome and often customers are not always available or in a position to answer a phone call. We wanted to test if we could automate this process by giving customers an open window to deliver approvals on their selected items before the order is staged for pickup or delivery. For colleagues we could reduce the need for a pre-arrival call freeing up labour for picking as well as giving them adequate time to do a quick clean up on the order before the customer arrives with direct feedback.

Two Way Communications

Using the foundation of order status and push notifications Two Way Communications provides more transparency into the picking process. The direct connection to the colleagues picking their order gives customers more control over substitutions and preferences on items like produce. Colleagues are empowered to improve customer satisfaction.