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.
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.
Team
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.
Approach
Research
Formative testing determined design adjustments using validators from W3.org, 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.
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”
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.
