Focusing on interactivity and authenticity to help Metro bring the holiday season to life
Enhancing the user experience with an authentic, unifying landing page
Mandate
To mark the holiday season and promote its new “a taste for life” brand image, Metro called on our expertise to bring its Christmas campaign to life with an interactive landing page focused on the user experience.
The page was designed to achieve the following:
- Highlight Metro’s featured products to boost online sales
- Present Metro’s products in a fun and interactive way with a series of recipes and tips for the holiday season
- Increase awareness of the Metro brand
- Connect emotionally with Quebec shoppers and create a sense of belonging through common holiday references
- Create continuity with Metro’s TV campaign produced by the Cossette agency
Execution – Content strategy and creation
Our goal was to respond to SEO queries and create value for users by offering tips, products, and recipes that would enliven their holiday menus. In the end, we developed complementary content that took Metro’s Christmas campaign even further!
We selected some expressions involving food and linked them to holiday recipes:
- The perfect appetizer in a nutshell (to introduce a goat cheese and nuts candy recipe).
- A main dish as sweet as honey (to introduce an honey-raspberry duck legs recipe).
- Need a dessert? Piece of cake! (to introduce a no bake gingerbread and cranberry cake recipe).
- For the apple of your eye (to introduce a mulled wine with cortland apple recipe).
What a great way to mix fun and functionality!
Execution – Digital operations
After defining our strategy and producing the content, we designed an interactive, dynamic, and unifying page to showcase Metro’s colours and new brand image. We also updated the page over the course of the Christmas campaign to reflect its two phases: the pre-holiday season, which ran from November 10 to 30, 2022, and the holiday season from December 1 to 24, 2022.
In terms of design and integration, we added the following animation for a more dynamic landing page:
- Carousel with interactive slides
- Rotating cards in the hero banner
- Reveal on scroll effect
- Focus effect on the videos
Creating the landing page required expertise in a number of areas, including the following:
- UI design
- Creation of interactive vignettes
- Content strategy
- Integration and QA
- Project management
Want to take a look? Visit our 2022 campaign page to (re-)experience Metro’s holiday season.
Designing an interactive advent calendar to highlight the metro&moi program
Mandate
Following the success of its 2021 advent calendar, Metro reached out to us again to create a 2022 advent calendar for its 25 days of giveaways contest, featuring nearly $35,000 in prizes.
The concept was simple. Every day from December 1 to 25, members of the metro&moi program (which became MOİ in May 2023) were invited to visit Metro’s Facebook and Instagram pages for a chance to win a special prize. Our mandate was to design an interactive calendar page that displayed a thumbnail image of daily prizes as they were won.
The contest, exclusive to metro&moi members, had multiple objectives:
- Strengthen metro&moi brand awareness
- Stimulate social media engagement
- Provide Metro’s partners and featured products with visibility
Execution – Digital operations
The project was divided into two major phases: the big countdown (November 24 to December 1, 2022) and the progression through the Advent calendar (December 1 to 25, 2022).
The first phase consisted in displaying a clock counting down the start of the contest. To do this, we created animated content using automated JavaScript countdown technology. Then, for the second phase, we designed anchor links and interactive vignettes to reveal the prizes (and winners) each day.
This mandate called upon a number of our digital team’s skills:
- UI design
- Creation of interactive vignettes
- Referencing/SEO
- Integration and QA
- Project management
To see the final product, check out Metro’s 2022 Advent calendar.