System Feedback & Alerts

Users of Vericast's internal product platform were Account Managers, whose core responsibility was maintaining business relationships with clients, and Campaign Managers, whose core responsibility was running digital advertising campaigns by configuring the campaign settings. These users had been identifying pain points with internal tools alerting for some time, including the ability to resolve errors.

Any mistake in launching or managing a digital advertising campaign at Vericast could cause the loss of a Fortune 500 business partner to the tune of six-digit campaign budgets. A user explained the need for helpful 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."

After receiving feedback like this from users, we identified a need to understand better the state of alerting within the internal tools platform. In 2019, a user researcher on our team did a visual audit of all the alerts in Vericast's internal tools.

Eventually, the user research team at Vericast 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?

• Campaign 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

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 failing the standard for color contrast of text defined by the Web Content Accessibility Guidelines.

‍

‍

‍

My role as a UX/Visual Designer included ensuring the industry standard design of the user interface of Vericast’s internal tooling.

One of the most significant returns from investing in a design system is the visual unity and consistency of patterns across an application. 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.
I recognized that color carried meaning (red implies an error, yellow means a warning, etc.) and that all meaning was lost, if not downright confusing, in what was the current implementation at the time.

After presenting and receiving the go-ahead from design leadership, I began work on the interaction design of a new set of system feedback and alerting components. The first hurdle was pairing our existing use cases with industry standards for notifications and other alerts. For this, I started by refreshing myself on alerting best practices and conducted precedent research. I synthesized this research into defining new patterns that covered the existing use cases and potential upcoming needs for our tooling.

The next challenge was defining the visual design. Fortunately, visual work had started on similar components which could be incorporated here. After completing a separate but robust color system project, I identified an approach for mapping individual colors to different levels in information delivered in alerts, including basic information, warnings, and errors.

‍

‍

Finally, I documented our design system components and patterns in an online wiki to aid our front-end developers during implementation. For this, we took advantage of ZeroHeight, which was directly integrated with our design tool Figma—this direct syncing of designs allowed for minimal documentation upkeep.

Getting the green light for the 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 wrote new tickets to create the components and identified them as dependencies for resolving known bugs. I advocated including this work alongside the planned feature work at quarterly PI planning. Eventually, we were given the bandwidth from the team for the work, and I guided development through back-and-forth quality assurance testing done remotely with the engineer.

While I was not present at Vericast for long after completing this project, documentation of these patterns will ensure the easy transfer of knowledge needed to implement these components correctly 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 impact clients.

‍