Sobeys Inc. is the second largest food retailer in Canada, with over 260 supermarkets operating in Canada and around 1500 under a variety of banners.

On my role as UX/UI designer I was in charge of assess Sobey's marketing offline proceses for implementing customer loyalty programs (Air Miles rewards, Club Sobeys card, point systems, etc.) and design an online tool that would replace, streamline, simplify, reduce error rate, and centralize these operations for several management departments across Canada and its multiple bussiness banners (Sobeys, Foodland, IGA, Safeway).

 


IU/UX DESIGN
WIREFRAMING
PROTOTYPING
HTML
CSS

 

My Role

 

A critical part of my role was to run a heuristic evaluation of the campaign creation process and documenting its pain points and strengths from their final users' perspective, in this case, the marketing team members themselves. With this information at hand, and after defining a comprehensive list of business unit requirements, usability best practices, brand guidelines, and overall project scope, I was capable to create a precise timeline and workflow that would fit Sobeys' organization needs.

This timeline included interviews with stakeholders, on-site visits to familiarize myself with the user's context, training on industry-specific processes, information architecture planning, concept creation, as well as prototyping and remote testing with actual users. Finally, I served as a liaison between Sobeys' marketing team and their software development unit by providing HTML/CSS files and style guidelines for its final implementation.

 
 

The challenge

The creation and implementation of loyalty campaigns is a very complex operation that requires of robust data gathering and calculation systems in order to work reliably, usually, for a massive user base. However, even though a big part of this process is already automated, still relies heavily on human input of numbers, text, list selections, checkboxes, and disjointed interactions like "Copy and Paste" from Excel spreadsheets and Word documents. Such tasks, specially when performed over long periods of time in a daily basis, become susceptible to human error.

One major challenge of this project, was to design an easy to use interface, that would keep users constantly informed without overwhelm them, while help them to reduce error rates, and guide them through a constantly validated campaign creation process.

 

The Process

 

As usual, I started with an extensively research work of best practices, scenarios, case studies, etc. and gathering previous or existent documentation available from the client itself (Brand guidelines, process flows, analytics, and so on). After compiling such information and evaluating the project requirements, performed on-site visits and interviews to place myself on the same location and context on which this tool would be used. This allowed me to empathize with users' needs and challenges, their environment, choice of devices, screen resolutions, etc. 

 
 

"A precise timeline that would fit Sobeys' organizational needs"

 
 

After having documented their users needs, stakeholders expectations and business requirements, I found myself in a better position to create concepts for the look and feel of the product, its layout and a purposeful content hierarchy.

The next step was to get actual training in the campaign creation process itself. This would help me to devise an information architecture that supported such tasks by removing repetitive steps, reorganizing existent flows, and implementing design patterns that could boost the learnability of the system. 

 
 

An early information architecture flow

 
 

Once defined the visual design direction, and the first iteration for the information architecture, we were ready to start using Axure prototypes as a centralized space to share feedback from stakeholders and developers, as well for testing with real users remotely and update the designs accordingly.

 

Axure prototypes as a centralized space to share feedback from stakeholders and developers

 

The last step was to create a front-end style guide for Sobeys' software development unit. This would ensure the design patterns, tone, language and styles defined were implemented consistently across the whole product.

 

Style guide abstract for input fields

 

The Results

 

The result was a custom made solution for the campaign creation team at the Sobeys' marketing unit. Having the opportunity to work with a team that find value on the iterative nature of software development and proved UX techniques, allowed for a greatly improved user experience and streamlined process flow. 

This tool is currently on its Beta implementation for Sobeys' banners in Ontario with a planned deployment to Quebec and Alberta by the end of 2017.