Project Overview

The Market Need

Operators of data center infrastructures wanted a way to manage their systems in a converged package.

The various and complex components of the data center (compute, storage, network and virtualization) were being managed individually, which was a costly and time-consuming operation.

The product

Hitachi designed UCP as a web app which optimizes a converged infrastructure into one dashboard and management system.

My Role

I functioned as a UX/UI Designer. This included wireframing, workflows, sitemaps, mockups, documentation, asset management, and prototyping in HTML, CSS and JavaScript. I also load-balanced to help the developers and engineers in building product UI where they lacked skill or knowledge. In the testing phase, I fixed bugs connected to the UI code.

The UX Team

I backfilled for the initial UX/UI Designer when he left during end-game of v2. I carried the product as a team of one through v2 and v3 until two more UI experts joined and eventually took on the project.

These collaborators were Kyle Dybdal and Tiana Kavros. Usability testing was conducted by Garrett Rysko.

The UCP v3 product icon
For v2 and v3, UCP had this product icon and identity.
UCP Personas
Personas were created for IT managers, Infrasturcture admins, and IT admins.

Design Explorations

Product marketing surveyed Hitachi's broad install base to identify the biggest administrative challenges. This, along with competitive research analysis, gave the engineering team a good picture of how to build the solution.

This data was used to develop user workflows and wireframes.

Early mockups and demos of the wireframes and storyboards were reviewed and iterated with cross-functional organizations within Hitachi, as well as with long-time Hitachi customers.

UCP version 3 wireframe of dashboard
User workflows for each feature were explored and discussed with product owners and developers.
UCP version 3 wireframe of dashboard
Initial exploration was with optimizing the dashboard, displaying the most relevant information to the user.
UCP version 3 wireframe of dashboard
Prototypes were built in HTML for PM review.

Design Development

Much of the design milestones were completed in collaboration with product owners.

For v4, another designer joined and created mockups with a fresh look.

UCP v3 pattern library
After stakeholder signoff, pattern libraries were created in native code from wireframes and mockups. This strategy helped developers work faster. UI components could be pulled and developers could then add databinding and logic.
UCP version 3 wireframe of dashboard
Between v2 and v3, a version was created to work inside of VMWare.
UCP version 4 wireframe of dashboard
When we began work on UCPv4, another designer joined the team and created wireframes and mockups with a new design direction.
UCP v4 usability testing
Test users were participants from within Hitachi Data Systems, a total of six between EMEA and Americas. They were each given about 45 minutes to complete approximately 30 tasks, which were provided as a script.

Final Design

The Solution

The UCP product aimed to reduce time to configure a converged infrastructure and deploy rapidly.

It was designed to deliver a comprehensive perspective of the infrastructure with relevant data points for inventory, health, utilization, topology and connectivity, and job status.

From usability testing and customer feedback, we found that the application has streamlined data center workflow, and provided an intuative learning curve.

Results

UCP Director has delivered approximately $350M in revenue to Hitachi over approximately four years since v2 was shipped.

It has over 100 unique customers, with many customers running multiple instances of UCP Director and UCP 4000.

Approximately 80% of UCP customers are Fortune 500 companies, and 20% are military and government.

UCPv4 dashboard
UCP version 4 had a makeover of the product icon, with a fresh dashboard, shortcuts and navigation. This UI is derived from high-fidelity mockups created by a talented visual designer on the UCP team.
UCPv4 storage inventory
Inventory screens were part of a tabulated category panel. This UI is derived from high-fidelity mockups created by a talented visual designer on the UCP team.

/