Digital Channels Style Guide

Scotiabank's many digital properties have relied heavily on its strong, historical, corporate brand guide line and a well recognized marketing brand. While these two guidelines have provided a foundation for the feel of the company, each product line were free to customize their experience as they needed, sometimes creating disparate experiences.

Challenge

Create a guide that aligns the principles of design with the strength of the historic Scotiabank brand and culture. Update the guide as often as the digital experiences develop and grow. Build a strong foundation for our digital channels by consolidating the philosophy, principles, and production guidelines. The following are immediate goals of the initiative:

  • Provide up-to-date, accessible, online resources
  • Update regulary as soon as possible
  • Allow teams to communicate their requirements for further definition; include them immediately once defined

Scope of work

This was a comprehensive undertaking where we attempted to define rules that would be robust enough to address current issues and anticipate future needs. We provided rationale, definitions, visual examples, markup, and live demos for the following:

Accessibility
Making sure people know that we rely on certain accessibility tools.
Architecture
Defining the structure of the top bar component.
Visual
Examples of different kinds of buttons.
Interaction
Live demo and markup for radio buttons.
Content
The content and tone of how we speak to our customers is just as important.
Style guide contact
Immediate access to meaningful contacts.
Form example
Visual examples of the different states of an input field.
Form markup
Markup example of an input field.
Form live demo
Live demo of an input field.
Form Sketch measure
Specifications of an input field.

Summary

The most important part of making this a successful project was collaborating with all the teams that would be using it. We scheduled a standing meeting attended by designers, developers, and accessibility experts to help contribute to the definitions. Unlike previous attempts at style guides, we made it clear that our team was accessible and open to feedback. Since then, the style guide has been shared with other teams and it's been a pleasure to help people whenever they needed clarification or requests.

Return to portfolio