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
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.
On April 16, 2020 No Frills discontinued print production and home delivery of their weekly flyers leaving many shoppers without their usual resource for planning a shopping trip.
The new digital version was the exact same design as the old paper flyer but repurposed to live online at www.nofrills.ca/flyers and via the PC Optimum App. Even for a tech-savvy millennial, I found it difficult to navigate on mobile. The text was quite small and I was pinching to zoom considerably as I scrolled through.
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.
- User Flows
- Low and Mid-Fidelity Wireframes
- High-Fidelity Mockups
- User Testing
- Second Iteration
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
- 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
I then began brainstorming functionalities that would help solve the usability issues identified in my research.
- 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
- 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
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.
Once I established the functionalities and had an idea of specific user flows, I began to visualize the interface. Sketching low fidelity wireframes helped to bring some of my ideas to life. Below is a selection of some of my sketches.
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. Below is a selection of some my mid-fidelity wireframes.
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.
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
- 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.
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.