Tim Hortons' App Redesign
A mobile UI/UX study and redesign of Tim Hortons' mobile app
Overview
Tim Hortons' is a renowned Canadian coffeehouse and restaurant chain known for its coffee, doughnuts, and other items like breakfast sandwiches.
Despite their current mobile app being relatively clean in terms of visuals and UI, issues with hierarchy and usability can still be found. Returning users have experienced problems such as poor overall navigation and difficulties with the ordering process.
As such, my main goal with this project was to not only re-style and enhance the layout/readability of the app (homepage, menu page, bag page, payment page, review page) but improve some UX components as well. To do so, I attempted to uncover any hierarchical issues and UX redundancies, specifically in the ordering process, and propose potential solutions.
Roles
UI/UX Designer

Date
June 2023

Tools
Figma
Why attempt the redesign?
Original vs. Proposal Design
Homepage
The “Order” and “Rewards” tabs displayed on the homepage could still use a bit more hierarchy to emphasize them a bit more; they are essential parts of the app but are still listed underneath promotional tabs that may just be ignored. "Offers" could use a bit more hierarchy as well, as it seems more important to the user than the features it's grouped with.
The tabs after “Early Access” are “Scan & Pay!” and “Discover”, which are already listed in the bottom navigation bar. Is this redundant? Is it also redundant for "Delivery" to be a tab if you can choose delivery once pressing "Order"?
The cart (bag) seems like it should be a part of the global navigation (bottom bar) due to its importance, but it's not.
A quick summary of Tim Rewards points has been put up front so users can instantly know how many points they’ve built up. The “Details” button leads to the Rewards page displaying all related information.
The hierarchy of “Order” and “Offers” was increased due to their importance compared to the other features (ex. Give, Community, etc.)
The cart (bag) icons/feature was added to the bottom global navigation bar so users can access it from any page.
The saved restaurant location has been put at the top for easy access/view (previously a Restaurant Locator tab).
Menu Page
The menu page for their app has a relatively clean UI design, but could the location/service bar be explored to be put at the top rather than the bottom, and made a bit more clear in that users can change it when clicked on?
The top restaurant location bar has been put at the top and includes whether the user wants delivery or pickup. A "Change" button has been substituted for a right arrow button to make it a bit clearer that clicking will redirect the user to the page the app currently has where they can select the location and service. 
The layout redesign itself is similar to the original but it has been changed to a card layout in order to stick with consistency with the redesign of other pages.
Bag (Cart) Page
There is a good amount of white space surrounding the "Redee my points" section of the page...maybe too much?
The "Order Details" box has a bit of a clunky layout. Can this section be re-designed so it “flows” better?
Why is there a white box splitting the items from the total price? And is it possibly a redundancy to have an "Add to Order" section if there’s already an “Add Items” button above it?
The white space was reduced in the "Redeem your points" section.
The "Order Details" section has been redesigned and reorganized by getting rid of the option to “Pick Up” or “Dine In” due to “Dine In”’ being unavailable and “Change” bringing the user to a page where they can change their preferred service option. As such, having the aforementioned option seemed a bit redundant.
For the actual cart section, the edit/remove buttons have been changed to icons. The “Quantity” option has also been removed due to possible redundancy with “Edit”. An image of the item is now displayed and the subtotal/total prices have been combined in the same white frame as the listed items. This is so that the items look and are grouped together.
The “Continue” button is now in a fixed position at the bottom of the screen to help with navigation and efficiency by (hopefully) reducing scroll time.
Payment Page
Why is Google Pay the default payment method shown, and the more commonly use Credit Card method second (and hidden) in the dropdown menu?
The credit/debit card option is now displayed first over the Google Pay and Tim Card options. The view shown above is if a user has saved a card to their profile; if they don’t, only the “Add (another) card” option will be displayed and redirect users to a screen to do so if they choose.
The spacing of the“New Payment Method” announcement section has been reduced. While important to relay to users, I felt that seeing the payment method options still take priority/hierarchy over it.
Review & Confirmation Page
The confirmation page is missing a lot of potential information that could be displayed to further help the user in the ordering process (ex. recap of order, payment used, etc.)
An order summary is now displayed (service/address, items in bag, payment method) so users can again have a recap of their order before confirming and placing it.
A "View all items” feature has been added if an order is more than the default 3 items displayed. It acts like a menu that expands when clicked on; this is so that users can view all their items but not have it all displayed at once initially (saving space).
The “Place Secure Order” button is now in a fixed position at the bottom of the screen to help with navigation and efficiency by (hopefully) reducing scroll time, similar to the “Continue” button on previous screens.
Design Process
Thumbnail Sketches (Low-Fidelity Wireframes)
↑Back to Top