Overview
I've was the design lead on the PC Express iOS and Android apps between January 2018 and March 2021. The app averages 4.6 stars from over 100k ratings.
Taking on the role of design lead for a team of three, I was tasked with delivering multiple new strategic initiatives while also supporting the ongoing development of business-as-usual features. Please note that the stories below are intentionally brief, if you'd like more in-depth case studies please contact me.
About pC express
PC Express is Loblaw Companies Limited's flagship online grocery app. It allows millions of Canadians to place a grocery order online from premium, regular and discount stores. Customers are also able to use the app to Shop & Scan as well as order products to be shipped straight to their homes from third-party sellers.
My Role
I was the overall design lead for the apps, being the primary point-of-contact with Loblaw Digital's product owners, developers, and design director.
I helped to:
Overall goal
Build the best grocery experience in Canada
Toolkit
- Figma
- Sketch + Abstract
- Usertesting.com
- Adobe Analytics
- Principle
Creating a Design System
Problem
Over five years, Loblaw created a multi-store experience in the app. Shopping each 'store' gave customers a different brand experience. This meant that while each store could have their own look and feel in the app, as a design team we were maintaining four different style guides and the overall PC Express brand was disconnected from the store brands.
Maintaining designs across four brands was a real pain
Approach
Following the principles of Atomic design, I coached a junior designer in the creation of a single design system for the PC Express app.
Before defining exactly how our design system would work, we had to convince the client that this was worthwhile work to be done. We created a business case to explain exactly how having multiple different brands led to a disjointed experience for the customer.
Explaining how the existing brand strategy for the app was broken
Once the client was convinced, we created a set of underlying principles for our design system, including platform specific differences for iOS and Android, and began converting all our designs to the new brand. This involved close collaboration with developers and product managers to set expectations on what defines a component and the extent of it's customizability.
An example of the button component in the design system
Result
- Hours saved per designer per sprint by not having to convert designs to multiple styles
- Thousands of lines of code removed related to mapping automatically between multiple styles
- A single, unified brand identity for customers to know, love, and understand
Learnings
- The easiest way to persuade stakeholders was to make the design system relatable to their area of the business
- Although a design system is way more than styles and colours, this was the easiest way to start the conversation
- Designers had a hard time coming to a conclusion on design system components, if I were to do it again, I would pre-define a decision maker
Establishing a design process
Problem
When I started the PC Express project, it was clear that although the design team was well-respected and able to 'get the job done', there were no formal processes in place. The design team were considered a 'nice to have' at meetings, there wasn't much visibility into their work, and it wasn't clear how to task them.
Approach
I worked to understand what types of processes the design team followed and how we could add more value for the client. I introduced new rituals for the team to follow without adding significant overhead:
- Design Kanban Board
I created a Kanban board on JIRA to track all design task progress across backlog, in design, in review and done. These tasks were directly linked to the overall story being developed to ensure traceability and designers were also encouraged to add requirements and acceptance critera as required. 
- Design Intake
To help manage and filter the amount of requests the design team were getting, I introduced the idea of a 'design intake meeting' between the design and product teams. Any member of the team could attend this fortnightly meeting and introduce a request or brief they had received from anyone in the business. For larger asks, I also introduced a design brief template that had to include customer benefit, business goals and key problem to be solved.
- Exploration Time
I introduced the practice of dedicating some time per sprint to explore ideas we, as designers, felt would be valuable to the product. There would be a showcase every two weeks of what each designer came up with, giving everyone the opportunity to riff on ideas.
Result
- A robust process put in place for design requests from stakeholders
- Minimal disruption to tasks that are already in-sprint, allowing designers to focus
- Extremely happy client with a repeatable model to be used in other projects
Learnings
- Introducing new rituals slowly over a period of time was the best way to make them 'sticky', introducing too many new concepts at once shut people down to the new ideas
- When communicating changes like these with the client, it helped to communicate the benefits early
Launching Ship-to-Home
Problem
Having established a strong grocery pickup experience, Loblaw wanted to allow third parties to make use of their platform to offer customers a wider assortment of products - known as Ship-to-Home (commonly referred to as an online Marketplace). Ship-to-Home had to sit alongside the existing grocery pickup experience without confusing customers and it was up to me and my design team to figure out how to do that.
Approach
We identified a number of questions to answer right from the start:
- How do we leverage our highly valuable loyalty programme to attract customers to Ship-to-Home?
- How do we stop Ship-to-Home from becoming an intrusive and annoying experience for customers who just aren't interested in it?
- How can we create a usable experience for products that aren't usually in our assortment? e.g. Home & Living, Pets and Baby
- What value can buying Ship-to-Home offer existing grocery customers?
Conducting a cart sort exercise where customers were asked to group products
A snap from a research findings report
I led several research sessions including interviews, card sorts and concept testing that helped to answer many of our original questions. We then got to designing the customer facing solution.
Our solution to showing Ship-to-home items while still maintaining a strong grocery section
Result
- A scalable solution that differentiates 3rd party products but doesn't interrupt existing experience
- Insights into a future roadmap that continually improves Ship-to-Home
Learnings
- One of the first things we did was to embark on very open-ended exploration; while this was useful to explore, it didn't help set realistic expectations of what was actually feasible to build. In the future, I would spend more time talking about feasibility during the initial phases of a project.
- It became clear that despite what the design team said, there were a group of stakeholders who had a very specific view of what this Ship-to-home should do and how it should behave. Ultimately, this became a tug-of-war of requirements and was often based on seniority within the company. In the future, I would want to conduct stakeholder interviews at the start so I'm able to factor in multiple opinions.
Building a new homepage
Problem
The existing PC Express homepage was very limited. It offered a few basic functions and only a single carousel of products. Given that 94% of website first impressions are design related, we saw an opportunity to improve our homepage to capture a larger number of first-time customers and deliver a more personalized experience for return customers.
The existing homepage was very limited and wasn't particularly useful for customers
Approach
I led a team of two designers to create and execute a homepage redesign strategy. This included:
- Creating a set of design principles for the homepage
- Planning and running generative and evaluative research
- Scoping and evaluating feasibility of new features with tech and ops teams
- Creating visual designs and prototypes
Workshop with stakeholders to define homepage design principles
Testing a prototype with customers
Result
- A full homepage redesign, tested with customers in about 2 months
- Research insights to help fuel other areas of the business unrelated to homepage
- Principles to hold true for any future homepage improvements
Final homepage design
Learnings
- This was very much a design-driven initiative and although we had a lot of support from product and development, we didn't account for their roadmap and backlog. Although the design team finished up this work in a couple of months, the wait for development to get started ended up being over 4 months. In the future, I would look to understand how to time work better so the gap between design and development is as small as possible.
- Our first workshop with other teams to set design principles was really energetic and fun. After this, we didn't really have any other collaborative working sessions with other teams. In the future, I would look to have these more often so it feels less like design is controlling large parts of the creative journey.
Back to top
