CAMH website

Entrance at Zulu Alpha Kilo agency in Toronto

The Centre for Addiction and Mental Health (CAMH) engaged Zulu Alpha Kilo agency to develop a new brand strategy and launch a public awareness campaign to help end the stigma associated with mental health.

Exterior of the MNP Ottawa office building

The Digital Technology team at MNP worked with Zulu for a complete overhaul of the platform, with a modular component-based design optimized for all breakpoints and fully compliant with AODA ‘AA’ standards. Making it easier for the public to find hospital programs and services, access mental health resources, and understand the full breadth of the issues and what they can do to get involved.

MNP’s partnership brought expertise in Sitecore implementation and experience in strategy for content migration to merge multiple properties under a single domain.

The Front-end UI Style Guide System

To ensure interoperability and integrity of the solution, I built a Front-end UI style guide system with live prototypes presented in real-life conditions.

My responsibilities

Ownership of the Front-end UI style guide included reporting, coordinating development in an agile multidisciplinary team environment, accessibility standards, demos and client presentations.

  • Facilitated workshops to determine the scope, planning and prioritization of business needs and goals with stakeholders (client, agency, designers, developers).
  • Conducted research, with surveys, card sorting and user-testing scenarios with personas, to obtain a user-centric file structure and to ensure the taxonomy was meaningful to stakeholders. 
  • Investigated work flow efficiencies with a service blueprint, diagrams and wireframes.
  • Identified functionality features such as useful links, grid visualisation, status icons, and code snippets which streamlined collaboration, coding, quality assurance and sign-off approval from client and agency stakeholders.


My team included a Business Analyst, 2 Sitecore developers, 1 Front-end developer and UX designer (me) during 8 months to build, enhance, and validate more than 60 modular components and dynamic landing pages (including mega-menu and search system).

Users of assistive technology can choose to “skip” the navigation to get to the content of the page, simulating the way a sighted user’s eye will glance directly to the main content when the browser refreshes the page.

Screenshot of header with skip to content element in focus.



Formative testing determined design adjustments using validators from, Visual Studio Code plugins and NVDA screen reader.

Summative evaluations measured indicators with checkers (software such as WAVE) and usability heuristics.

Atomic design methodology

The design was organized and built with structural characteristics such as grid-layout, fonts, colors, etc., to create elements such as paragraphs, links, inputs, etc. These elements combined into complex components of the interaction designs and information visualizations such as forms, CTAs, navigation, articles, etc.

Index of prototypes

The Dashboard displayed a row for each component with links to helpful information, design mock-ups (Adobe, InVision), and live HTML prototypes (Virtual Studio, Sitecore server).

Component pages displayed the prototype with information describing design requirements and production notes along with relevant links and tools.

Page-layout prototypes combined relevant components together in context. For example: header, navigation, banner, article, CTAs, and footer.

Code standards

Components were built in HTML5 with Bootstrap 4 and jQuery using mobile-first methodology supporting older devices with progressive enhancement and graceful degradation.

Diagram of the Front-end UI style guide system.
CAMH Front-end UI Style guide dashboard displayed on various screen devices.

Accessibility compliance

Accessibility guidelines help to ensure the user experience is perceivable, operable, understandable and robust. But we must also determine the quality of satisfaction in terms of usability, comprehension and ease of use.

Using personas to structure the work, I gave particular attention to solutions aimed at blind, low vision, and mobility impairments.

Checklist of accessibility-related things that could go wrong!

  • Labels, interactive elements and descriptions need to be clear, legible and meaningful (including for screen-readers).
  • Interaction should be easy with a mouse or keyboard and help to avoid mistakes.
  • Reduce redundant syntax/info where possible (e.g. screen-reader users may wish to skip the header and menu when the page reloads).
  • Make sure content is meaningful (e.g. alt texts should give the user a good understanding of the image’s purpose on the page)
  • Headings, semantics and order of presentation should make sense in the visual presentation as well as for the screen-reader.

“Focus ability”

wireframe showing flow of keyboard focus for the mega menu

The focus state can show (or tell) where the next interaction takes place within the context of the user’s task.

For the CAMH project, I worked with Zulu’s accessibility experts to establish a wireframe flow for the focus order of page layouts and components.

The outline and HTML semantics are important for accessibility. After building the correct HTML structure, styling is used to produce the desired visual layout.

Lessons learned

Early engagement with stakeholders made the Front-end UI style guide more effective. User feedback gave meaningful organization to the elements, components, tools, links and documentation.

The Front-end UI Style Guide made it easy for us to create, enhance, share and validate designs to produce a world-class user experience for the new CAMH brand.