Menu

Cisco UCSD Journey

CLICK HERE TO SEE CISCO UCSD JORNEY VIDEO

Cisco UCS Director improves consistency, efficiency, and speed within your organization. It accomplishes this by replacing time-consuming, manual provisioning and de-provisioning of data center resources with automated workflows. Cisco UCS Director reduces delivery time from weeks to minutes.

Marketing

After it’s acquisition, Cloupia was branded as UCS Director and is now an important part of the Cisco UCS solution. The product features were getting a lot of attention but the UI that manages, monitors and automates workflows / orchestration was still a skeuomorphic flex based app.

This is how the flex based paginated application looked when we got started on the re-design.

old-product
UCS Director Admin & End User version dashboards

In an effort to bring a better experience the Cisco Executive team decided to completely revamp the product. HTML5 based flat design was the goal.

After spending a week playing with the product, we started wire-framing the information and navigation architecture. The Navigation architecture was based on 3 experiences.

skydive
Skydive

High level dashboards lead to details on contextual click-through navigation

Mega Menu

Provides one-click navigation to the entire product

Search

Regular and syntax search provides an efficient way for users to find their resources

UCSD has such a complex and heavy user interface it needs maximum simplicity. To achieve this, the design needs to be entirely stripped down to the minimal. A minimum amount of colors, separators, patterns, interface and chrome. The focus is the data.

To guide the redesign, we applied industry standard UX best practices to the design wireframes and interactive prototypes.

1. Task matrix provide the content for the default landing dashboards.

new-ucsd-01

User gets a high level rollup of the health of the infrastructure and list of real-time events and alerts.

2. Dashboards are simplified using progressive disclosure and 80/20 rule.

new-ucsd-02

Information displayed in screens is guided by the user role.

3. Remove clutter. Allow the user to stay focused and in control.

new-ucsd-03

Infrequently used and advanced actions are hidden in the “More Actions” dropdown. Table filters are inline in the column headers.

4. Keep the user in context and efficient with minimum clicks.

new-ucsd-04

Inline Resolution links in the Error messages navigate directly to the solution.

Usability Tests

We built and usability tested clickable prototypes and rolled in user feedback in iterative updates. Here are some of the results.

Next Gen UX Prototype Highlights

User feedback on new look and feel

user-test-result-01

Efficiency Metrics (Click count comparison on key use cases)

user-test-result-02

Next we focused on delivering design to development. The approach was to create modular patterns for all reusable elements like components, dialogs and page types.

new-ucsd-components

We designed a consistent layout and responsive grid structure for all the page types. Dashboard, Summary, Catalog master detail – tile, list, master-detail with tables and summary details.

ucsd-template

In sync with flat material design, the dialogs were displayed inline instead of modal popups. Eg. Edit, Read only, Compound, Wizards.

ucsd-wizard

Color and Imagery

A minimum amount of colors, separators and patterns are used, so the user can focus on the data. The fact that it is an IT product, red, yellow and green is reserved for alerts and statuses. We decided to go for white and grey with blue for highlights in the main structure.

colors

Type style guide

Icon set

Allicons catalogs

Visualization

To make the data more comprehensible we introduced visualizations through Charting libraries – Sencha and D3 libraries.

Technology is here