UI UX Design
TIMHORTONS

Why redesign Tim Hortons order Interaction?

As an enthusiastic UI UX Designer, I always dream about the perfect product, the product that gives the best experience to its users. When I was in Canada I used to pay Tim Hortons a visit every single day. I started then thinking about getting my favorite beverages delivered to my doorstep. Using the existing App is some what frustrating!

I took the opportunity to come up with the easiest way yet memorable user experience, And this, is how Tim Hortons Redesign was created.

Canadian Press photo

Users frustration

Before I started all that, I did some research to spot the pain points of the users including my self, I then went to Google Play and grabbed some feedback and comments that are going to guide me through this journey.

popup image

Brand & Style Guideline

Typography

For the typography, I picked the well known and modern Circular STD font for its dynamic look yet pleasing to read while keeping it classy and straight forward in terms of utility.

With this font I was able to build a visual hierarchy with its three weights (Book, Medium and Black) in order to emphasize some elements without grabbing all the attention to them and distract the user.

popup image

Colors

I was not going to touch the brand at all, regarding the colors, I used the famous Main Red of the logo as a primary one and I added a Dark Gray as a secondary one, while using negative space to freshen up the experience. I also used a very light gray to keep the cohesive hierarchy look across all the screens of the Application.

popup image
Tim hortons icons

Iconography

I quickly drew some icons to refresh the user experience and enhance the interface, nothing more than conventional self explanatory icons to use while ordering.

The upper icons are used in the navigation bar of the app and some other pages. Below them are a representation of the small, medium and big cups to choose from.

Final Design

I will be guiding you through the screens below and explain all the elements I have put together to come up with a suitable yet clean experience from choosing to ordering a beverage.

I started with a fresh, clean menu of goods with a lot of negative space to give the user a feeling of a clear navigation. The nav-bar below offers all the necessary actions in a reach of a thumb.

popup image
popup image

The navigation bar disappears while making an order to give place for an immersive full screen experience. A call to action button replaces it. The CTA is activated once the order is ready to be placed.

Choosing a beverage is done by scrolling horizontally, that gives the user enough space to see the item photo and recognize his favorite.

Once the choice is made, three icons appear asking you to select the size you want for the beverage.

A subtle amount indicator gives you the exact price of each mug size, This amount is added to your total in real time indicating the price of the beverage if you are ready to order now!

popup image
popup image

Once the size picked, the app asks you for your Shots preferences. Decaf, One shot or Double Espresso!

Again, every choice has a price, it’s indicated right above the shots buttons and added in real time to your total amount.

The last part of your ordering journey comes to an end after choosing the one of the flavour shots available to you. Caramel, Chocolate or Vanilla for this Capp?

Like seen above, a small indicator tells you the prices of each one while selected, and the total amount of your drink is being calculated automatically at the bottom right next to the Buy button.

popup image

Interaction screen in Action

To show how fun is ordering a simple Caramel Iced Capp from the Tim Hortons App I’ve redesigned, I decided to animate the screen interactions and show you some smoothness if we can say so! 

What’s next?

While redesigning the order interaction experience, I started thinking about the overall look of an entirely redesigned app. We all the features I can add and a little bit of extra UX Research, I will be able to come up with a super intuitive yet suitable customer experience.

Should I continue and do the whole redesign? Should I go deep further and give the user a full control of all what he wants. At the end of the day, the app needs to contribute to the growth of sales. Thank you all for scrolling ’till here. I will keep you posted…

popup image
Next Project
Logo Design
LOGOFOLIO