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:

Making sure people know that we rely on certain accessibility tools.Defining the structure of the top bar component.Examples of different kinds of buttons.Live demo and markup for radio buttons.The content and tone of how we speak to our customers is just as important.Immediate access to meaningful contacts.Visual examples of the different states of an input field.Markup example of an input field.Live demo of an input field.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.