Pop-up Alerts

Add photos, customize CTA buttons, and use the site color palette. We saw immediate adoption even before the official release, with usage tripling shortly after launch. Now, 80% of alerts use images.

screenshot of the popup feature in desktop and mobile
screenshot of the popup feature in desktop and mobile
screenshot of the popup feature in desktop and mobile

Role

Role

Lead Product Designer

Scope

Scope

End-to-end enhancement

Team

Team

1 Product Manager

2 Software Engineers

1 QA Engineer

Timeline

Timeline

2 weeks

User Pain Points

The homepage pop-up alert lacked consistency in font style and website theme colors, resulting in a visually disjointed appearance.

Users were unable to personalize the call-to-action (CTA) button on their pop-up alerts ('Okay' and 'Read full story' were the only options available).

Users could not add images to their pop-up alerts.

Frequent Request

  • Based on feedback surveys

  • Technical support requests

  • Input from client service and sales teams

old modal on the admin site and the public site
old modal on the admin site and the public site
old modal on the admin site and the public site

Getting it on the roadmap

Evidence was derived from multiple sources, including:

  • Customer feedback surveys.

  • Analysis of data from churned customers

  • Requests from internal client-facing teams

  • A competitive matrix that highlighted our competitors' inclusion of the features we were lacking.

Feedback gathered over time

insights of feedback gathered screenshot
insights of feedback gathered screenshot
insights of feedback gathered screenshot

Support Cases

screenshots of support cases
screenshots of support cases
screenshots of support cases

Competitor Snapshot

screenshots of support competitors
screenshots of support competitors
screenshots of support competitors

Design

Created rudimentary sketches to capture initial ideas.

screenshots of sketches
screenshots of sketches
screenshots of sketches

Iterations and Ideas

Went through a lot of variations on the initial design.

screenshots of initial designs in figma
screenshots of initial designs in figma
screenshots of initial designs in figma

Designing the admin experience:
Flow for various edge-cases

Designed for possible scenarios within scope:

  • Creating and editing alerts

  • Scheduling alerts

  • Removing alerts

  • Various edge cases such as shared alerts (ie. districts & schools)

screenshots of user experience in figma for admin experience
screenshots of user experience in figma for admin experience
screenshots of user experience in figma for admin experience

Designing the community experience:
Public site design

Created responsive designs for both mobile and desktop platforms.

  • Designed interfaces accommodating various photo ratios including portrait, landscape, and square.

  • Ensures the alert's visual appeal even when displayed without photos.

  • Prioritized the user experiences across different devices and screen sizes.

various designs of mobile and desktop experience for the public site
various designs of mobile and desktop experience for the public site
various designs of mobile and desktop experience for the public site
various designs of mobile and desktop experience for the public site
various designs of mobile and desktop experience for the public site
various designs of mobile and desktop experience for the public site

Immediate engagement and high adoption

The feature saw an impressive surge in user engagement right after launch, signaling a robust interest and demand among our user base.

Quickly became a crowd favorite, consistently ranking among the top 5 most-used feature shortly after deployment.

screenshots of new version in admin and public site
screenshots of new version in admin and public site
screenshots of new version in admin and public site
screenshots of new design for admin and public experience
screenshots of new design for admin and public experience
screenshots of new design for admin and public experience

I'm looking for my next role!

photo of woman wearing black smiling

Cathy J. McDonald © 2025

I'm looking for my next role!

photo of woman wearing black smiling

Cathy J. McDonald © 2025

I'm looking for my next role!

photo of woman wearing black smiling

Cathy J. McDonald © 2025