Building the Scotiabank Digital Channels Style Guide

Manager, UX Designer

  • Strategy
  • UX design
  • Visual design
  • Content production

Challenge

Scotiabank's various digital products rely heavily on its historical corporate brand and marketing guidelines. Despite having a recognizable brand, each product team are free to customize their properties as needed, often creating disparate experiences.

We need to provide a comprehensive resource that a variety of teams, roles, and even stakeholders, may reference to build a complete customer experience.

Mockup of the Digital Channels Style Guide

Key drivers

  • Capture the strength of the historic Scotiabank brand
  • Consolidate the company philosophy and customer values to guide our design principles, rationale, and interactions
  • Collaborate cross-functionally to address accessibility, design and development needs, and to anticipate future needs

Informative and actionable

Our goal was to provide a source of truth, from information architecture and basic form elements, to page layouts and application flows. Ready-to-use components with rationale enable designers and developers to build independently while maintaining a consistent user experience.

Details

It was important to show visual examples with idealized HTML markup that included accessibility considerations.

Screenshot of input form field

Different states

Input form field

Screenshot of input form field (styles)

CSS definitions

Input form field

Screenshot of input form field (markup)

HTML markup

Input form field

Screenshot of input form field (live)

Live demo

Input form 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. We made it clear that our team was focused on accessibility, open to feedback, and committed to regular updates. We knew it was helping people once interest and attendance in our style guide review meetings grew, and links to the resource were being shared beyond the original pilot group.

Personal highlights

  • Feeling proud of the strategic planning and investment into consolidating efforts across product lines and teams.
  • Massive effort of pulling correct content from various brand/corporate/marketing guidelines and writing a lot of new content to describe styles, interactions, rationale, and accessibility with links to supporting documentation.
  • Presenting the Digital Channels Style Guide in the Scotiabank Technology Showcase 2016. Sharing our efforts with the rest of the company.