Cisco Smart Services User Experiences

Platform: Web Responsive

The Smart Services User Experience (SSUE) tool is a dashboard-style desktop application that allows for Cisco's customers to manage, view and respond to critical alerts for their Cisco tools. 

Team:

1 UX Designer (me)

1 Visual Designer

2 Developers

1 User Researcher

1 Product Manager

the challenge

The challenge was to identify the best way to enable fast search of individual data rows thru filtering and search; differentiate clearly between global and contextual menu items on the dashboard feature and enable for effective manipulation of data rows like editing data cells, deleting and viewing child rows.


research

Ideate: I created mockups based on discovery and interviews that addresses goals and struggles using the Smart Grid tool.

Validate: A user researcher conducted a usability test using the prototype based on the wireframes to validate against a set of metrics and objectives.

Design Approach to Developing a User-Centered Product

Personas: Based on the interviews, we developed two personas that encompasses typical users of this type of application.

Conduct Interviews: We conducted interviews with Cisco employees about their experiences using a prototype of the Smart Grid application by completing several representative tasks on the Smart Grid tool

usability study

A qualitative informal paper prototype study was conducted on the Smart Grid application with Cisco employees.  In this study, we strive to understand how users reacted to design layout and labeling terminology as well as providing them with scenarios and asking how they would complete the scenario with the designs.

We asked participant feedback on some key screens. 

Participants liked the Quick filtering capabilities that allows them to easily narrow down the data table into consumable and manageable units.  However, they had difficulty understanding the relationship between global and contextual menu items.  They were unsure that selecting a row in the data grid meant that certain contextual menu would appear and be applicable to that row.

wireframes

Based on the usability research, I came up with the initial set of wireframes and flows for the Smart Grid tool, mainly on the following points:

  • Create contextual menus for better column management.

  • Access to actions (eg. Add column, quick filter search) that are intuitive.

  • Ability to apply filters for each column easily to see only the rows deemed important.

  • Quick filters and advanced filters to streamline tool management process

final designs

I designed the mockups for several key screens of the Smart Services tool. The key screens are for dashboard, which provides dashlets allowing users to view KPIs for different areas of their tool and a data grid, which allowed for detailed view of the status of their product's attributes as well as actions associated with edit, add, remove and filter/sort functionalities.

Here’s an anatomy of the data grid for the Smart Report

Dashboard

Visualization of an attribute in dashboard

Here’s the anatomy of the quick filtering and action menus.

Smart Report with detailed area

Mobile: Dashboard swipe