CASE STUDY 05
Rethinking
Alert
Banners
A UX architecture and research engagement to evolve the Summit Design System's notification components - so citizens get critical information, not notification fatigue.
UX ARCHITECT . DESIGN SYSTEMS . CITY OF CALGARY
CLIENT
City of Calgary - Web & Digital
SYSTEM
Summit Design System . calgary.ca
MY ROLE
Senior UX Designer (Architect)
METHODS
Generative & Evaluative Research · Comparative Study · Content Design
IMPACT
RESEARCH
FINDINGS
DESIGN SYSTEM
CONTENT
COMPONENT RECOMMENDATIONS
OVERVIEW
Design system
that matter.
The City of Calgary's Web & Digital team is responsible for the online presence of one of Canada's largest municipalities - managing calgary.ca, the myCity intranet, micro-sites, mobile apps, and custom applications. During my tenure, I worked across multiple projects spanning different business units, using a broad range of UX methods to design, implement, and sustain digital experiences at civic scale.
One of those engagements was a deep research and architecture initiative into a deceptively complex problem: How should alert banners work in a design system used by an entire city - especially when citizens are already exhausted from pandemic-era notifications?
UX ARCHITECTURE LENS
This wasn't a UI refresh. It was a systemic refresh.
The Summit Design System is a civic infrastructure tool — used by designers, developers, content teams, QA, marketing, and executive stakeholders across the City. Any change to a core component like alert banners ripples across dozens of products and teams. My role was to approach this as a UX architect: researching the full stakeholder ecosystem, establishing principled guidelines grounded in cognitive science and accessibility, and writing the design system content that would govern how banners are used city-wide - not just how they look.
THE PROBLEM
When everything is urgent,
nothing is.
The Summit Design System uses notifications to surface urgent information about city systems, programs, and services. But the sheer volume of information citizens encounter - combined with years of pandemic-era alerts - had created a critical usability failure: banners were no longer working.
"Alert banners need to grab attention without creating anxiety, interrupt without obstructing, and inform without overwhelming. That's not a visual design problem — it's an information architecture problem."
Two distinct cognitive phenomena were compounding the issue. Alert fatigue - where repeated exposure to warnings reduces their perceived urgency, was being accelerated by prolonged pandemic messaging. And inattentional blindness - where expected stimuli in familiar positions stop registering entirely, meant citizens were visually scanning past the very banners designed to stop them.
The challenge wasn't to make banners louder. It was to make them smarter.
RESEARCH FRAMEWORK
Three pillars.
One design system.
Design systems are cross-disciplinary tools. They have stakeholders in research, marketing, development, QA, content, and executive leadership, each with different mental models, workflows, and expectations. I structured my research around the Summit Design System's own three-pillar framework, ensuring the investigation was as systemic as the solution needed to be.
SYSTEM
PEOPLE
PROCESS
How the component is built, configured, and maintained and where technical constraints shape what's possible in practice.
Who uses the design system and who experiences its outputs - from the content editor publishing a banner to the citizen encountering it.
How decisions about banners get made - governance, content approval, when to use which variant, and how teams stay consistent across products.
Research combined generative methods to understand current attitudes, behaviours, and pain points - with evaluative methods that assessed how well existing components supported decision-making across disciplines. I used both stakeholder interviews and facilities within the City to gather insights that cut across the full system.
01
How to use banners and write content that triggers behaviour change
Investigating what makes a banner actionable, not just noticed. What language, framing, and tone patterns prompt citizens to act rather than scroll past.
02
How to enable internal web teams to use banners consistently
Understanding the gaps between the component guidelines and how teams were actually applying them and what guidance was missing, ambiguous, or too abstract to act on.
03
How to maintain banner effectiveness in long-duration scenarios
Examining how prolonged, repeated use of alert banners as seen during COVID-19 degrades their cognitive impact and what design and content strategies can counteract this.
Comparitive study
I conducted a comparative study across global design systems to benchmark Summit against leading civic and enterprise notification patterns. I also attended workshops run by the Gov.uk Design System team - one of the most rigorous public sector design system practices in the world.
Evaluated how peer systems name, categorise, and version notification components
Assessed accessibility implementations and WCAG compliance approaches
Identified best-practice patterns for scoping banner types to specific use cases
Used findings to justify design decisions with cross-functional stakeholders
ARCHITECTURE RECOMMENDATIONS
Semantic purpose
over visual habit.
The core architectural shift I recommended was deceptively simple: banners should be designed, named, and coloured based on their semantic purpose - not by convention or visual preference. This principle, consistently applied, solves the majority of inconsistency problems across the design system.
VARIANT 1
ERROR /DANGER
"STOP!"
VARIANT 2
"HEADS UP!"
WARNING
VARIANT 3
SUCCESS
"DONE!"
VARIANT 1
INFORMATION
"FYI"
Reserved for critical failures and blocking states. Red must be used sparingly - overuse erodes its ability to signal real danger.
For situations requiring caution. Amber signals awareness without panic - appropriate for service disruptions or time-sensitive changes.
Confirmation of completed actions or resolved states. Green provides positive reinforcement without demanding prolonged attention.
Non-urgent context or system updates. Blue communicates without urgency - important for citizens who need information without alarm.
A critical design principle underpinning this system: scenarios for banner usage should focus on impact to the citizen - not business priority. A service being slow to process internally is not a citizen-facing danger. Framing it as one erodes the system's credibility.
DESIGN PRINCIPLES
Attention without
obstruction.
Beyond variant semantics, the research surfaced a set of architectural principles that needed to be codified into the design system - governing not just what a banner looks like, but how it behaves in the full page context.
PRINCIPLE 01
Visible but not dominating
A banner must be large enough to capture attention and convey its message but must never take over the browser window or block citizens from completing other tasks. It should scroll with surrounding content; fixed positioning disorients viewers and obstructs other elements.
PRINCIPLE 02
Accessible to everyone
Visual distinction through colour alone is insufficient, banners must meet WCAG contrast requirements and use iconography and text to communicate meaning, not just hue. Bold colours can produce strong negative emotional reactions when overused; restraint is itself an accessibility consideration.
PRINCIPLE 03
Right type for the context
Not every notification is a banner. Modals interrupt workflow when necessary. Inline notifications belong in proximity to the relevant content. Toast notifications confirm user-triggered actions. Persistent global notifications serve system-wide messages. Using the wrong type for a context breaks trust.
PRINCIPLE 04
Temporary by design
Banners should have a defined lifecycle - the appropriate duration depends on business requirements, visit frequency, and severity. Permanent banners train citizens to ignore them. Even critical messages should evolve as the situation changes, to prevent habituation.
COGNITIVE DESIGN
Designing against
the brain's own defences.
The pandemic context introduced a dimension to this project that no previous design system work had needed to account for at scale. Two cognitive phenomena , both well-documented in psychology, were actively undermining the effectiveness of the City's alerts.
Two phenomena. One design challenge.
ALERT FATIGUE
"The more often people see warnings, the less receptive they become."
Repeated exposure to alert banners, particularly over long durations causes citizens to normalize them. The signal becomes background noise. This was measurably accelerated by prolonged pandemic messaging across every digital channel citizens use.
INATTENTIONAL BLINDNESS
"An unexpected stimulus in plain sight - missed purely because of how attention works."
When banners appear in predictable positions, the brain begins to filter them out as expected visual noise. Citizens aren't ignoring them deliberately, their attention architecture is doing exactly what it's designed to do.
The design system response to these phenomena required both component-level and governance-level interventions - changes to how banners are built, and changes to how teams are guided to use them.
Make alerts temporary — define a lifecycle appropriate to the severity and visit frequency of the context
Keep messaging short and simple - cognitive load compounds fatigue; every unnecessary word reduces effectiveness
Choose the right banner type for the situation - mismatched severity and variant trains citizens to distrust the system
Limit the number of concurrent banners - competing alerts neutralize each other
Evolve banners as situations change - a static message in a dynamic situation signals that no one is paying attention
DELIVERABLES & NEXT STEPS
From reserach
to design system content.
The final output of this engagement was the design system documentation itself - not just a research report, but actionable, written guidance that any team at the City could apply immediately. I also recommended a set of next steps to evolve calgary.ca's notification architecture beyond the current state.
Rename banners semantically
Replace generic naming conventions with names that reflect semantic purpose - so every team member immediately understands when and why to use each variant.
Introduce modals for workflow interruption
When urgency requires stopping the user's workflow entirely, a modal is the correct pattern, not a louder banner. Define clear criteria for when this threshold is crossed.
Persistent global notifications
For messages relevant to the entire product or system, not a single page or feature, introduce a persistent global notification pattern with its own governance rules.
Inline notifications for contextual information
Contextual information belongs in context, placed in close physical proximity to the content it relates to, not surfaced as a system-level banner.
Toast notifications for user-triggered feedback
When a citizen takes an action, they need immediate, lightweight confirmation. Toast notifications provide this without interrupting the broader workflow.
Design system content documentation
All recommendations formalized as design system documentation, written for the range of disciplines who use Summit, from content editors to engineers to product owners.
The most impactful design system work isn't always visible in a UI. Sometimes it lives in the decisions a team never has to debate again, because the principles are clear, the patterns are named, and the guidance is written for everyone who needs it.