Bare Metal Server Provisioning

In 2013 IBM purchased cloud computing provider SoftLayer Technologies. In 2017, I joined the ongoing UI integration effort, by redesigning the digital, self-serve provisioning experience for users interested in our most expensive offering, Bare Metal Servers.
‍

Problem

Bare Metal provisioning as it existed took several minutes for users to complete and was riddled with complex configurations that were difficult to understand, and users were often confused about what they were building

Role

UX Designer

Time

4 months (MVP)

Solution

A provisioning experience that simplified the steps to build and configure a bare metal server that showed clear associated costs, while following the larger design system of IBM Cloud.

Team

Arn Hyndman (Architect)
Gordon Walls (Dev. Lead)
Gilbert Lavergne-Shank (Dev.)
Zeus Courtois (dev.)
Jeff Ng (dev.)
Alejandro Ortiz (dev.)
Josh Crowley (PM)
Alexander Greer (PM)

UX Audit

Participants reported numerous moments of frustration when interacting with the ordering experience due to unorganized content, numerous steps, and a number of page errors.

Interviews

Participants responded to following:
‍
1. What about the existing experience meet and/or did not meet their expectations on ordering a Bare Metal server?
‍
2. What about the ordering experience would you normally expect to see?
‍
3. Would you, or would you not recommend ordering an IBM Cloud bare metal server to your colleagues and why?

Research

With my product owner, we found 4 sponsor users and conducted a usability test where we measured task completion, and followed with interviews.

Responses: Quotes

I cannot select the server I want and see where they are based

I would not expect to configure a bare metal server in the UI

I would not recommend this experience to anyone

Insights

In a digital self-service model, purchasing servers involves end-users, sales men, and brokers. Often used as a quoting tool the UI helps buyers and sellers to continue negotiating over the phone.

Most servers cannot be created and run same-day, though stand by stock servers can be configured in 3-4 hours and are dependent on global availability.

Based on these insights all users are more empowered when:
‍

1. The value of "quick provision" stock servers and their global availability is illustrated
‍
2.  The true cost of their configurations is clear
‍
3. There is an easy way to collaborate on pricing

Mockup

An interactive map showing the distribution of global data centers.
‍
Users can curate the content based on geography and processing power specifications.

Concept 1

Provenance

Empowering via location-based availability, or proximity

Metaphors

1. Viewing Airbnb rentals based on a neighborhood map
‍
2. Prioritizing purchasing power based on where something is made

Sketch

Curating available servers view upon selecting a desired geography, then desired data center.

Metaphors

1. Ordering fast food is simplified with numbers that represent pre-defined value meals.
‍
2. Netflix ranks films based on popularity and relevance to the user.

Sketch

Creating a fast provision bare metal server is important for users who need quick support and setup in under 3 hours.
‍
After defining their data center, selecting a pre-configured server, reduces the setup time, with clear pricing shown.

Mockup

Creating a fast provision bare metal server is important for users who need quick support and setup in under 3 hours.
‍
After defining their data center, selecting a pre-configured server, reduces the setup time, with clear pricing shown.

Mockup

Giving buyers the ability to save their quote onto their account, as well as email the link with their configurations saved.

Heading

1. The consideration phase is long before the point of sale, like buying a car.
‍
2. Like a car, the user specify their configurations and share it as a quote.

Concept 3

Quoting

Building trust with clear pricing that show exact specifications, and ability to share

Concept 2

Popularity

Pre-configured servers, defined by terms like: best-in-class, most popular, optimized, high performance, etc.

Prioritization & Development

With a number of net new user needs and design features to test together. It was critical for design, project management, and development to map major features together with technical constraints and existing timelines in consideration.

High impact, low effort

MVP

Quote sharing
Popular servers
Location/availability

3-4 months

Big impact, moderate effort

Phase 2

Content audit
Marketing redirects
‍

4-6 months

High effort

Phase 3

Resource management
Data center map


5+ months

Project Management

Agile Development

I worked closely with our project manager and dev. lead to write out user stories for the development team to work on in 2 week sprints.
‍
Mid sprint check-ins were very valuable for design and dev to collaborate and make necessary changes to get closer to closing all open issues.

Carbon Design System

As IBM’s official design system, Carbon helps design and development improve UI consistency and quality, making the design and development process more efficient and focused, and providing clear guidance around best practices.

In Practice: Redlines

Adhering to the standards of the Carbon Design System in this project was a constant effort between me and my development team. It was essential for me to translate a number of styling and content details to my team. This is an example of the detail needed to in order to achieve this.

Color tokens: ui, text, field

As a point of reference, the limited colors in the design required me and my development team speaking in terms of color tokens. From a defined list of colors, we were able to abstract color by role or usage, independent of the actual color values. This allowed for certain shades of the same color to be clearly grouped by their use.

Component Specifications: text-input

This is an example of the UI specification the design system template provides to help design and developments communicate the various stakes in any given component.

Iterations

MVPs aren't met with the occasional need to reassess and reimplement. Technical constraints identified by engineerings made the real-time availability in the context of the specific city selected on a map, unfeasible.

Before

After

Groups were made that aligned better with the staging data–presenting servers grouped by general geographies such as: US West, US South, etc. The development teams were able to architect the associated data better within these categories presented here.

Testing

A/B testing with Full Story

Using the real-time user experience replay tool, FullStory, I was able to monitor a limited sample of random users who were exposed to the redesigned UI.
‍
With this I was able to report on bugs that were missed prior to deployment into the separate production environment that we created.

Before

In this example I was able to identify a major problem with a user form error that was not responding contextually. Instead it would create a generic error notification.

After

As shown in the specifications in Carbon, I expanded the error interactions to show the content related to the various user errors.

We were later able to show increased page performance once these errors states were implemented.

The MVP

After 4 months the redesign was ready for an MVP, “dark launch.” A limited number of users were exposed to the final experience.

Mobile viewport

With mobile responsiveness, I had to change the interaction of the order summary so that the user could review their selection and share their configuration as a quote.

118% uplift
in overall conversion

Retrospective

After the completion of the MVP of this project in 2018, I was asked to join a different team with a significantly richer experience to design.
‍
I learned a great deal about managing multiple stake holders relationships, creating design-led innovations based in user research, adapting priorities to various constraints, and aligning UX design to direct business goals.

Next: Getting Started Developer Experience
Back to homeBack to top