Clint McKoy


Creative Works by Clint McKoy

Compensation: A Responsive Web App

The existing web app with confusing menus and no real hierarchy

The Problem to Solve:

Colonial Life sales agents need a way to view their weekly compensation and associated reports. The existing web app was difficult to navigate and impossible to use on a mobile device.

The Solution:

A beautiful, responsive web app that's easy to navigate and provides essential information at a glance

One of many wireframe views

The Process:

Our Information Architect spent countless hours meeting with business folks and end users to gather requirements and distill feature requests. The end result: a comprehensive set of wireframes.

With a finished set of wireframes in hand, I began the visual design process, seeking to further simplify the interface and create a visual hierarchy that would allow agents to differentiate gross from deductions from net. 

Problems along the way:

One issue we faced along the way came from the legal department. We were given a lengthy legal message that was to appear on virtually every page of the site, on every visit. Thankfully, I was able to convince legal of another solution where the message would appear once, just after the loading screen, but require the user to check a box to continue (and never see the message again).

The Finished Product:

We were very happy with the end product. Agents can now access their compensation anywhere, anytime, on any device. 

Project highlights:

  • downloadable reports are easy to find
  • legal information is minimal
  • there is an easy-to-read visual hierarchy
  • larger screens feature an intuitive toggle button to view data in table format when necessary 

Loading screen (mobile)

Legal message (mobile)

Recent checks view (mobile)

Detailed view with reports(mobile)

Recent compensation view (tablet/desktop)

Roles: UI Design