top of page

Rethinking Design Component for Better UX

Screenshot 2024-01-05 at 11.24.24 AM.png
Project Overview

The City of Calgary Web & Digital (WD) team develops, oversees and manages the City's online presence. They are responsible for maintaining and facilitating calgary.ca and myCity (Intranet) along with various micro-sites, mobile apps and custom applications.

During my tenure, I got the opportunity to work on multiple projects across different business units. I leveraged many different UX methods that include technical expertise to analyze, design, implement, test, deploy, and sustain user experiences for technologically advanced digital products and services. I also collected and synthesized multiple data sets to accurately advocate and design digital solutions for users. One among those opportunities was to research and recommend about Alert Banners.

Alert banners
The problem

The Summit Design System uses notifications to highlight urgent information about systems, programs or services that may impact citizens. With numerous information to process on a regular basis, and some being unexpected, citizens get overwhelmed and may also increase the chance of missing them out. The banners need to be incredibly effective and grab a visitor's attention without interfering with the rest of the website content. Also, with the long-term pandemic situation, came an increasing awareness on alert fatigueness.

The research

Design systems are inclusive tools — they serve more than just designers and developers. They can support the success of any company, and as such, it has stakeholders across various departments, including research, marketing, QA, and executives.. Each person will have different experiences, attitudes, expectations, skills, and abilities that will affect how they experience the design system. 

I conducted both generative and evaluative research to identify the pain points and understand what's working well and what is not. I used different research methods with the stakeholders and also the facilities within the city to gather insights on how well the component support decision making for people within different disciplines.

I used an engaging framework in my research that incorporated the three pillars of the Summit Design System:

  • System

  • People 

  • Process

The research was majorly divided under three aspects:​

  1. How to use alert banners and write content to inform users and trigger behavior change

  2. How to enable internal web teams use banners properly and consistently accordingly to UX and content guidelines, city plain language policies, etc.

  3. How to make sure that banners are effective given the new scenarios of usage (eg, using alert banners for COVID-19 that is on long term, which can cause users to no longer notice them)

Comparitive study

I also conducted a comparative study on global design systems and attended couple of workshops organized by Gov.uk design system team. Comparative studies helps review best practices and can help to evaluate design quality, identify areas of improvement, and justify design decisions. Through comparison, it can be ensured that the design fulfills basic requirements of functionality, usability, and accessibility.

The recommendations

Along with some general guidelines on banner anatomy and content, I shared some critical insights and details on the usage.

  • Banners should be designed and named based on the semantic purpose they serve. Similarly, they should have a semantic color. Well, it could be tempting to make heavy use of bold colors to draw attention but one should be cautious as those colors can produce strong negative emotional reactions such as fear or panic.

  • Based on the severity of the situation, a banner should have the following variants: error, warning, information and success. And it is important that the colors match the purpose of the banner and address scenarios. Scenarios for usage should focus on impact to the citizen, not business priority.

    • Failure/Danger (Stop!) : Red​

    • Warning/Caution (Heads Up!) : Yellow-Orange/Amber

    • Success : Green

    • Information (FYI) : Blue

  • Visually, an alert banner should stand out, but must do so in a way that is accessible to all visitors. It should be large enough to capture attention and convey the message, but shouldn't take over the browser window or block users from completing other tasks. The banner should scroll along with the surrounding content, since fixed positioning on the page and screen can obstruct other element or disorient the viewer.​

  • With the pandemic situation stretching on, people became less receptive to alerts and warning messages, the more often they see them. This is called alert fatigue. Another aspect to consider is inattentional blindness, when an individual fails to perceive an unexpected stimulus in plain sight, purely as a result of lack of attention rather than any vision defects or deficit. To overcome these challenges:

    • Alerts should be temporary (the time is very subjective and depends on variables like business requirement, frequency of site visit, severity of the situation, etc.)

    • They should be short and simple

    • Choosing the right type of banner for the situation

    • Limiting the number of banners and evolving them based on the change in the situation

Based on the above insights, I wrote the design system content along with recommending some next steps for calgary.ca.

  • Renaming the different banners with their semantic purpose

  • Using modals, when the urgency is such that the user workflow needs to be interrupted

  •  Using persistent global notifications when the message is relevant to the entire product or system, not just a feature or page. 

  • Using inline notification for contextual information, and placing them in close proximity to the piece of the content

  • Using toast notifications for providing immediate feedback for user-triggered actions

The next steps

Based on the above insights, I wrote the design system content along with recommending some next steps for calgary.ca.

  • Renaming the different banners with their semantic purpose

  • Using modals, when the urgency is such that the user workflow needs to be interrupted

  •  Using persistent global notifications when the message is relevant to the entire product or system, not just a feature or page. 

  • Using inline notification for contextual information, and placing them in close proximity to the piece of the content

  • Using toast notifications for providing immediate feedback for user-triggered actions

bottom of page