Tims hand.png

☕️  Tim Hortons

Overview

During my holiday break, I worked with my classmate to redesign the Tim Horton's app applying the UX research methods we learned in our capstone course. The Tim Hortons app allows users to enjoy the convenience of order & pay, earning and spending Tims Rewards, being able to quickly customize their orders and finding latest offers all from their phones.

Duration

Nov 2020 - Jan 2021

(8 - 9 weeks)

Team Members

Michelle Lee

Programs

Figma

Role

User research, usability testing

UX design

Skills

User research & testing, wireframing & prototyping, UX design

BACKGROUND

Challenge

While the Tim Hortons app is widely used by many people, there are problems within the app that make it difficult for users such as the navigation and ordering process. The challenge would be to enhance the mobile user experience so that users leave the app satisfied.

Process
1 Process.png
DISCOVERY

User Research

Since we were only redesigning the Tim Hortons app, we wanted to gather insights from users about the current app regarding the overall user experience. We conducted a system sustainable scale survey for both new and existing users as well as looked at previous app store reviews to get an idea of what the main issues were within the app.

 

Based on our research, we were able to establish our three main goals:​

Screen Shot 2021-01-09 at 12.01.18 AM.pn

To create a more coherent

registration process for users

Screen Shot 2021-01-09 at 12.00.57 AM.pn

Allow the user to discover and

navigate information more smoothly

Screen Shot 2021-01-09 at 12.01.08 AM.pn

Make the order process more customizable for the user

Meet Chris & Bernice

Tim Hortons is used by people of different ages so we decided to develop two personas named Chris and Bernice:

     1. Chris is an 28 year-old environmentally cautious male who can’t go a day without drinking coffee.

     2. Bernice is a 60 year-old who enjoys saving money and loves a classic Tim Hortons Double Double from time-to-time.

2 Persona Chris.png
3 Persona Bernice.png
DEFINE

Brainstorming Features

To brainstorm the necessary features for our app, we created How Might We and Point of View statements based on our previous research and persona development of Chris and Bernice.

4 HMW.png

How might we create a more coherent registration process for users?

     •  Sign up with email (using a password) and/or phone number

     •  Two-factor authentication system 

 

How might we choose a preferred selection control that displays all the information at once? 

     •  Less dropdown menus by displaying everything on one page or have add-ins displayed on a whole new page

     •  Ability to increase and decrease the quantity on the same page 

 

How might we make the order process more customizable to the user?

     •  Favouriting orders

     •  Displaying measurements of each beverage 

     •  Being able to add different payment methods

 

How might we make finding specific information for the user more easier?

     •  A search button for the entire app

     •  Eliminating the amount of unnecessary pages / dropdown menus

Information Hierarchy

After brainstorming and identifying the necessary features, we created an information hierarchy to get a grasp of the major and minor features that the app would have. This would later help us when we’re in the ideation step making the wireframes.

5 Info Hierarchy.png

User Flow

One of our main goals was to enhance the user experience so we create a flow that allows for seamless interactions between screens without any trouble. Considering that this is a food app, we had to make the process to order and pay for items, and use Tim Rewards fairly easy because users are on-the-go and don’t want to be on the app for long. 

 

The flow caters towards both new and existing users showing the start-to-finish process of ordering and paying for items. It contains all of the possible interactions within the app from the five main starting points in the navigation bar: Home, Order, Scan, Offers, and Profile.

6 User Flow.png
IDEATION

First Iteration

For our mid-fidelity wireframes, we decided to focus on the three main user tasks which we will be testing for: easier registration process for new and returning users, creating a delivery screen focused on customizable orders up to checking out, and improved payment screens.

1. Registration Process for New and Returning Users

2. Customizable Delivery and Menu Screens

Wireframe 2.png

3. Improved Payment Screens

Wireframe 3.png
PROTOTYPE

Mid-fidelity Prototype

To view our mid-fidelity prototype, click here.

VALIDATION

Usability Testing

During the preliminary user testing on our mid-fidelity prototype, we provided minimal context for users as a guide to complete certain tasks. Our goal was to identify and translate user pain points into goals and then solutions.

Tasks we tested for:
1. Easy onboard process and skeleton screens
2. Order listing screen with notable visual cues that a beverage can be customized 
3. Adding card / payment screens using less elements and navigate without help

A few suggestions our users recommended were quick sign up options with a Google email or Facebook account on the registration screen, display heart functions to favourite certain items on the order screen, and an effective typographic hierarchy to organize content to follow natural eye movement patterns. 
 

7 Survey 1.png
7 Survey 2.png
7 Survey 3.png

Service Blueprint

During the preliminary user testing on our mid-fidelity prototype, we provided minimal context for users as a guide to complete certain tasks. Our goal was to identify and translate user pain points into goals and then solutions.

Tasks we tested for:
1. Easy onboard process and skeleton screens
2. Order listing screen with notable visual cues that a beverage can be customized 
3. Adding card / payment screens using less elements and navigate without help

A few suggestions our users recommended were quick sign up options with a Google email or Facebook account on the registration screen, display heart functions to favourite certain items on the order screen, and an effective typographic hierarchy to organize content to follow natural eye movement patterns. 
 

Screen Shot 2021-02-14 at 8.22.22 PM.png
 
USER INTERFACE

Final Prototype

To view our high-fidelity prototype, click here.

030.png
CONCLUSION

Key Takeaways

The Tim Hortons redesign case study helped us to practice collecting quantitative user behaviour data, analyze and transform them into qualitative data to support redesign thinking. We were both eager to start this project with fresh ideas and apply what we have learned during our program’s UX course. Through surveys and in-depth research on Tim Hortons, we were able to discover the user’s pain points on current features and a roadmap for future functionalities as improvement.

 

Some unexplored features and future work we consider doing are: the ability to delete an item in the cart; gift available coupons/redeemable points; experiment navigation bar to a hamburger bar; apply more details to each menu item. 

 

Overall, this project was very insightful for us two upcoming UX designers - It built our confidence implementing functional design in both UI and UX. With consistent practice with re-designs and UX research, we will continue finding ways to better structure the design principles and understand what the usability issues are!

Banners2.png

[ 2019 ]    Editorial Design

🤙🏻  Check out my other projects!
Banners.png

[ 2019 ]    Editorial Design

Banners4.png

[ 2018 ]    HTML & CSS