During my time at a Fortune 500 financial company I was given a simple task. I was to redesign a very old internal-only system. The system monitors SEC filings from publicly traded companies. Once a an entity files, an alert is generated that includes metadata, analytics, and snippets of text from the original filing. This alert is received by an analyst for review.

The overall design of the front-end website was 4 versions behind the current style guide. The site consisted of 2 pages. The first listing all the alerts and the second the detail page once you selected an alert to review. More than half the active users had over 500 unread alerts. After some digging I discovered users were just going from the email alert directly to the entity’s website, bypassing the alert platform altogether.

So how do we direct them back to the platform to gain better insight and engagement from the users?

Existing Design Analysis

When I first began to think about what this application’s purpose really was the inbox paradigm keep creeping into my brain. If I could take the ruleset from this application and fold it into an email type program then I could flatten it from 2 pages to a single infinity scroll page. This approach also made it very easy to institue response design to carry over to a mobile platform/size.

Repetition: Since the alerts had similar categories the opportunity for repetition was enemies. Columns that often repeated included, “unread”, “Category A”, and “Category B”.
Information Architecture: Taking responsive design into the overall design roadmap it made more sense to collapse the Alert Listing/Alert Detail paradigm and simply have both elements on a single pane similar to Gmail, Outlook, etc.
Style Guide: The existing site has about 3 versions behind the standard style guide (font type, size, color scheme, element library). By just reformatting the existing site to match the current guide the overall look was great, but the design was still inherently flawed.
Text v s Graphs: I have a firm belief that where a table exists, a graph must take its place. Graphs allow the user to engage and consume information in a fraction of the time as to leaving it in table form. Given the snippet percentage (how well a blurb of text matches a statistical model) and category labels I saw an opportunity to introduce some graphical elements.

User Interviews

Most of the concept development was done talking only to engineers and no active users. After completing 3.6 data was returned from users and as a result, this concept was terminated in favor of another direction/design.


Initial Concept

Select image to view larger

Taking cues from e-mail programs I began to experiment with which logical combinations of types of information made the most sense. The first iteration included Incoming > Form > Alert Type

Iteration #2

Select image to view larger

After two iterations the thought to have alerts orderable by Time > Form Type > Alert didn't seem like a logical choice. The 3 pane look also didn't leave much space and was abandoned in favor of a 2 pane layout. Clockwise radials were introduced to display the percentage match. The form type, the most important categorization, was given prominent placement and size. All of this was done to increase scanability for the user.

Iteration #3

Select image to view larger

Material Design cues were introduced along the alert header. If multiple alerts were available when scrolling down the page it would appear to slide under the header. The radials were moved into the alert section to save space and seemed like a better fit organizationally. Form type was increased in size again for scannability. Categories were converted to tags and placed with the incoming alert notification for the user to find exactly which alert they were after. Included at the top is a dynamic search bar, sort functionality, and filtering. Users could filter/sort by Form Type, Date, Name, Category/Tag

Iteration #4

Select image to view larger

On the final iteration the incoming alert elements were shrunk to maximize the number of alerts you can view within a single page. More material design cues were introduced with the indented radials, the card grouping for similar alert text, and the category heading wrapped around the card. Static filter tabs at the top of the alert detail were added to quickly view 1 of 4 states of the alert detail data. Help cues are placed throughout to reinforce to user how they voted, when they voted, and how many items they have left to vote. Items left to vote are indicated by the 4 or less circle elements under the form type label on incoming alerts. If the circle is full, you voted, if it’s empty, you still have items to vote on.

RESPONSIVE design Interactive Prototype

Given that the platform is time sensitive and based on an Alert,
It only made sense to create a mobile mock-up. All the same design
cues and behavior carried over from the desktop version to this responsive mobile design.

User are taken directly from the sleep screen to the alert itself.
Users can then select the back button to return to the full list of alerts.

This prototype was created using Marvel App