TedGrafx

Objectives:

Overall Dashboard Layout:

Re-prioritize the positioning of the elements on the page.

Icons on Webcam Hover:

When the user hovers their mouse over the live Webcam feed, the icons display on the right side, and they are not always visible–depending on the background image/colors.

Time Sheets Need Help:

Come up with a better way to display this data–other than in a tabular format. The agents and administrators must be able to drill down into this data fairly deeply.

Before:

Solutions (see after screenshots):

Overall Dashboard Layout:

I decided to go with a two-column layout, allowing the time sheet data to take up the larger right side.

The screenshots of each monitor are the top priority, so I moved them to the left column and placed them at the top.

The live webcam feed was placed in the left column also, just below the screenshots, as it's the least important element on the dashboard.

The large 'main' area on the right was designated for the enhanced timeline (replacing the previous table).

Icons on Webcam Hover:

I chose to define a small designated area on the right of the live webcam feed which always displays the icons for actions–no longer on hover.

I also defined a solid background color so the icons are always visible, regardless of the webcam background image/colors.

Time Sheets Need Help:

A timeline was designed to display the large set of time sheet data.

A 'daily' and 'weekly' view were designed to allow the user multiple views into the data.

The user can now choose the Type of activity using the tabs across the top, and they can also choose the Date (or date range) for activities.

After (Daily):

After (Weekly):

Objectives:

Incorporate All Products (suite of 7 products):

The challenge here is to give the user the ability (where priviledges allow) to navigate to multiple products from the dashboard, while also allowing the user easy access to the dashboard at any given time–without confusing or overwhelming the user.

Navigation Between Products and Main Dashboard:

Similar to the first point, users with certain priviledges need a clear way to navigate between products, both from the dashboard and from within each product.

Defining/Designing Widgets for the Dashboard:

We needed to come up with useful data widgets to display on the users dashboard.

Defining/Designing a Style Guide:

With a company merge, and a new dashboard to combine new and existing products, the time was right for a re-branding–starting with the dashboard.

Before:

Solutions (see after screenshots):

Incorporate All Products (suite of 7 products):

Our solution was to create a fully responsive design (sort of "shell") which handles user-specific elements in the header, navigation between the products and within each product on the left, and a footer containing legal information as well as "floating" dashboard data widgets.

Navigation Between Products and Main Dashboard:

In the left navigation column, near the bottom, are the different products the user has access to. The options to navigate within a particular product sits at the top of this column.

Defining/Designing Widgets for the Dashboard:

With the help of our Product Manager, we defined and designed 6-8 data widgets with which the user can customize their dashboard. Some of the widgets included: Claims Exception Automation, Daily Claims Processed, Weekly Progress History, To-Do List, etc...

Defining/Designing a Style Guide:

We designed a new Style Guide which took into account an eventual re-design of all the products. The new Style Guide was first applied to the Dashboard.

After:

As a team we were initially tasked with "porting" over an old desktop application to the web.

I was initially responsible for the new design and the front-end markup (HTML/CSS/JS) along with a fair amount of back-end (ASP.Net and C#) code.

During this time, I presented many demonstrations–to both internal and external audiences, and I also gave a number of presentations at our annual User Conference, often interfacing directly with our clients. I was also able to organize on-site and tele-conference visits with groups of our clients to gather insightful and meaningful user feedback and research. I then worked closely with Product Owners to distill this feedback which guided our decisions on product and feature designs.

After a company merge, I spearheaded the alignment of two disparate design/development teams, which I was the sole designer for. At this time, the company's focus changed substantially and teams were reassigned to different projects. I was then reassigned to a dashboard/re-branding initiative of which some can be seen in the previous 'Health Care Dashboard' example.

Due to certain security legalities, I'm only able to show a small sampling of this application here.

The bulk of this application was form-based. It was basically a gi-normous form, with literally hundreds of fields. This small sample shows a snippet of how we were handling the form validation. We employed a clever feature where if the form was submitted with errors, a little popover window would display next to the field in quesition and it would automatically move from field to field as you went along–guiding you through resolving the errors–until all errors were fixed.