Tim Hortons Mobile App

Project Summary

The Design Problem & My Role

A major Canadian quick-serve restaurant chain wanted to go beyond a new look and feel for their revamped mobile app. In particular, the company was also exploring new ventures and wanted to incorporate them as new features in this new mobile app. These new features included a Marketplace (for selling merchandise), a Games Centre and a Charity & Community Giving section.
‍
The aim was to create a north-star vision of this new “super app” within three months, after which it was to be presented to the company's executive board for further approval. 

In my role as a product designer, I did the following: 

  • Ran design workshops
  • Designed wireframes
  • Created high-fidelity mock-ups
  • Created new components for the design system
  • Usability testing

The solution

What we came up with was a redesigned look and feel that updated the original app branding, as well as new flows that integrated the specific features mentioned above. You can see the designs below:

The Outcome

This prototype was shown to the board of directors and approved unanimously to go into the development phase. The new, revamped version of the Tim Horton's app launched this spring 2023.
View App HereView User Research Case Study

For a more in-depth look at the design process, please read the case study below.

Design Process

Our design process was a multi-faceted approach, because the design brief we were given was quite broad in nature. It consisted of:
1

Determining Key User Needs

2

Initial Wireframes

3

High-Fidelity Designs

4

Usability Testing

  • Held stakeholder workshops and conducted market research on "super apps"
  • Created initial customer mindsets that would guide the creation of initial designs
  • Created initial wireframes to flesh out key components and details
  • Gathered feedback through daily working sessions with the client
  • Punched up the wireframes into high-fidelity designs
  • Created prototype that was showcased in a major board meeting for the client
  • Conducted moderated and unmoderated testing to see how customers would respond to new designs
  • Provided recommendations for further development of designs

1. Determining Key User Needs

At the start of the project, we had an initial constraint that we were unable to conduct initial user research to understand key customer needs. In lieu of interviews and primary research, we opted to conduct workshops with stakeholders to determine key needs instead by proxy. The goal was to have an initial needs workshops, before moving onto a feature prioritization workshop.

From the workshops, we created four mindsets of the types of customers that typically visited their restaurants. These mindsets were called Casuals, Regulars, Ritualists and Go-Getters.

Example of a mindset and how they were constructed.

These mindsets connected with the client and helped us in terms of determining key user needs and potential ideas to solve these needs. As a group, with the client, we decided that we needed to focus on the following: 

2. Initial Wireframes

From the needs, we determined as a team that we needed the following features/changes to the app: 

  • Homepage: A home page that features quick actions where customers could reorder their favourite items
  • Marketplace: A set of e-commerce pages where customers could find merchandise items that they wanted to order and do so online
  • Community: set of charity pages where customers could find local causes sponsored by the company to support
  • Games Centre: A revamped place where customers could participate in the hockey challenge, along with other games

Wireframes

Using these initial ideas, I came up with a series of wireframes, focused on the Home Page, Community & Games Centre. During this time, my team held daily working sessions with the client. This was used to come to a consensus on key parts of the part between all the key stakeholders.

You can view the wireframes below.

Below are the wireframes for the Community pages: 

3. High-Fidelity Designs

From this, my teammate and I started to flesh out the high fidelity designs. You can see the designs and user flows below.

4. Usability Testing

We then took these designs and did usability testing on them to see how customers would respond to them. We wanted to see if the new app was easy to navigate and if the expanded features would cause any confusion. Here is a summary of the research plan and key results.

9 moderated Interviews

  • Participants

    8 customers of varying demographics from across Canada  

  • Duration

    1 hour per interview

  • Description

    Task-based usability testing, where customers were asked to complete a series of tasks using a working prototype of the app.

9 unmoderated interview sessions

  • Participants

    8 customers of varying demographics from across Canada

  • Duration

    30 to 40 minutes per session

  • Description

    Preference testing, where customers were asked to give feedback on four different versions of the homepage to see which one was better for navigation and usability.

Results

01

Some parts of the super-app did not make sense to participants, such as the Tims+ and Community sections.

02

Participants had generally postive impressions of the home page and particularly liked seeing personalized rewards offers featured.

03

The bottom navigation bar was an important navigation tool.
‍

04

Certain mobile interactions did not work well with participants.

Key Lessons Learned

After the usability testing results were presented, the client felt comfortable to move the project into a build/development phase. They were encouraged by the positive research results and put many of the recommendations into a backlog for future iterations.
‍
In terms of reflecting on what I learned, I have three particular lessons:

01

You have to meet the client where they are at in terms of design knowledge and comfort.
When we stopped trying so hard with interaction maps and workshops – typical design activities that our team was familiar with but the client was not – it became a lot easier. Just having a daily working session where we went over tangible versions of the design made a lot more sense to the client because it was more tangible to them and things weren't communicated in a design language that they were not well-versed in.

02

There are other ways to obtain the user-centred perspective when users are not available.
Due to resource and space constraints, it was difficult to interview customers for all phases of this project. To overcome this, we relied on data from the customer insights data, as well as data analytics. While not perfect, it gave us a starting point to help determine some user needs and build the app.

03

That being said, it is always good to stress-test an organization's most ardent assumptions about a product with customers when possible.
Many common assumptions about what customers would like were proven false during usability testing, such as the assumption that customers would like the drawer interaction. Having more concrete evidence to the contrary can help organizations pivot their design strategies before it is too late.

Copyright by vipasha shaikh 2020
emaillinkedin