Tyson Reeder UX Designer / Visual Designer
Back to All Work

Sales Reporting Web Application

One of my early projects at Mutual of Omaha was working on a web app that allowed our sales professionals outside the office to access data, that was previously unattainable while on the road.

A proof of concept had been built by our IT department and deployed to the sales distributions with one major problem…No one was using it.

The proof of concept that was released looked like this. It was thought that this would be a site that housed a lot of important sales information.

Their plan was to revisit the proof of concept and develop a more in-depth reporting tool inside of it.

When the team came to my team I was presented with these ideas of how the tool could work. They told me that just needed me to make it look nicer and work on the UI.

A screen of what they thought should be built.

Once I learned that the real problem was that they had a tool out there that wasn't being utilized I knew I needed to educate the team on the importance of user interviews and usability testing. The product owner saw the value in this work and how it would help him create a useful tool. I joined the team and played the roles of Visual Designer, Interaction Designer and Front-End Developer.

We conducted stakeholder and user interviews. From there we developed a persona and scenario to work towards.

A few key things emerged as very important for both stakeholders and users

The polished design

We tested some rough prototypes with the user which helped polish our design idea. I took this information and designed the interface.

I wanted to give the user a snapshot of how things were running and let them dive in from there. I hoped to show goals in a very visual way to let them quickly know where they stood. Also I felt it was very important for them to understand the time period of the data.

Exploration for the sticky subnav.

Release 1–2 happened before I was a part of the project

Release 2

Since I was brought on later rather than earlier, a lot of the database structure had already been built. So I did what I could to implement the initial design in the short time frame.

The user could pick between a few dashboards to see high level information pertaining to that constraint. From there they could drill down into the hierarchy of information on the right half of the screen.

Release 2.1

Release 2 was a good first stab at getting the users the information they needed, but it was tedious to navigate the data. With Release 2.1 we added the ability to filter the vast amount of data to the things they wanted to see.

The user could Filter, Exclude and Compare data on the different reports.

Release 3

From testing it became very apparent that the idea of global filters vs section filters was not understood by the users. With this release we removed this confusion and created one filter button, something I had suggested at the beginning of the project. The name “compare” did not seem to resonate with the users so I renamed it to “Breakdown Numbers” a phrase that many had said during our testing. I continued to polish the design and test with users. We also broke this functionality out into its own button.

Release 3.1

Our next release added the ability to edit reports, add new role reports and restructured the way we display our data.

I tested the latest release with our users and there was a lot of excitement around it. We learned that, while we gave them tools to do what they needed to in previous releases, they would have to invest some time and play around with which filters to add and how they should manipulate the data. This was something the majority would not do. So we adjusted.

We talked with some key users to learn what is the data that can help them do their job better. There was a lot of overlap between people and roles so we started building steps to quickly get them to this data.

We created a set of reports with the focus of seeing how a broker is running with Mutual of Omaha.

Here is that interaction:

After selecting the Broker Overview we just need to know the broker they are interested in learning more about

They are then presented with a screen that gives them a high level understanding of the broker

From there they can drilldown into the information and we show them what they are looking for at each stage.

By talking with the users we were able to understand what they need when they need it. The broker overview was created because many times they just want to be able to see how a specific broker is running. Instead of making them think of how to filter down to this data we just ask them one question and we handle the rest. These reports along with saving of customized reports are some of the most valuable additions we have made to the application for our users.

Also, here is a GIF showing how the application is responsive.

My Roles on this project

Visual Designer, Interaction Designer, Front-End Developer (HTML, CSS, Angular manipulation in HTML) and Copywriter (for the communication the copy was started by me).

At the beginning of the project I had two different Interaction Designers helping, but they got pulled off the project..

Other Case Studies

MutualofOmaha.com Sticky Navigation Enhancement

Detail about the design decisions that went into the global navigation on Mutualofomaha.com.

Mutual of Omaha Digital Design System

A design system to help developers and designers make better design decisions that adhere to the Mutual of Omaha brand.

Medicare Advice Center

The creation of the Medicare Advice Center. A tool that allows anyone to learn more about Medicare and what solutions what might be best for them.