CPA Canada

Responsive website redesign and pattern library

Chartered Professional Accountants logo with a background image of glass tower buildings
CPA Canada: The unified identity of the Chartered Accountants, Certified General Accountants, and Certified Management Accountants.

It’s hard to think of many professions that are as recognized and respected worldwide for their work as much as accounting is. After all, governments, multinational organizations, small “mom and pop” businesses, and regular folks alike entrust their finances to designated accountants every day.

Under recent efforts to unify the accounting professions nationwide, CPA Canada has emerged as the preeminent accounting and business credential that sets the standard for the profession in Canada.

Project background

Recently, there were more than 40 accounting bodies operating throughout Canada. That made knowing what type of accountant to hire complicated, even confusing. The time had come to unify the three independent accounting professions – Chartered Accountants (CA), Certified General Accountants (CGA), and Certified Management Accountants (CMA) – under one national banner: Chartered Professional Accountants of Canada (CPA Canada).

Once unification was well in motion, CPA Canada knew that it was crucial to apply that same spirit of cohesiveness to its online presence. We were hired to work out a solution to a very complicated equation.

The challenge

Merging Canada’s accounting professions was a massive undertaking in itself. Twenty-one national websites were in operation, and the goal was to consolidate these, too. The new website would serve as the chief source of information for CPA Canada’s 190,000 members. It also needed to provide continuity for the organization’s diverse group of stakeholders during the ongoing amalgamation process.

The goals

  • Set up CPA Canada with a foundation for a cohesive online presence.
  • Research and evaluate the organization’s existing products and processes.
  • Develop content and brand strategies with the users’ focus at the core of our work.
  • Develop a set of best practices and standards CPA Canada could use both internally and across the country to create a unified presence for its members.

The solution

The vision for CPA Canada’s new website, cpacanada.ca, was to provide targeted and consistent communications and visual identity for its various audiences. That included its membership, the general public, potential CPA students, and beyond. From a practical perspective, cpacanada.ca also needed to be the singular spot for people to read its new digital magazine, register for webinars and courses, buy resources like handbooks, and easily access a wide range of information. Creating a clear and unified voice and extending the CPA Canada brand digitally were also integral goals of the project.

The first phase of the project involved bringing these critical elements together seamlessly. Our goal was to set CPA Canada up for success, by developing and delivering a comprehensive content strategy, site architecture, and design package that would be used when building out its website in the second phase of the project.

Discovery

The words “inventory” and “audit” are hardly unfamiliar to accountants. Our analysis, though, focuses on users’ needs and expectations. It’s more qualitative than quantitative, but processes, standards, and guidelines are still key.

At the outset of the discovery process, we worked primarily with CPA Canada’s Communications and IT team leads to start looking at the organization from the outside in, rather than focusing on internal needs. That involved undertaking a competitive audit (to understand how other similar organizations were working), a content audit (to uncover issues with the current site content), and brand audit (to understand both the existing as well as emerging branding standards).

The websites weren’t just large, there was lots of competing and overlapping content that needed to be restructured. Working with CPA Canada’s two team leads, we planned and delivered in-person discovery workshops with members in six cities across Canada, gathering information on how they interact with the organization — what challenges or pain points they had experienced, what was working well, and what they wished for. These stakeholders provided us with valuable first-hand insight in understanding what the membership’s needs were and how they could influence the website design. We spoke to nearly 400 CPA members during the process, with dozens joining our in-person workshops.

However, since the unification process was ongoing, there were still a number of unknowns within CPA Canada. Knowing that the users’ needs were at the core of the new website helped ease concerns internal teams had as to what information should have priority on the site. This enabled us to work together to develop a content strategy that is holistic, clear and unified across the entire web channel.

Creating the site architecture

Creating the site architecture is typically an iterative process – especially with an intricate site such as CPA Canada’s – since it can be difficult for people to conceptualize “on paper” how a website will work. Distilling 21 websites down to one and developing a site map is an even trickier endeavour, so we put technology to work and tested the information architecture using OptimalSort. This online software allowed us to get real input from users and identify common patterns in how they think certain types of content should be grouped, for instance.

A screenshot of the CPA canada website wireframes

At the same time, we conducted content modelling workshops to assess what content CPA Canada already had, and to prioritize what content it would need in the near term. Once we had sketched how the site should be organized, including its basic page structure, the stakeholders started to get a clear picture of how the site would take shape. The next step involved taking the sketches and converting them to in-browser responsive wireframes, which could be opened in any device, allowing members to truly interact with the design as it would once the website became live.

A new magazine for a new membership

A stack of CPA magazines.

While our discovery and design work was underway, CPA Canada was preparing to launch its new flagship publication, CPA Magazine, to represent the three legacy organizations with a unified voice. With the inaugural print issue already in progress, CPA Canada asked us to quickly design and build a temporary, stand-alone website so that the magazine would have a digital presence, complete with responsive advertising, to help connect its core membership and also reflect its refined brand. As part of this project-within-a-project, we worked closely with the magazine team to determine an innovative online-to-print strategy, since the website would have more reach over the years.

Since the main CPA Canada website was going to be built on a SiteCore platform, we partnered with Montreal-based Alogient to complete the development work. We provided their team with responsive HTML templates, along with a style guide and pattern library to build the CPA Magazine site, and we worked together to make sure it functioned perfectly for the new magazine’s expanded readership.

Extending the brand

CPA Canada already had some brand standards in place; however, these were mostly limited to the print environment. Additionally, it had a marketing campaign underway to raise awareness of the unified accounting profession. We were asked to create compelling visuals for the new site to reflect its goal to effectively “humanize” the accounting profession. After all, accountants are trusted partners, not just number crunchers.

Designing in the open

Our approach to the design was to work collaboratively with CPA Canada’s team (a group of 17 people) to build consensus, designing in the open so everyone had input with a focus on the audiences’ needs and the goals of the website. We created sets of style tiles that helped refine the website’s design direction and worked to narrow down the elements of each. Once we had a final style title, we then created mock-ups of the website’s key pages, so stakeholders could see how the content would look on small, medium and large screens for all devices.

A screenshot of the CPA canada digital style guide

The next steps involved bringing the pages to life. During the first phase of the project, we designed and built the front-end templates, and provided an initial pattern library and style guide specifically for CPA Canada's new website needs:

  1. Style guide: This provides the specific guidelines and rationale for how CPA Canada should present itself digitally, whether on a supporting website, app, or digital magazine. This digital style guide allows the CPA team to effectively govern the brand online and it’s re-use across various digital projects.
  2. Pattern library: The design details, such as forms, buttons, images and other elements that are assembled together in a layout page in one HTML template. Guidelines outline the rationale for why scrollbars, buttons, and so forth, are styled in a particular way, so that the patterns can be adapted for provincial or subsidiary sites, adding new modules as needed.
  3. Downloadable front-end package: A developer can use this package and start building out the website right away.

More recently, we expanded this pattern library, style guide, and added the downloadable templates as a tool and resource for CPA Canada to use nationally. This enables the guidelines to be adopted by the provincial organizations and expanded for potential mobile apps.

Our goal was to set CPA Canada up for success, by developing and delivering a comprehensive content strategy, site architecture, and design package, then bringing the project to life.

Mobile and tablet devices with a screenshot of CPA canada's website

The results

Our work with the CPA Canada team really helped them get a first-hand understanding of what its members wanted and needed. This is an invaluable experience for any organization, but especially one like CPA Canada, which was formed to provide clarity and leadership to the accounting profession in Canada.

The various phases of the project took two six-month periods over a 15-month span while the unification process was unfolding. It was a complex and rewarding project, and in the end our work provided the newly unified national accounting profession with the foundation for a cohesive, user-focused, online presence:

  • Refined and reprioritized content from 21 websites, focusing on members’ needs, so the website became a valuable resource for stakeholders
  • Helped internal stakeholders communicate their core messages during the complex, ongoing unification process
  • Created a user experience that helps stakeholders access information quickly and easily on all devices
  • Designed a digital presence, along with responsive advertising for the new flagship magazine, to connect its core membership
  • Extended the brand and developed a design package so that guidelines can be adopted for future sites and expanded to other tools such as apps

See it for yourself

Visit CPA Canada's new website