System Feedback & Alerts for HDS

Client
Valassis / Vericast
Project Type
Design Systems
Year
2019 - 2022
Stakeholders

Account Managers
Campaign Managers
Product Leadership
Design Leadership
UX Designers
UX Research
Engineering

While working on the internal design team at Vericast, I designed and guided development of a set of Design System components to address pain points present within system feedback and alerting throughout the entirety of Vericast’s internal tools product platform.

Jump to Final Design
View Project Gallery
[Sec 01/05—
Users
]
/
System Feedback & Alerts for HDS

Users

interacted with these elements throughout their daily routines. These users were Account Managers and Campaign Managers. The core responsibilities of Account Managers were to maintain business relationships with clients by informing them about the performance of their ad campaigns and opportunities where new or improved product offerings might perform better. The core responsibilities of Campaign Managers were to actually run ad campaigns by configuring the campaign settings according to the client’s preferences and best practices. From a Design Systems point of view, it wasn’t hard to spot the need to include alerting patterns in our library. We didn’t have common patterns like Banners or In-line Notifications at that time.
[Sec 02/05—
Useful Errors
]
/
System Feedback & Alerts for HDS

Useful Errors

It was crucial that the internal tooling clearly showed where and how campaigns were configured for targeted display. Any mistake in launching or managing a campaign could cause the loss of a Fortune 500 business partner to the tune of six digits. A user explained the need for useful alerting in this quote from a User Research survey:

"Genesis [internal tools platform] throws a lot of errors, and a lot of time when we get them we have no idea how to interpret what they are saying. It would be a lot better if errors actually told us what we needed to fix and how we needed to fix it."

In 2019 a User Researcher on our team did an audit of all the visual design patterns used for alerting in all of our internal tools. They captured a wide range of solutions implemented for system feedback and alerting. These problems were quickly identified as a strong candidate for solving via Design Systems. One of the biggest returns from investing in a Design System is visual unity and consistency of patterns across an application by documenting particular designs as reusable components to be used in every applicable instance. Further, styles from elsewhere in the system, such as typography, color, and layout, were already defined and could be used here to quickly develop a new pattern design for reuse broadly.

As a Visual Designer, I had to ensure that color was used intentionally.
We recognized that color carried meaning (red implies an error, yellow implies a warning, etc.) and that all meaning was lost, if not downright confusing, in what was the current implementation at the time. Colors were often mismatched to different types of information and used for multiple use cases on the same screen. There is also the matter of accessibility. Many errors included a mid-to-light color red on a white background, making them hard to read and definitely not to WCAG standard for contrast of legible text.
[Sec 03/05—
A history of one-off solutions
]
/
System Feedback & Alerts for HDS

A history of one-off solutions

Our User Research team presented their audit, identifying dozens of visual representations of errors, warnings, and other contextual information. This showed a history of one-off solutions created for solving an isolated problem without consideration for the effect on the overall user experience.

Risks?

  • Campaigns data might not be tracked correctly
  • Ads might not be shown to the right consumers, lowering value delivered from campaign
  • Low Vision Impaired users cannot interpret notifications
[Sec 04/05—
The First Hurdle
]
/
System Feedback & Alerts for HDS

The First Hurdle

After presenting and receiving go-ahead from design leadership, I began work on the interaction design. The first hurdle was pairing our existing use cases to industry standards for notifications and other alerting. For this I looked to resources such as NN/g who has research-backed guidance on definition of these type of patterns. I also referenced leading design systems and their documentation of similar elements/patterns for context on use case and best practices.
Channeling all of this information I defined a new suite of System Feedback & Alerts patterns that were needed to cover all of the existing use cases as well as potential upcoming needs for our tooling.
Next up was defining the Visual Design. As mentioned, we had elements with similar Visual Design approach. All that was need was to incorporate the appropriate styles, and elements into the patterns. After completing a seperate but robust color system project, I had identified a color approach for alerting, including a mapping of individual colors to different levels in information delivered in alerts including basic information, warnings and errors. Finally, to aid our Front-End Devs during implementation, we documented all of our design system components and patterns in an online wiki. For this we took advantage of ZeroHeight which had direct integration with our design tool Figma—this direct syncing of designs allowed for minimal upkeep of documentation.
[Sec 05/05—
Production
]
/
System Feedback & Alerts for HDS

Production

Getting production of these components required that either a developer be doing similar work in the component library or that the actual component was included in upcoming feature work. So I combed through our backlog and found tickets for known bugs which could be solved using any of these components. I also wrote new tickets to identify how these components should be included in feature work scheduled after the components were due to be completed. I combined all of these SCRUM tickets into a written plan which detailed the needed work. At quarterly PI planning I advocated for the inclusion of this work alongside the planned feature work. Eventually we were given the bandwidth from the team for the work and production went off without a hitch. I guided development through back-and-forth quality assurance testing done remotely with the engineer.

After completing development of the React components we went back to those outstanding tickets and made sure to note how the new components could be taken advantage of. Before I left Vericast, we had already implemented the patterns in a handful of solutions. Development of these components and patterns drastically improved the usefulness and clarity of the System Feedback & Alerting that could be presented to users in the internal tooling at Vericast. While I was not present at Vericast for long after the completion of this project, documentation of these patterns will ensure the clear transfer of knowledge needed to correctly implement these components in future work. Designers can continue to improve the user experience across a suite of applications and use-cases by updating existing instances of alerting, reducing stress in the daily lives of Vericast users and ensuring fewer mistakes impacting clients.

Let's Build Something.

Are you looking for an experienced Product Designer who can deliver digital products that meet your needs? Drop me a line! Right now I’m looking for full time work, and taking on new freelance clients. Leave your name, some details about the project, and let’s build something together!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

View More Case Studies

Design Systems

Horizon Design System

Design Systems

Color System for HDS

Interaction Design

Notification Manager

Home
Work
About
Resume
Contact
System Feedback & Alerts for HDS
Horizon Design System
Color System for HDS
Notification Manager

Phone: (828) 514-5004 |

Email: loganlabo@gmail.com