Mike Barker
Work
About
Writing

Canadian Tire mobile app

Canadian Tire iOS mobile app screens

PROJECT Mobile app design
YEAR 2018-19

Introduction

The redesign of the core Canadian Tire app was an opportunity created by the necessity of redeveloping the software stack. We harnessed the chance to lead an across the board customer-centric rethink of every feature, while changing the way Product, Design and Development worked together. We introduced our own take on the Design Sprint as a way to design the product in collaboration—a sequence of feature specific sprints used to validate our ideation ideas in weekly usability tests.

The challenge

The current mobile app was becoming outdated and most importantly more costly to maintain and improve. Built on web based technology, the original app sought to deliver one consistent experience across all platforms and tried to appeal to iOS and android customers with a single UI design.

The previous design process was also a waterfall approach requiring completed designs for the entire app delivered at the start of development. We had found with a previous project that a final design approved by product owners would have challenges once user stories were written and the developers could weigh in. Lacking the months required to build out the entire design, we used a two-week head start to engage all stakeholders in the design process.

The role

I led the design strategy which involved setting up the guiding principles and design language, building out the Sketch libraries, and working closely with the exceptional product designer we brought on to ultimately own the android experience. During the design sprints I contributed the iOS designs from wireframe to final mockups.

Canadian Tire mobile app UI navigation


Guiding principles

At the start I had to identify the overall UI and design language. The app would feel like a natural native app on their device. It would be simple, clean and modern, and would leverage the hard-proven UI patterns for each platform. There would be a fine balance required to ensure features were the same but platform specific.

After an accessibility review at WWDC, the lead iOS developer and I were also determined to ensure the app wasn't simple accessible but that it delivered an exceptional experience.

Canadian Tire iOS mobile app accessibility


Research

I used a break between projects to begin gathering research necessary for understanding how customers used our app, and to identify the goals they were trying to achieve. I analysed over a years' worth of feedback generated by the app, looked at the App Store reviews, and audited the best in class ecommerce mobile apps. I held user interviews and conducted quick usability tests of the current app with customers. The data was used to understand the current app's weak points, motivations of customers, and build an understanding of common UI patterns.

An ongoing project I maintained was tracking our app's store rating and most importantly tracking customers' moods through sentiment analyses. While we made minor improvements to the existing app, we were limited in our ability to add customer requested features due to the non-native framework.

Canadian Tire mobile app customer journey

Our process

The process unfolded in three phases—the initial stage involving gathering research and defining the product features, the 12 design sprints phase, and once the designs were delivered, ensuring continuous testing and giving acceptance criteria feedback.

Research and definition

Before we began fully, we defined the product and laid out the design roadmap based on the sequence development would build. This was our customer's happy path and comprised the core features. We also defined the information architecture, and using rounds of interviews with card sorting, we determined our navigation structure. Fortunately at this time I attended Google i/o 2018 and was there for the introduction of the new Material design theming and many of the new UI patterns such as the bottom navigation.

I had seen in the customer feedback that iOS owners did not like the android style hamburger menu, therefore we returned tab navigation to the app. This might have been an example where to two apps diverged, instead we tested and implemented bottom navigation on android as well. Our first round of usability testing validated this navigation approach.

Canadian Tire mobile app design sprint

Design sprints

We used design sprints to enable better collaboration between all stakeholders and to ensure maximum opportunity for diverging ideas. We were also solving a timing issue which required the designs to be delivered for user story writing only weeks after the project began. With little lead time we would not have managed to complete the entire design, or have time for feedback. Our design sprints therefore fed the development sprints.

Each sprint began with a day featuring a presentation on competitive analysis, the framing of the problem (which were friction points surfaced in the user research), and running rounds of ideation sketching and dot voting. A final synthesis of the ideas would be sketched up to complete the day. The next day or two would be focused on crafting high-fidelity wireframes of the idea and all state variations. The testing hypothesis would be written and the appropriate screens needed for the testing scenarios would be designed. Finally the screens would be completed in InVision for the prototypes needed for usability testing. We built out the feature for both iOS and android, and when approaching test subjects, they would be given the prototype for their own preferred device. Results of our usability tests informed what further improvements would be needed, whether simple changes or new iterations that would be tested again.

After design

Once all design sprints were complete, all final designs were delivered. As features were completed by the development team, the product team focused on providing adequate feedback to ensure all acceptance criteria were met. This feedback may have included adjustments to ensure the design was delivered as specified. We also took this time to perform further usability tests in the beta builds, including device specific interactions and accessibility.

UX solutions

Product description page

One of the most important views in the app, the product description page is an image rich interaction with individual products. We focused on a strong hierarchy of information for both product details and availability. It was one single view we iterated the most, with several rounds of usability testing to validate numerous interactions, including colour selection and adding multiple items to cart.

Canadian Tire mobile app prodcut description page

Cart & checkout

In the final two steps of the happy path, the cart & checkout work in tandem to enable efficient order completion. Throughout the shopping experience the customer would be presented with mutliple delivery options, with the cart containing the decision interaction. Aside from changing quantity (or saving an item for later), choosing between in-store pickup and ship to home is the primary decision before proceeding to checkout.

Canadian Tire mobile app cart & checkout

Stores

One of the key features identified in research was the stores flow. Previously an afterthought, Stores were given their own tab, and a map rich experience. Taking clues from Apple apps using sheets (a key change in iOS 13), the interaction with individual stores stays contained in one view.

Canadian Tire mobile app Etires

Etires

The Canadian Tire mobile app wouldn't be complete without a way to purchase tires. With its own sprint, etires effected most of the app experience, from search to the cart & checkout. Particular attention was paid to the product description page and the vehicle bar interaction.

Canadian Tire mobile app stores flow

Conclusion

The new Canadian Tire mobile app was launched in late September 2019. The app received generally favourable ratings, raising the average star rating to 4.5 (as of November 2019). Reviews of the app were honest and identified popular features we had left out of the initial version.