The E-Commerce Mobile App
Overview
Client: Canadian Tire Corp
Timeline: 2018
We have come to learn that a mobile to desktop design approach is easier than the other way round as space and real estate becomes a challenge when we try to compress a large screen into a small one.
Canadian Tire’s homepage was originally designed and built exclusively for desktop and then evolved gradually to a responsive design.
The ask for this project was to create a template that is optimized for the Canadian Tire mobile application without sacrificing important elements and information. The goal was to create a mobile app interface that reflects the website while meeting the needs regular users would have in downloading the app as opposed to using the website.
My Role
• UX / UI Design
I joined the "Homepage Team" which consisted of our lead designer and a UI designer, a project manager, producer and strategy team. Both designers focused on designing for the CT website homepage
My role was therefore to work closely with them and take their design and translate them into the mobile app interface. I worked closely with the producer to create wireframes and produce mock-ups on a weekly basis to reflect the main website.
The Objectives
The objective was to
-
encourage returning users to download and use the mobile app
-
increase sales through mobile purchase
The Challenges
-
To bring content from a desktop website to fit in a mobile app
-
To present a clean UI consistent with mobile application trends
-
Working on a different product while using UI elements meant for the main website
-
Abiding to strict weekly deadlines while simultaneously working on other projects
I would then proceed to slice the assets and work with developers to get them published in a timely manner. The UX research team would track the usage of the app and discuss the results with the rest of the team. Changes and revisions for following weeks would be determined based on that discussion.
Process
We worked with various teams including the loyalty team who was responsible in intergrating the Triangle Rewards program into the app. With the help of the producer, I would wireframe and design mock-ups based on my team members' homepage designs.
Image 1.0 - Wireframing for Mobile App
Image 1.1 - Wireframing for Mobile App
UI design (from desktop to mobile)
Image 2.0 - Adapting Homepage UI to Mobile
Image 2.1 - Better usability with CTA centred
Image 2.3 - Example of "special event" sales
Usability tests allowed for informed design decisions such as centering buttons so that users can easily reach them navigate the app with one hand, regardless of whether they are right or left-handed.
We kept the design as simple and clean as possible and tested small elements, such as the usage of chevrons vs worded buttons. By keeping the design clean and minimal without sacrificing the advertising factor, we were able to produce a clean and concise version of the website for a mobile screen.
Image 2.2 - Exploring different styles for buttons
Final Prototype
Video 1.0 - Final Prototype for Mobile App
Testing and Results
The Canadian Tire mobile app was tested mainly against the main website and responsive mobile site. Results varied from week to week but remained generally lower than both the desktop and responsive mobile site. However, over the course of a year, we saw a significant increase in app usage, especially when we introduced the Triangle loyalty program to the application.
Conclusion
Working on the mobile app was an excellent experience. Having worked with various teams (homepage team, special promo and digital flyer team) allowed for results from relevant testing from other projects to be implemented in the design of the app. This proved to be useful and similarly encouraged teams across the department to exchange findings to improve design on other projects or products within the company.