← All Articles

Evolution of a Docker Onboarding UI

Brent GrahamBrent Graham
Dec 1st 16Updated Jul 12th 22

Evolution of a Docker Onboarding UI

Last week we released a new version of our Docker on-boarding pages. At Cloud 66 we've supported Docker stacks for almost three years now and the onboarding flow has passed through three iterations. From the beginning the process was broken into two steps:

  • Defining Services — how to build your services into images. i.e from source code in a git repo or existing docker images in a repository. This information is specified in services.yml.

  • Defining a Manifest — how you want to deploy your application. What public cloud provider you're using. What region you're deploying to. The number of servers and their configuration. This information is specified in manifest.yml.

Iteration 1 — Two Step Form

The first iteration was composed of two separate pages. Each page provides a web form and an advanced editor view. The user can flip between basic and advanced modes with tabbed navigation.

The basic view is a form that asks a series of questions about configuration options. Advanced views allow direct editing of the services and manifest yaml files.

This UI performed reasonably for early adopters, who tend to be advanced users. People who are familiar with Docker. They have a good mental model of how docker works and understand how the various pieces fit together. Concepts like,

Are all likely to be familiar concepts.

For web developers new to docker many of these concepts are unfamiliar and it takes a little time for the pieces to fit together. The UI needs to provide sufficient links to documentation, inline help and a combination of client and server side validations to catch errors before deployment.

In the next iteration we decided to break things up into simpler steps and provide lots of inline help. This would make life easier for people with less Docker experience.

Iteration 2 — 6 step Wizard

evolution-of-a-docker-onboarding-ui

That's a lot of steps! By dividing the task into small chunks, and providing more contextual help for each step we can guide users through the process dealing with unfamiliar concepts as they arise.

While this approach does simplify the task it also gives an overwhelming impression to new users who want to get up and running as quickly as possible. Providing additional help and information inline can also increase cognitive load.

Find out more on Cloud 66 for Docker New Onboarding Wizard.

Iteration 3 — Split Build and Deployment workflow

In order to address these issues, we have completely separated the on-boarding process into two self-contained build and deployment workflows.

Build

evolution-of-a-docker-onboarding-ui

A simple form allows users to add services and get on with the build process as quickly as possible. We have provided additional validations and help for users at known pain points. For example, help with creating a dockerfile.

evolution-of-a-docker-onboarding-ui

The common web frameworks and languages are detected by analyzing your source code. If we can't detect what you're using we give you a series of dockerfile templates you can choose from to help get you started.

The build UI is much simpler than the multi-step wizard. Cognitive load is reduced and it's much quicker to get your Docker images up and running ready for deployment.

Deployment

The new deployment page takes a more visual approach to adding servers and data sources. This helps you to visual the structure of the stack you're preparing for deployment.

evolution-of-a-docker-onboarding-ui
We do our best to set sane defaults for deployment region and server size. Of course, you can still alter this overriding the default settings where necessary.

The usability around potential sticking points like configuring container networking has been improved.
evolution-of-a-docker-onboarding-ui

If you're comfortable with advanced configuration you can still switch to the advanced manifest view. This Provides a text editor where you can make use of advanced features like Amazon <abbr title="Virtual Private Cloud">VPC</abbr>.

We hope you find the new approach makes on-boarding Docker stacks easier! As always we really appreciate any feedback or suggestions you might have about how to make things better.


Try Cloud 66 for Free, No credit card required