The Digital Flyer
In order to appeal to the more online-shopping oriented millennials, our team was tasked to create a digital version of the flyer in an effort to offer a better online experience, attract younger customers and increase sales.
Overview
Client: Canadian Tire Corp
Timeline: 2017-2018
Canadian Tire’s weekly flyer generates a significant part of the retailer’s revenue. As people get more comfortable with online shopping, Canadian Tire turned to Flipp to create an interactive version of the printed flyer.
My Role
• UX / UI Design
• Strategy and planning
• Digital Publishing
The evolution of my role
Our core team consisted of four UX/UI designers and a project manager. We worked closely with developers, UX researchers and the strategy team.
As UX/UI designers, our initial role was to research competitors and users, design a clean UI that is compliant to the company’s brand and test our designs on a weekly basis, re-iterating as needed to improve the experience.
We were eventually trained to use Adobe Experience Manager to digitally publish the flyer every week, which quickened the process and made it easier for us to create our designs as closely as we envisioned.
We were also trained by the strategy team on how to analyze sales data and forecasts to understand placement of products and make informed design decisions.
The Objectives
-
The objective was to beat the Flipp flyer on several metrics (Image 1.0) over a period of 12 months:
• conversion rate
• click rates
• Reduce exit rates
• Reduce bounce rates
• Decrease page load time
2. The Flipp flyer was not optimized for mobile and we were to take a mobile first approach.
Image 1.0 - Metrics for comparison between the digital and Flipp flyer.
• How to find the perfect balance between keeping the design close to the printed flyer for consistency and meeting the criteria necessary for a smooth digital experience?
• How to efficiently use components originally built for canadiantire.ca for the Digital Flyer? Development resources were limited.
-
How to manage real estate on the site? The number of products that the flyer had to show was quite significant.
-
How to keep the layout visually stimulating but also meet our weekly deadline? Time management was crucial.
The Challenges
Image 2.1 - Applying the lean methodology
The overall process through which the flyer was conceptualized to being published, was a lengthy one. We used the lean methodology to strip it down and keep it as simple as possible; keeping most responsibilities within the team.
This involved the designers being trained for digital publishing (authoring) using Adobe Experience Manager, as well as learning how to analyze data and product sale forecasts for strategic planning.
Process and progress
We worked in an agile environment, with daily scrums to check in with the team, weekly grooming sessions to brainstorm, decide and divide tasks and bi-weekly post-mortem sessions to discuss what went well and what could be improved. This method ensures transparent and open communication, making sure the team was always (or mostly) on the same page and allowed us to reflect on necessary future steps.
Image 2.0 - Post Mortem board
Image 3.0 - Widgets Template
Image 3.1 - Digital Flyer Mockup
To solve this issue, we opted for a horizontal scroll, with numbered pages to give users an idea of where they were in a particular category as well as in the flyer overall. The menu was replaced by a dropdown which users could click through to jump between categories.
Flyer categories were determined using the card sorting method. Our new design made it possible for one to see all products at a glance before using the prominent "next" and "previous" buttons to navigate through the flyer.
Design process and evolution
We designed widgets (Image 3.0) based on components available for development. The first versions of the flyer was a vertical page showing products of each category (Image 3.1). The categories were displayed in the flyer menu at the top of the page.
Image 4.0 - Digital Flyer Mockup Re-iteration
However, we quickly realised that this layout forced users to scroll too much to view all the products and was even worse on mobile where only one or two product tiles would fit in one row.
Image 3.0 - Widgets Template
Image 3.1 - Digital Flyer Mockup
Final Product
Video 1.0 - Final Digital Flyer for Desktop
Video 1.1 - Final Digital Flyer for Mobile
User testing provided us with some valuable insight on which was more appealing to customers depending on the context and products advertised.
Image 6.5 - Product Tile for Lifestyle Images
Image 5.0 - Design for Yardwork Products
Further testing validated decisions such as whether to include a "Shop Now" label or button by data gather from conversion metrics.
Image 5.1 - Design for CCM Bike
Image 5.2 - Design for Mastercraft
My experience in graphic design and marketing proved to be useful when working on the UI elements and layout. We had the freedom to decide which products would be best highlighted on a simple background as opposed to a lifestyle context.
UI Design
Designing mobile components
Since we were prioritizing a mobile first approach, we worked closely with the development team to design new mobile and responsive components.
Image 6.4 - Product Tiles for Featured Page
Image 6.3 - Product Tiles for Mobile
Image 6.0 - Vertical Mobile Component
Image 6.1 - Horizontal Mobile Component
Testing and Results
The flyer was tested every week against the Flipp Flyer over the following key metrics:
-
E-commerce conversion rate
-
Bounce rate
-
Exit rate
-
Average session period
Over the period of two years (2017-2019) the digital flyer was a big success on all metrics compared to the Flipp flyer.
The flyer also saw major improvements after several iterations based on data collected weekly through qualitative and quantitative user testing.
Image 7.0 - Digital Flyer Mockup data from weekly 2017 tests
Image 7.1 - Digital Flyer vs Flipp 2017
Image 7.2 - Digital Flyer vs Flipp 2018
Conclusion
The talented Digital Flyer Team included designers:
Nicole Antinucci
Mark Harmon
Juhi Khatri
Working on the flyer was a veritable delight and valuable experience on many levels.
Having the opportunity to work with such a big team of people with varying experience was both humbling and highly educational. The experience allowed me to mature as a designer and learn to value everyone's input. The time I spent at Canadian Tire has definitely improved my teamwork and collaboration skills.
Our team were emotionally invested in our project which fueled our drive and passion at work.
Challenges were always present, but the biggest take away for me was realising that the work of a designer never ends. There will always be room for improvement. This makes challenges more so exciting and has taught me to embrace change.