Guarding Great UX During Redesign (2015)

The 4.3 release of IBM Cloud Manager with OpenStack (formerly SmartCloud Entry) introduced a major UI change, splitting the UI into two new consoles: an Admin Portal and a Self-Service Portal. In this project, the challenge was to preserve the simplicity and the user experience of the original product.

Contributions: UX Leadership, UX Design, UX Research

SmartCloud Entry was a product introduced in 2009 by IBM to enable customers to quickly set up a test and development cloud environment on their company network. It enabled administrators to provide development teams access to self-service virtual machine (VM) deployments, while also controlling resource allocation with policies. By 2015, much of SmartCloud Entry had been rewritten to replace its original backend code with OpenStack, an open source cloud project. It was also renamed to Cloud Manager with OpenStack.

Each release trailed OpenStack releases by a few months, meaning that customers were not able to take advantage of new features in OpenStack as quickly. The team decided to move administration to a customized version of Horizon, the OpenStack console. By doing this, customers could access all of the OpenStack functionality at the same time as the rest of the OpenStack community.

While customers were happy to have currency with OpenStack, they were also concerned about moving to a new UI, especially when their developers only used it about 10 minutes a week and would take some time to learn a new UI. To address this we, created a second UI, the Self Service Portal for developers. The goal was to preserve the simplicity of the developer user experience and to align visually with the platform as a service offering IBM Bluemix (now IBM Cloud). Throughout the project, my goal was to minimize the disruption to developers and administrators.

To understand the requirements, I created a comprehensive gap analysis, comparing the existing SmartCloud Entry to OpenStack Horizon. The analysis included functionality, and a terminology mapping. There were 6 pages of tables covering every aspect of the product.

Next, I created an IA for each of the portals. The Self-Service Portal was very similar to the original SmartCloud Entry one. Because the admin portal was extending OpenStack Horizon, I needed to blend our extensions into the existing UI (IBM additions are shown in blue below).

Admin Portal

When I created designs, I had to include two major feature additions to Horizon: Approval Policies and Expiration Policies. The Approval Policies allowed administrators to approve VMs configurations before they were deployed. Expiration Policies set a time when a deployment would expire. Because they were both used to manage memory, CPU and storage allocation, I placed the Approval Policies and the Expiration Policies from our product next to the Quotas in Horizon.

I iterated the designs based on customer feedback. For the final designs, we added our branding colors. The designs also were updated to adjust for changes in Horizon.

Developers Become Storytellers with Videos shows how both Approval and Expiration Policies work in the Administrator and Self-Service Portals.