Save-On-Foods

E-commerce education campaign


Save-On-Foods has long since been a Canadian leader in the food & grocery industry. As a company that strives for innovation, they became the first grocer in the region to offer online shopping.

Client:Save-On-Foods eComm

Type:Campaign Design

Tasks:Ideation, Wireframes, Sketches, UI, Iterative Design

Though Save-On-Foods was the first to offer online shopping, their delivery and pick-up service was not yet widely known to the public. It lacked a strong digital voice and begged to be told.

Having already redesigned the Save-On-Foods site, our new objective was to create increased digital awareness and education of Save-on-Foods' e-Commerce and delivery service.

How do you create a campaign that is both educational and engaging?

Concept & Ideation

Creating Narrative


Save-On-Foods' was offering a prize giveaway and it was our task to engage their audience with the benefits of their delivery service. We arrived to the concept of telling the SOF delivery truck’s story, from eCommerce to doorstep. As this was going to be a highly visual solution, sketching was the best method to convey our concept.

Along with Invision tour points, we were able to effectively communicate how this concept supported Save-On-Foods' goals as well as create expectations around the animations and functionality.

Phase 1: Iterative Sprints


The project kicked off with the recognition that there was a fast approaching 2 week launch. The team proposed weekly iterative pushes, within 2 Phases, which allowed both design and development to be improved with each live push. Returning viewers would see that the campaign content stayed consistent, but the experience was more and more interactive.

The first version was a simplified modal that would show content according to the truck's journey and position on the page. However, the complete concept was for this journey to be more immersive.

Phase 2: Improving on the existing


Phase 2 was dedicated to fleshing out the concept we originally sought to produce. This meant bringint the journey of the SOF delivery truck to the forefront, with more focus on having each step tell a story rather than another step in the contest entry. Again we deffered to using sketching to convey concept and maintain transparent communication with the Save-on-Foods team.

Responsive Design


It was important to us that the experience be just as engaging on mobile. The challenges were to rework the animations and visualizations to fit a much smaller screen. Mobile mockups were created for reference, but working closely with developers allowed us to effectively meet the tight timeline.

We created visualizations that responded to user inputs as a way of creating compelling content. Creating a dynamic environment and memorable visuals was our solution to giving life to the learning points.

Phase 3

The Extra Mile


Save-on-Foods' motto is to 'Go the Extra Mile' in their customer service. The team decided to take this to heart and recognized that the campaign would be live throughout the Christmas season. As a result, we created seasonal graphics that showed Save-on-Foods' truck realiably continuing it's journey throughout the holidays.