main3.jpg

Intelligaia / Cisco

Re-imagining Cisco’s dashboard UI as a timeline where a Cisco Partner or Seller can quickly gather information on the Cisco workflow. Sellers for example, are usually ­keeping an eye out for expiring contracts and ­opportunities to provide new services to existing clients. This exploration is an attempt to look at how an on-the-go UI timeline can aggregate and visually present simultaneous information on various customer metrics that would normally be presented in a tiled format with lots of charts, graphs and diagrams. The goal was to reduce chart junk and to give control back to sellers by adding several levels to the interface where a seller can get a broad overview or navigate deeper to get more information on a particular customer. This project was done in collaboration with Rajiv Kaul, creative director at Intelligaia.

Cisco-Timeline.jpg
Dashboard Timeline

Dashboard Timeline

One of the main goals was to help Cisco sellers get a broad overview of customer data through the Uber dashboard. I came up with a form of notation for some of the metrics, mainly RF (refresh), RE (renew), AT (attach), Customer Icon (requests) and black dots for tasks. One of the main influences at this stage of the project was Labanotation by Rudolf Laban (image below).

Labanotation.jpg
003_Timeline_Wireframe.jpg
Extending the brand language

Extending the brand language

In this wireframe, the timeline on top indicates the amount of activity happening on that particular day. I designed it so that it shadows Cisco's logo, while it is more pronounced here, it is a lot more subtle in later versions. 

Visual-Comparsion_Cisco_Timeline.jpg
Going a level deeper

Going a level deeper

Sellers can go a level deeper to find more information on a customer. The graph at the bottom of the wireframe communicates amount of activity and can be used as one of the ways to navigate the timeline. 

007_Timeline_Wireframe.jpg
005_Timeline_Wireframe.jpg
Circles, not squares!

Circles, not squares!

Circles are obviously a better choice to communicate quantitative data and we decided to revert back to that.

Color changes everything

Color changes everything

The addition of color made this version of the timeline too overwhelming (see above image). It is at this point that I realized that the graph on top is redundant with the information below it. Another aspect that did not work out was that the squares were now looking more like post-it notes! Combining the graph (comprised of circles) on top with information/icons/notations below produced a much more efficient version (shown below)

001_Timeline.jpg
004_timeline.jpg
002_Timeline.jpg
A case for contrast

A case for contrast

The dark UI has much better contrast, the circles really stand out on the darker background and appear less busy overall. It is however harder to discern the type/icon positioned inside the circle. 

Goals

Goals

Moving forward, the important questions that will impact the overall usability and success of this product are as follows.

Can users navigate through the UI dashboard intuitively.

Is the UI enjoyable to look at and work with. Are they having fun while being productive.  

Are there enough visual cues to guide them to their goal, which in this case is about being able to extrapolate relevant customer data.

Going off of the previous question, is important customer data visible as and when it is needed.

 

003_DarkUI.jpg