Making the decision to move to the cloud easier through design


Challenge

Choosing the right cloud infrastructure for your business can be tough. Services, details and nomenclature used between the cloud providers all differ, making direct comparisons difficult and frustrating.

Solution

While working with Unitas Global, a managed-services startup helping to provide cloud solutions for enterprise customers, we created a responsive web app to help customers make informed decisions about which cloud platform to go with and to help establish Unitas as an authority in the cloud solutions industry.

Timeline

Within a 2-week sprint, the design was conceived, finalized and implemented, showing metrics captured over time from across the 3 major cloud platforms: Amazon, Microsoft and Google.

Role

As the UX Lead, my responsibility was to have a design conceived and finalized within the first week of our 2-week sprint. This included the initial concept sketches, wireframes, clickable interactive prototypes, and final design specifications that the dev team would code the front-end to.

Immediately following the creation and implementation, I conducted ad-hoc usability and desirability studies with target audience participants at a cloud developer conference in Las Vegas. I tested both mobile and laptop versions with 13 individuals ranging from junior application developers to directors of IT. The feedback and input we received validated our approach and provided many insights that would help us improve our approach over time.

Process

My initial sketches focused on how we might be able to guide the user by providing a set of use cases for them to choose from, based on what type of cloud they would need.
 

Initial thumbnail sketches
 
 
Quickly, I jumped into digital sketching and prototyping to rough out my initial ideas and get something I could share with the product owner. In this prototype, the user is presented with a choice to pick a project type, which determines their cloud comparison view on the next screen.
 
Low-fidelity wireframes
 
 
I created an alternate design approach that contained the use case selection and comparison results in the same screen. Additionally, users could fine-tune their selections by adjusting the levels for CPU, Memory, Disk and Network.
 
Low-fidelity wireframes
 
 
Next, I increased the fidelity and style to a more finalized version. Had fun with a space themed “cloud control” concept, but it didn’t make the cut in the end.
 
High-fidelity design iterations
 
 
With each concept, review and discussion with the team, the design continued to evolve. The design became more simple and focused with each iteration. The final wireframe consisted of a set of simple controls, selecting the OS and size. We also decided to add a line and area graph view to provide a different perspective of the comparison data.
 
High-fidelity design iterations
 
 
One of the requirements starting out was for this to be a responsive web app, allowing users to experience the app based on the device of their choice.
 
Mobile wireframes
Mobile wireframes
 
 
The final versions below.
 
Final version of Cloud Performance
 
Final version of Cloud Performance
 
Mobile wireframes
Mobile wireframes