✏️ UX TRENDS

Back to Newsletters

How Vercel Simplifies Deployment

Overview

Vercel is changing the game for cloud services and website deployment. Vercel is a cloud platform that enables JAMstack websites and serverless functions to scale automatically and requires no supervision, allowing Vercel to be an easy go-to for developers. Vercel boast's a zero configuration deployment by providing integrations and easy-to-use interfaces. Lets break down Vercel's onboarding experience to understand why its an easy go-to for developers.

The Process

πŸ’¨ Quick Start

1

First things first, Vercel makes the deployment process easy by allowing a user to import a project from a repository. Notice how they have essentially greyed-out the "Import Template" option and made the "Import Git Repository" option bright blue, grabbing your attention and making it more obvious of a decision. Vercel knows their audience (developers) and knows that their audience will most likely already have a repo of their project. By placing the logos of GitHub, GitLab and Bitbucket, the user knows which services Vercel integrates with without explicitly stating. Lets continue by importing a repository.

✍🏼 Simple Sign-Up

2

Here is where the user is prompted to Sign in or Log in. Because we are going to continue by importing an existing repository, Vercel knows that the easiest way to sign up would be to just sign up with your existing GitHub, GitLab or Bitbucket account. On the left, Vercel highlights the experience of their git integrations. Using providers (GitHub, GitLab, and Bitbucket) for your sign up means less typing for the user and an easier streamline of their deployment.

Extra bonus: At the bottom-left, Vercel highlights the big companies that already use Vercel (Auth0, Airbnb, GitHub, etc), giving more social proof of the validity of their product.

πŸ‘ŒπŸΌ Hick's Law

1 1

Each step of Vercel's process is bite-sized. It allows the user to see what is going on, rather than having a long form to fill in information. This is an example of Hick's Law.

πŸ’‘ Hick's Law states that "The time it takes to make a decision increases with the number and complexity of choices."

This means the more complex your forms and the more the user has to input per page, the less satisfying and longer it takes for the user. Asking the user for small, bite-size answers and inputs, makes the hard and long process of deployment, easy and satisfying.

πŸ€” Options for the User

1 1

Before building and deploying the project, Vercel allows for easy integration of environment variables and other build and output settings. Notice how Vercel uses drop-down menus, leaving the option open for users, but not crowding the form.

πŸ‘€ Watch your Website being Built

1

This is my favorite part of the onboarding. Vercel runs the website build on a terminal and you get to watch the whole thing. Usually, the go-to for most websites is a spinner or progress bar. Having a terminal fetching and building packages, makes a more pleasing and satisfying user experience. The user can see the progress and can have an expectation of when its complete. Vercel also shows all the errors in the terminal, as if you're building in a terminal on your machine.

Takeaways

❓What Can we Learn from Vercel?

Often times as a Web developer, we overlook or neglect the little nuances that make a good user experience into a GREAT user experience. Here are 3 takeaways from Vercel's Onboarding process:

  1. Make the recommended and easier option stand out.
    • There are several ways to do this. Vercel made the button more vibrant, drawing your attention to it.
    • Make the easier option more appealing by making its container bigger or more in focus.
  2. Implement Hick's Law to speed up the process and make a 'harder' problem easier.
    • Vercel would have one step per page. The steps were simple and concise, making it easy to read.
    • This made deploying a website super easy and enjoyable
  3. Avoid Idleness during the loading process.
    • Users never like watching their computer frozen while something loads. Using a spinner isn't effective. Instead use a progress bar, or even better, show them what is happening behind the scenes like Vercel.

Questions or Comments?

Have any suggestions or want me to breakdown your website? Tweet Ben @bnpneio . All Feedback is welcome!

Subscribe for more Case Studies right to your Inbox!