Containers UI

Client: IBM Bluemix Container Service
Date: January 2017 - June 2017
Role: UI/UX Designer, Visual Lead

With just 4 people and 4 months, our team went from doodling on post-it notes to going live.

We did this by learning as much as we could about the container orchestration technology, finding out our user’s needs, and then designing around those needs.

I made sure everything was aligned, organized, and in the order in which we wanted our users to follow. There is a lot of information our users want to see and arranging all of that in a limited amount of space was not always easy. I worked closely with our front end developer creating different concepts and styles for each page, which we would then prototype, and test.

User Experience

Being a new product, we had to start from the ground up. Our team worked together to prioritize what was most important to our user through testing and reiteration.

Design & Craft

Designing information in a strategic way so that the user can see exactly what they are looking for without any hassle. Making sure everything on the page has a place, is aligned and organized.

Background

Containers is a technology a developer uses to place pieces of code in. Those containers are then put in different places. Why would anyone do this? Less downtime, fewer failures, happier end users.

Kubernetes is a form of container technology, developed by Google, that we used in IBM’s Bluemix cloud platform.

Problem

Our mission was to create a way for Bluemix developers to use the container technology when creating and deploying applications.

How might we allow developers to create a kubernetes cluster and attach persistent storage, while understanding of cost?

How might we allow developers to view the overall health of the nodes of the cluster, scaling the nodes as well as update the version of Kubernetes?

How might we allow developers to access their cluster and add pod workloads, making claims against the attached storage?

Process

Domain knowledge research, competitive analysis, UX Audit, design thinking workshop, prototype + test.

1
2
3
4

Below is the empty state page every first time user will see. I saw this as an opportunity to create an illustration to reflect our brand’s personality and make their experience a little more pleasurable.

We were one of the first teams inside of Bluemix to include illustrations in our service and received great feedback from it. It was so well liked that I was asked to create the illustration guidelines for all of Bluemix.

 

After creating your first container, this is what your dashboard should look like. A quick overview of what our users felt was the most important information, that they can skim through easily.

When your container is provisioning, there will be tutorials you can read over as you wait. Giving our user additional information about what they can do with their container. Only a few can be seen while it is loading, but once it is at 100% you can view them all.

 

The Access Page provides the user step by step instructions to gain access to their cluster.

On the Worker Nodes page is where the user can reboot, restart, update, delete or add to their nodes. Quickly able to scan the information they are looking for, and click on individual ones to see more info if needed.