Tim Hortons
Heuristic evaluation of Tim Hortons App (v 2.2.2)
Project: UX review & redesign [team project]
Role: Evaluation, UI design, prototyping
Tools: Figma
Timeline: 5 days
01. Introduction
PROJECT OVERVIEW
In Canada, few brands are as emblematic or ubiquitous as Tim Hortons. Its app, which allows customers to order and pay with their phones, is the fourth most popular Food & Drinks app on the App Store and boasts over 1 million downloads on Google Play.
As part of BrainStation’s full-time UX diploma program, we were asked to conduct a heuristic evaluation of an existing digital product and recommend design improvements.
Being avid fans of Tims, my teammate and I chose to build on version 2.2.2 of the Tim Hortons app to improve its user experience. We focused on single task flow: placing an order for pickup.
02. Methodology
CURRENT STATE ANALYSIS
We began by identifying the main steps and features involved in placing an order for pickup.
Next, we sought to understand the users’ current experience to identify potential design opportunities. We looked at some of the most critical reviews of the app on the App Store, in which users expressed frustrations with the login process and selecting pickup locations.
We then tested the app on our own to replicate and verify these issues. Through this process, we identified usability problems with finding (and customizing) items, adding items to cart, and the checkout process.
EVALUATION METRICS
We used Jakob Nielson’s 10 usability heuristics for interaction design, and identified 5 usability concerns in the context of Tim Hortons app:
- Help and documentation
- Visibility of system status
- Consistency and standards
- Flexibility and ease of use
- User control and freedom
To quantify the severity of these issues, each heuristic was measured against a scale of 0 - 4, where:
0 = This is not a usability problem at all
1 = Cosmetic problem only (need not be fixed unless extra time is available on project)
2 = Minor usability problem (fixing this should be given low priority)
3 = Major usability problem (important to fix, so should be given high priority)
4 = Usability catastrophe (imperative to fix before the product can be released)
Due to time constraints, we knew that we may not be able to implement all of the redesign recommendations. This scoring system helped us weigh the impact and the effort involved in each redesign, and determine which ones should be prioritized.
03. Evaluation
HELP & DOCUMENTATION
- When login fails, flash message is uninformative and lacks clear instructions for what users can do to resolve the issue (ie. wrong account? wrong password?)
- The app informs the user if they try to create a new account with an email that’s already in the system, but this feedback appears at the top of the form (while the user is at the bottom after pressing the ‘Submit’ CTA). This can make the users think the app is broken and tap the CTA multiple times to get system response
Severity rating: 3. Accessing the app is crucial for experiencing the rest of the app. Tim Hortons does a great job engaging its customers, but as noted by several reviewers, getting help can be a time-consuming process. A smooth onboarding experience can help them start their journeys on a positive note.
REDESIGNS
- Improved feedback mechanism during login and account creation. During login, colour-coded icons give immediate feedback when user submits incorrect information, along with instructions (ie. password retrieval) to guide users
- Similarly, implemented proactive error messages to help users if they try to create an account with an email that's already been used. Users must also fix the issue (ie. use a different email) before moving onto the next step
VISIBILITY OF SYSTEM STATUS
- The cart is placed in the bottom right corner, which is typically where the users’ thumb hovers if they’re right-handed. This makes it easy to miss state changes when users add an item to the cart
- Adding an item to the cart triggers very little feedback. Only the numeric values change, and this subtlety unlikely to draw attention or signal to the user that their action was effective
- Cart transforms to item price / Add to Cart on individual item pages. This can confuse users and force them to go back and forth to confirm their cart
Severity rating: 1. The issue is largely cosmetic. It may cause minor annoyances for users, but are not major obstacles for completing the task at hand.
REDESIGNS
- Placed the redesigned cart in the top-right corner, and designed an ‘Add to Cart’ CTA that sticks to bottom
- Implemented micro-interaction to provide a subtle feedback when user adds an item
CONSISTENCY AND STANDARDS
- Location can impact product availability, but the option to select a pickup location isn’t very noticeable until the checkout process. If the user changes the location at this step, they are redirected to the main menu
- Cart design and placement breaks away from conventional e-commerce practices for fast food restaurants, as they are usually placed in the upper right corner and indicates quantity of items placed in the cart, instead of the total price. The price might be useful if the user is trying to stay within a budget, but it makes the CTA that much bigger. As a result it’s difficult to see the bottom of pages, especially as the app doesn’t let users scroll past the cart
- Cart transforms to item price / 'Add to Cart' CTA on individual item pages, which also breaks away from conventions. Major competitors (ie. McDonald’s, Subway, Burger King) has 'Add to Cart' CTA that sticks to the bottom, and the cart in top-right corner so that it’s always within reach
Severity rating: 2. UI conventions are important tools that help users navigate and use an app. Complying with appropriate standards (as demonstrated by competitors such as McDonald's, Subway, Burger King, etc.) can ease users' recognition of the interface and help them place orders easily.
REDESIGNS
- Added a step after log in so that user can select / confirm store location before proceeding. User can also change the location during checkout without disrupting the flow
- Implemented bottom-sticky 'Add to Cart' CTA and moved cart to top right to align with industry standards. Simultaneously, moved ‘Account’ (previously placed at top right) to the bottom nav
FLEXIBILITY & EFFICIENCY OF USE
- There is no option to search, filter, or sort items. This can hinder experienced users or people with dietary restrictions from quickly finding what they’re looking for
Severity rating: 3. Tim Hortons app does a great job of supporting experienced users (ie. 'Recent' at bottom nav allows users to re-order recent items). However, search engines are essential for helping users quickly find what they want without having to go through unnecessary steps
REDESIGN
- Implemented ability to search items (all, store-specific), and to sort and filter search results
USER CONTROL & FREEDOM
- Users have full control in customizing their orders, but they can't modify items once they're placed in the cart. Instead, they're forced to re-select and customize their order if they want to make any changes
Severity rating: 2. We all make mistakes or change our minds. While this isn't a major usability issue, a solution could help users avoid unnecessary repetitions
REDESIGN
- Streamlined interface and implemented the ability to edit items placed in cart. In this process, we redesigned the CTAs (on item page) for items placed in cart, so that users have the option to update or remove the item
04. Solution
ENHANCED USER EXPERIENCE
Tim Hortons app is a great product that serves thousands of daily active users. After conducting a heuristic review, we put together a high-fidelity prototype while adhering to the app's existing UI components. View prototype [Figma].
05. Conclusion
LEARNINGS & TAKEAWAYS
This was a great opportunity for applying my learnings on human-centered design. It also gave me a greater appreciation for it; the project mostly occurred in a vacuum, with my teammate and I conducting evaluations and redesigns while working on other projects). We tried several different things to build empathy with the users (eg. reading reviews, replicating their journey, placing an actual order and going to Tim Hortons to pick up). But talking with the intended users and testing the designs (both ours and the originals) would be immensely valuable for building a better solution.
NEXT STEPS
As noted earlier, testing the original designs with real users would have helped build a more robust case study. With more time, our next step would be to validate and iterate our designs through usability tests. As well, we would like to spend more time collecting Tim Hortons' full brand identity and building more advanced micro-interactions to explore user interactivity and build a more polished prototype.