Tim Hortons for Android
Brief: In late Fall 2016, Restaurant Brands International partnered with touchlab to bring its new Tim Hortons experience to Android parallel to its development of the iOS app.
On iOS, the team had already gotten a head start on an order-ahead app that would allow customers to place orders for pickup, drive through, or dine-in at Tim Hortons. RBI wanted to ensure that the experience on Android was as great as it is on iOS (or even better).
This meant offering all the same functionality built around a vivid, expressive, and platform-aware design for Android.
In this case study, we'll take a look at the V1 design, completed before I left touchlab in April 2017, and before the app ultimately launched later that year.
Platform awareness
As I’ve written elsewhere, platform awareness is important. It’s critically important, actually. Design is a selling point and important business case on Android. But besides that, being platform aware has real benefits for both an individual app and the platform as a whole.
For the individual app, the primary benefit is that the app actually gets used, and it gets used efficiently. When users open an app that was designed for the platform they’re using, they’ll find familiar controls, components that they’ve seen and used before, and platform features used intelligently to enhance their experience. All of this will be emboldened by the app’s unique expression, branding, and personality. When we have an app that fits the above criteria, the benefit to the platform should be obvious.
So how did our platform awareness manifest in the Tim Hortons app?
UI icons
In the Tim Hortons app for iOS, icons throughout the interface are styled after iOS system icons — they carry an outlined aesthetic that will feel familiar to iOS users.
But that same style wouldn’t necessarily feel at home on Android. After all, Google has provided an enormous library of system icons used not only across the Android platform, but by many third-party apps. The solid, geometric silhouettes clash with icons built from delicate 2px strokes.
We experimented with translating the Tim Hortons icons to the material silhouette style, but ultimately — and thanks to some great advice from Nick — we arrived at a different conclusion.
Rather than translating Tim Hortons’ icons to the material style, we could help the other system icons in the app meet these icons in the middle. I would beef up the stroke width of the original icons and set them on the material 1dp grid, and then take the standard system icons and hollow them out, round some of the sharp edges, and put the now matching sets into our designs.
The icons remained familiar, but served Tim Hortons’ unique expression on the platform.
Swipe up, up, down, down, left, right, left, right
When translating the primary menu design across to Android, we also made some adjustments to how its navigation mechanics work.
On both platforms, the menu’s categories are divided into “tabs.” On iOS, the user can navigate these tabs by touching them or by swiping up and down — the menu forms one contiguous list.
When we initially tried this mechanic on Android, there was some hesitation since normally a standard material tab bar means swiping left and right. Nevertheless, I tried to think of the tab indicator as a generic indicator rather than an indication of how to navigate, just to see what the experience would be like. Once we’d prototyped the interaction, we found that internal testers tried really hard to swipe left and right to navigate between the tabs, with vertical swiping coming as a secondary realization. Even in my own experience, I found myself swiping back and forth before realizing it didn’t work that way.
We thought there may be some value in the vertical mechanic yet, so we did a few quick explorations to better indicate the vertical list or divorce the mechanic from the traditionally-side-swiping tab bar. Ultimately we came back to the tab bar and side-swiping mechanic.
A material canvas
Layers of the interface in the Tim Hortons app move, elevate, ripple, expand, and slide off canvas in ways which— to the user — look elegantly choreographed, but which each serve an implicit purpose as part of the user experience.
Preserving information
Originally in the iOS interface, tapping the “checkout” button would trigger an action sheet, providing options for drive through, pickup, or dine in. In the initial Android designs, we took the opportunity to use a bottom sheet, and allowed the checkout button to carry the information it had into that interface to keep continuity. So on tap, the checkout button expanded horizontally as the sheet entered the canvas, becoming the “toolbar” of the bottom sheet and redistributing its information to match its new surroundings.
The same transition happened for the “scan to pay” button too, which appears any time the app is open after the initial order has succeeded.
Shape language
Speaking of those buttons, the pill-shaped, slightly non-traditional variant of the raised button appears just about everywhere in the app, from the menu to the item detail screen, to the check out screen, to settings.
The button largely behaves like any other raised button (save for the animation we just looked at) but also conveys a lot of meaning in the app. In most placed, the button is Tim Hortons’ deep red brand color, but sometimes it’s blue.
The color change is dictated by the information or action the button is conveying. For passive or atemporal actions like scan to pay, sign out, etc., the button is red. When something is happening — you have an item in your order, your order is ready to pick up, etc. — the button changes to blue to draw attention to the temporal action or information.
The button is present throughout each flow, even signup, to give users a fast and ready understanding of each screen's primary action.
We actually tried expanding this shape language to other elements like the flat menu tiles, but found that the additional negative space created an odd visual texture, so it remained reserved for primary actions.
Magnetic coffee cups
Another difference between the menu screens on Android and iOS is the tile layout. On iOS, tiles are styled more like cards, showing elevation and rounded corners.
Since each menu item only has one primary action (open the detail screen) and all menu items have the same information (product image + name), we styled them as tiles on Android. This prevented us from adding unnecessary texture to the menu and allowed us to preserve a quickly readable, texturally smooth interface.
But to separate the tiles from their neighbors and canvas, we added an elevation on touch. The coffee cups, sandwiches, donuts, and other items lift to meet your touch and indicate that you’re about to take action.
Expressing the Tim Hortons brand
Ultimately, expressing the Tim Hortons brand and creating an experience that felt like part of the same family as the iOS experience was a common thread through the initial Android designs.
UI icons that married the platform with the brand's unique imagery struck an appropriate balance, maintaining icon substance but altering icon aesthetic.
The Tim Horton's brand colors made for a strong palette throughout the app, emphasizing its bold red in large blocks and primary controls, and accommodating indications of other states where necessary.
A strong shape language with the customized - but still "material" - raised buttons ran a common thread through every flow.
And, importantly, we were able to maintain the tone and voice of the app through things like error handling, order status communication, and other in-app text.
Once again, the Material foundations allowed us to create a design users would just understand, and building on top of those foundational principles with color, shape, iconography, and voice allowed us to craft something really compelling.