VM creation flow

Competitor Analysis

Madhuri, UX Intern

VM creation flow is one of the core features of PE/PC. Overtime, customizations/policies have been added to Prism which calls for a VM create refresh and create flow(s) ideal for various roles and use-cases.

​

​

​

​

My goal

1. To create a flow(s) to suit various roles and use-cases
1. Superadmins, developers
2. Beginner vs. expert
2. To improve the efficiency in creation and customization

​

1. Understanding PE, PC, SSP their workflows and use cases.

​

• Competitor analysis - their features, flows, usability and visual design

​

• Persona Hypothesis and figuring out the 80% vs 20% features

​

• Information architecture, workflows and SME validation

​

• Wireframing

​

• Concept testing(flow 2) and Usability Testing(flow 1) using clickable prototypes

​

• Mockups

​

​

​

​

​

Process

Digital Ocean

​

​

​

​

GCP

​

​

​

​

AWS

​

​

​

​

Nutanix

​

​

​

Competitors

Features list and comparison

​

1. Choosing Images
2. Creating an instance
3. Adding resources and customizing
4. Adding storage
5. Selecting regions and zones
6. Configuring security groups
7. Containers
8. Creating several instances at once
9. Hostname
10. Tags
11. Summary before creation
12. Help/Documentation at each step

​

Buckets

1. Choosing Images

An image is a template that contains the software configuration (operating system, application server, and applications) required to launch an instance.

DO

AWS

NTNX

GCP

Step 1

Step 1

Divided into verticals

Minimum clicks

Select the os and version in one click

Tips

Visual elements increase efficiency

Step 1

Snapshots

Backups

The options only show when you have backups or snapshots.

Overall:

Clear affordances of clickability

Action-Feedback pairs

Clean and modern design

The whole form is very playful - less manual entry and more selections to make.

Usability issues

Provides requirements such as SSH key if needed. Does not answer the question “Where do I need to enter it?”

Shows the steps and the number

Labels

Step 1

Step 1

Filters

Graphic content

Accelerators

1. E-commerce model
1. Consistent with Amazon’s design
2. Filters and sorting options
3. Shortcuts/ Accelerators
2. Easy navigation: Breadcrumbs, shows number of steps and the next step.
3. Observation: The next button at the end of the page is not blue but the ‘Review and Launch’ button is blue. Not sure why AWS is directing users to launch before they configure other details
4. Anomaly 1: First step leads to the second step without user confirmation. Cancel is on top as opposed to in the bottom in other steps. !!

​

VISUAL DESIGN

• Lack of white space and lack of clear visual hierarchy
• Use of Primitive UI elements

Step 1

Step 5

• Vertical Long form
• Expands multifold as user selects his preferences
• Left hand side and right hand side
• 👎 Right part does not scroll along with the form
• Not consistent with Google UI guidelines

• Summary not provided; Navigating through a long text-based UI does not allow efficiency in tasks.

Step 5

Step 5

Step 5

VISUAL DESIGN

• Text based UI; Graphic content is almost nil
• Lack of white space
• Font sizes/colours etc. can be used to depict hierarchy.
• Primitive UI elements

Step 3

Step 3

Instead, the field can be deleted.

• Are names of these images intuitive to the beginner user? Can images be tagged?
• Only SSP has a full page popup
• Lack of descriptions for each step
• Less important features are displayed upfront.

Step 3

• Choosing Images
• Creating an instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• Configuring security groups
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

2. Creating an instance

Instances are virtual servers that can run applications. They may have varying combinations of CPU, memory, storage, and may give you the flexibility to choose the appropriate mix of resources for your applications.

DO

AWS

NTNX

GCP

Step 2

Step 2

• Predefined configurations - increase speed, the division suggests the best configurations for the two use cases, example use cases also provided, also provides easy narrowing down of options
• Tells users when to shift to optimized droplets
• However, No flexibility for defining configurations of droplet
• Show the costs upfront.

Step 2

Suggestions

• Filters, sorting, adding and showing/hiding rows
• Configurations grouped into function based families
• Summary of selected item
• Not efficient for user who knows his configuration/use; could be frustrating

Step 2

Step 3

Captions

Ability to customize

Step 3

Links to documentation

Step 1

• No predefined configurations

​

• Efficient for experts; However most used templates can be floated for more speed.

​

• Not friendly for beginners | No assistance for entering information.

​

​

Step 1

Limits for entering values?

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• Configuring security groups
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

3. Additional Configurations

[Policies]

Additional configurations might include firewall rules, networking configurations, security policies and additional resources might include backups, encryption, IPv6 etc.

Step 3,6

Flow changes

More settings expand

Network settings

New tab to create an IAM role

Flow opens in new tabs

New tab to create an IAM role

More settings expand

Step 3

Additional Config.

Step 3

30 different types are available but it pre-populates the field with SSH.

​

Security Groups

API access

Firewall rules

SSH rules

Step 6

Networking

Step 6

Disks

Step 6

Management rules

Steps can be reduced

Steps can be reduced

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• SSH Keys
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

4. Adding Storage

Storage volumes additional to the instance storage can be added. In certain products(AWS), the instance storage can be edited while adding adding additional storage.

Step 4

Customizable as well as pre-defined storage - efficiency

• Instance storage can be edited in this step - Flexibility

Step 4

Step 3

Volume groups

​

• Currently broken in the website.

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• Configuring security groups
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

5. Selecting region and Zones

• Minimum number of clicks.
• Are the divisions in a city useful for the user? How?
• Creating and distributing droplets among data centers is not possible. Is it meaningful?
• Are the divisions in a city useful for the user? How? How to assist a beginner user in choosing the data centers?

Step 5

• GCP does not assist users to choose zones

Step 2

5.1 Timezone

Listed in alphabetical order of Continent/Country

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• SSH Keys
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

6. SSH Keys

A security group is a set of firewall rules that control the traffic for your instance.

Step 7

Links to documentation

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• Configuring security groups
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

7. Containers

---

Several steps within the container creation.

​

Adding various variables and configurations with container storage.

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• Configuring security groups
• Containers
• Creating multiple instances at once/Batch create
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

8. Batch Creation

Gives the user ability to create several instances at once

• A maximum of 10 can be created at once.

​

• Enables both type and click ‘+’ interactions.

Step 8

It is a part of the configuring the instances.

​

• Auto scaling group option available - takes user into a different flow.

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• Configuring security groups
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

9. Hostname

Naming the droplet/instance the person created to identifying it later.

The names are pre-populated and have a pattern.

​

👍 Names of multiple droplets can be edited at once as long as the pattern is not destroyed.

Step 9

The name is pre-populated.

User enters the name and description is optional.

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• Configuring security groups
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

10. Tags

Tags enable you to categorize vm resources in different ways, for example, by purpose, owner, or environment. Tags make managing, searching and filtering resources easy.

Can we pre-populate, autofill or suggest tags based on the configurations they chose, based on their naming pattern?

Step 10

AWS enables users to add tags to both instances and volumes.

Step 5

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• Configuring security groups
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

11. Summary before creation

Includes summary of the instance configuration, fields chosen

The summary can be viewed on user’s wish.

However, The form is short, well laid out and information is easy to scan through.

A flow through several tabs requires a summary in the end.

Summary is presented in chunks.

👍 These chucks can be edited from the summary.

​

Step 7

The flow is limited to a page, yet the page is so long that scanning through the fields is not easy.

​

The UI is not friendly for scanning the information.

• Choosing Images
• Configuring the instance
• Adding resources and customizing
• Adding storage
• Selecting regions and zones
• Configuring security groups
• Containers
• Creating several instances at once
• Hostname
• Tags
• Summary before creation
• Help/Documentation at each step

​

Buckets

12. Help/Documentation

Focussed on contextual help - help at each section, meaning of steps, is the help meaningful, what elements best do the job

1. Meaning of some steps
2. Tooltips on hovering upon features.
3. ‘?’ icons

👍They don’t open separate pages and give concise details.

1. Description of each step
2. ‘i’ icons - show description on hover
3. ‘Learn More’ - Linking to documentation
4. Description of certain categories which open upon hover.

​

​

👍 Underline used as an affordance.

• Meaning of each step
• ‘i’ icons

👍They don’t open separate pages and give concise details.

👍👍 Learn more link at the end of the description

• ‘Learn more’ links for topics leading to documentation

​

​

1. A central ‘?’ icon leading to the documentation. The users will have to search for the relevant documentation.

​

👎 No description of the step.

👎 Description provided in the next step.

Post creation

Takes the user to the dashboard which has the list of instances and shows him the droplet usage.

​

​

​

Takes the user to the dashboard which has the list of instances and imp. features.

​

​

​

Takes the user to the dashboard which has the list of instances.

​

​

Summary of the clusters are given. The notification showed occupies very less real estate. It does not have a link to lead users to view the details of the VM or customize the VM or add more policies to it.

​

Takeaways

1. Optimize for Beginners
2. Build a hierarchy - Not solve for niche use cases upfront. E.g - custom scripts
3. Single flow to accommodate both admin and developer workflows
4. Accelerators such as templates
5. Provide contextual help
6. Enable batch creation of VMs
7. Integrate cost metrics
8. Design for scalability (from a functional perspective)

​

Thank you!

Feedback