The Problem

In many cases throughout the Chatham system, clients and Chathamites (employees) alike require time sensitive information involving high stakes tasks. Because no one likes to constantly click out of what they’re doing to check their email, there needs to be a faster way to get this information.

Design Challenge

Design a tool that enables the user to receive and address alerts and notifications with minimal interruption to their workflow.

The Solution

After multiple rounds of research and design, I designed a toast notification center that allows users to view system alerts while they work without having to leave their current task. This enables users to keep track of all their work specific notifications.

Getting Started

Chatham Financial plays a very specialized role in the FinTech sector. Because of this, much of my first week was spent learning the vernacular of the company. By the second week, my head was pounding from the effort of remembering terms like "financial derivatives".

Thus began Hack Week, a quarterly event at Chatham where employees can suggest projects to work on that week. Anyone who wants to join in on a project is able to, and the week is spent as a design sprint of rapid prototyping. If a project gets enough traction during the week, it may be worked on further, eventually being developed.

With my head still swimming with finance jargon, I gravitated towards a project that seemed a bit easier to understand, reworking Toast Notifications.

So what are Toast Notifications? If you’ve ever seen a notification that pops up like this, you’ve seen a toast.

They are basically popups that provide you information varying from warnings, alerts, errors, and successes. 

And so for a week I spent my time working on a few quick designs of what a Toast Notification Center might look like.

These are just a few of the designs I drew out and put into Sketch. When the week was over, I closed the Sketch file I was working in and fully expected to never look at it again as I got back to work on the Design Pattern Library redesign.

To my great surprise, however, a few days later my mentor told me that the project was getting picked up for development and that my next steps should include user research.

Identifying the problem

Now that I knew I was going to continue working on this project, I needed more information to work off of. I had to hold some user interviews to identify the issues this tool was going to resolve.

With that in mind, I reached out to several of my Design team teammates who worked with the users that would be using the product to identify user personas and insights they had already gathered.

I learned that the main issue we were trying to address with the Toast Notification Center was that many of the users of Chatham Direct (Chatham's Treasury Risk Management Platform) required time sensitive information in order to do their jobs. They worked directly with their clients and/or large sums of money, so efficiency was imperative.

The problem is that how users currently receive that information is through email. Whether it is an error in the system, or a reminder to make a trade within the next hour, all that information is received via email. This means that the user has to click out of whatever they're doing to check their email to see these notifications.

There is also no centralization of Chatham Direct specific notifications, which is especially annoying for users who only need to access the system around once a month to input information and/or make and approve trades.

Something we also had to research and design was how the toast notifications actually popped up. How many should pop up at once, when should they disappear (should they disappear at all), what happens if you just logged in and you have too many toasts to look at, etc.

Design, Meet, Repeat

Armed with the knowledge of who I was designing for and the core issues, I took another look at my initial designs. I knew that our aim was to provide as little interruption to the users' workflow as possible. Because of this, I chose to move forward with the sidebar design.

The dropdown design could not have shown all the missed toast notifications without excessive scrolling and the inbox like design was essentially the same as leaving what you're doing to open your email. The sidebar design, however, would allow users to view both toast notifications and their current work. If a user wants to view all of their toasts without interrupting their current task, they need only click the notification bell and the toast notification center will be shown.

I presented my initial design at our weekly Design Team meeting, seeking additional feedback on what users were looking for. I learned that sometimes toasts might reoccur from the same source, such as if inputting data keeps failing. There was also some desire for a messaging/tagging system for users to alert their coworkers or clients of an area of interest without leaving the program.

This is the design I made based on that meeting.

In this design I added toast "category tabs" that you could filter all the toasts in your notification center by. I also added the time a toast was received, whether it had been viewed or not, and a messaging system.

To be honest, I wasn't too sure how the messaging was supposed to work at this point, so I based it heavily on the messaging services that I myself use. (I was also watching a lot of "Breaking Bad" and "Better Call Saul" at the time if you can't tell from the names).

The messaging system would be a point raised in future meetings, as myself and others were already questioning how necessary it was.

After another meeting, I moved away from messaging and made a few aesthetic tweaks.

Clicking on the stacked same messages reveals the individual messages and the times that they were sent.

This design completely did away with the messaging system, which was pushed back to be considered in the future. There is also a clear aesthetic shift that felt sleeker and more elegant. Like previous designs, there is a delete all option to get rid of all of the toasts in your notification center. The indicator for whether a toast has been "viewed" was also updated to greying out toasts that have been viewed and leaving "un-viewed" toasts untouched.

By this point in the design process, I had run into a couple roadblocks.

• How to filter toasts: It felt unnecessary to have so many category different tabs for filtering the toasts. Based on feedback, most users wanted to see everything laid out for them as well, and it was unlikely they would bother clicking into those tabs.
  ‍
  
• How to tell if a toast has been viewed: My current design showed when a toast has been viewed by greying out the toast banner. When I presented this design at a meeting, I was told that this is used in other areas of Chatham to indicate that a function is disabled, so I had to find a new way to represent viewed/unviewed toasts.
  

After two full weeks of user surveys, interviews, and white-boarding, I was able to reach my final design.