Project Info

This is a conceptual project that I worked on for PC Optimum's mobile app over a period of six weeks starting in May 2020.

The work completed:

  • Designed a new in-app 'Shopping List' feature
  • Redesigned the digital flyer for an enhanced mobile experience 
  • Added interactive functionality to the flyer allowing customers to 'add' and 'favourite' items directly to their shopping lists

My Role

I was responsible for all aspects of the project, from the initial user research and ideation, through to visual design, prototyping and user testing. The design software I used for this project was Figma.

Note: I am not affiliated with PC Optimum or No Frills in any way.

The Challenge

On April 16, 2020 No Frills' discontinued home delivery and in-store availability of their weekly flyer. Flyers are now available only at nofrills.ca/flyer or in the PC Optimum app. This leaves many No Frills shoppers without their usual resource for planning weekly shopping trips, including writing a shopping list and identifying in-store sales. As a No Frills shopper myself, I found it difficult to navigate the digital flyer, even as a tech-savvy millennial. This inspired my original goal to redesign the flyer for an enhanced mobile experience, but through my research I uncovered other problem areas that required user-centred solutions.


Project Goals

Increase digital flyer engagement through:

  • A streamlined experience that helps customers create shopping lists from the flyer
  • Mobile-friendly flyer navigation

Research: Survey

I began this project by learning more about grocery store shoppers’ thoughts, opinions and behaviours in relation to flyer use. I sent out a survey and had 33 respondents, the key insights were:

  • 60.6% (20/33) of respondents said they use flyers to help create their shopping list
  • 51.3% (17/33) of respondents said they use their phone to create a digital shopping list as opposed to a handwritten list

Research: Affinity Map

Respondents were also asked to comment on whether they have used digital flyers before and if so, to describe their experience. I used an affinity map to organize responses into groups with common themes. Three major themes arose: Viewing/Reading, Navigation and Shopping List Creation

Usability Issues Identified:

Reading: respondents felt digital flyers  are hard to read due to the small type on mobile screens.

Navigation: respondents felt digital flyers are difficult to navigate through; the digital flyers have the same layout as the paper version, therefore excessive pinching to zoom is required. Additionally, flipping through digital pages is not user-friendly.

Shopping List Creation: respondents felt it was difficult to create a shopping list on their phone as it requires switching back and forth between a notes app and the flyer.

Research: Product Testing

I felt it was important to observe people as they use the current digital flyer in order to identify any other usability issues. Since the survey revealed that the majority of respondents use their phone to create a shopping list, I asked 5 subjects to add 3 items from the current No Frills digital flyer to a shopping list in their phone and recorded their times. 

Recorded Times: 32.1 s, 44.4 s, 29.6 s, 30.4 s, 20.2 s 

Key Insights:

  • It took an average of 31.34 seconds to add 3 items to their shopping list
  • All 5 subjects pinched to zoom-in in order to read
  • 1 subject discovered that flyer items could be tapped to show info in a larger text
  • 1 subject looked at the flyer then added all 3 items to their shopping list at once
  • 4 subjects flipped back and forth between the PC Optimum App and their notes app

Ideation: Functionalities

I then began brainstorming functionalities that would help solve the usability issues identified in my research.

Primary functionalities:

  • Vertical scrolling to view flyer items in rows
  • Ability to create shopping lists in the PC Optimum app
  • Add items from the flyer directly to a shopping list
  • 'Favourite' items so they are automatically added to a shopping list each week
  • Search and add items to a shopping list, even if it's not on the flyer
  • Free-type to add items to a shopping list
  • Check off items from users' shopping list as they shop

Secondary functionalities:

  • Share shopping lists with others in order for users to save time by shopping separately
  • Set shopping day for a specific shopping list with an option to auto reset weekly on that day
  • Add photos to a shopping list
  • Settings: notification settings, set sharing permissions, manage favourite items

How the new design meets customer needs:

  • Vertical scrolling of flyer solves navigation issues and ensures zooming in to read is no longer required
  • Integrates the act of flyer browsing and shopping list creation which saves the customer time
  • No need to leave the app for a 3rd party 'Notes' app
  • New features enable customers to enjoy same capabilities as with the paper flyer; alleviates anxiety about no longer receiving paper version

User Flows

After defining certain functionalities that will help customers browse the flyer and create shopping lists, I put together several user flows to visualize their potential thought processes and associated steps while navigating through the app.

Low Fidelity Wireframes

Once I established the functionalities and had an idea of specific user flows, I began to visulaize the interface. Sketching low fidelity wireframes helped to bring some of my ideas to life.

Mid-Fidelity Wireframes

Things really started to take shape when I began turning my sketches into digital wireframes. The font treatment and information architecture was defined at this point.

Prototyping

Once my wireframes were complete I applied a visual design system inspired by PC Optimum's branding. Finally, I created an interactive prototype ready for user testing.

User Testing

To validate my design solutions, I asked 5 participants to complete the following tasks using the interactive prototype:

1.  Add 3 items from the flyer to your weekly grocery list
2. 'Favourite' an item from the flyer to your weekly grocery list
3.  Manage the favourite items on your weekly grocery list: remove apples
4.  Share the list with a friend

Key Insights:

  • It took participants an average of 18.9 seconds to add 3 items from the flyer to their grocery list which is 12.4 seconds faster than when I tested the same task with the current digital flyer (average time with the current digital flyer was 31.34 seconds).

  • 100% of the participants were able to favourite an item from the flyer to their list with a misclick rate of only 0.8%

  • Participants had difficulty finding the 'share' button. The heat-map shows that they were attempting to tap the Weekly Grocery List settings which was incorrect. I originally had the share button on the My Shopping Lists overview page. In order to fix this issue I moved the share button to each specific list.

  • At the end of the user testing I asked participants for their feedback regarding their experience. Three of the participants commented that they would not have necessarily known they were browsing a No Frills flyer due to the PC Optimum branding. This taught me how important visual design decisions are to customer perception and the usability of a product. In order to fix this issue I redesigned the flyer pages with No Frills branding.

High-Fidelity Wireframes

I took what I learned from my user testing and directly applied it to my designs. In addition, I further developed the visual design system by incorporating more elements from the current PC Optimum and No Frills branding.

Using Format