Lead Web Designer
Form UX

Sign Up Form Redesign

An accessibility-forward update to create a frictionless sign up experience for first-time Fastly app users.
Project Status
Shipped
Client
Fastly (Full-Time)
Ship Date
January 2023

Introduction

Fastly's sign up form is the first entry point for the product experience. I collaborated with the Lead Product Designer and Product Manager to create a frictionless sign up experience for mid-funnel prospects. The Web Engineering team and I were responsible for crafting the final experience and ensuring that it met project requirements.

We successfully delivered a more frictionless sign up by accomplishing the following:

  1. We can provide reliable dynamic, real-time feedback for all form fields to prevent user error, especially for password creation.
  2. The sign up looks visually consistent with the Website and Product Experience to provide a cohesive interface experience.

We weren't able to deliver and entirely frictionless sign up due to conflicting organization needs. Check out the full story below.

Envisioning a "frictionless" sign up form experience

I participated in an on-site brainstorming session and started asking questions like: "Is it fair for us to ask for a prospect’s job title, company, and phone number before they know what we are going to do with it?"

We strived to make a fair exchange between gathering a prospect’s information and offering a high-quality trial experience.

A whiteboard with a sketch of a concise user sign up flow. Described more in the image caption.
A Product Engineer sketched this diagram that focused on requesting a user's information when it mattered the most in the product. This approach meant building a gradual user profile—a huge method change from our current approach.

Phasing out priorities

We initially proposed various ways to gradually ask for their information as they experienced the product. However, we ended up needing to immediately prioritize securing a prospect’s information upfront in order to address Sales and Marketing needs. Ideas around minimizing the amount of form fields had to be tabled for a later phase.

We now had to focus on providing smooth, real-time feedback on all of our fields.

A basic sign up form with six fields that are required to be filled in.
An image of the the old sign up form on fastly.com

Customers desired proactive form field feedback

The main piece of feedback we heard from customers was that they found it painful to create a new, secure password because there was no real-time feedback before submitting the form.

In this screen recording, users will not know if their password meets the requirements until after submission.

Preventing user error with real-time feedback

Prospects are now able to see their real-time progress in creating a secure Fastly password.

In this screen recording, users get real time feedback about meeting the password requirments before submitting their form.

Identifying job roles to help Sales and Marketing profile prospects

Prospects are also now able to self identify their job roles—helping Sales and Marketing get more granular data on their target audiences.

In this screen recording, users are able to sort through a predefined list of roles or even submit their own custom titles if they can't find a match.

Flagging errors to increase form submission success

Error states were further refined to make it clear what prospects needed to correct.

In this screen recording, users are able to clearly see where and how to correct their mistakes after a form submission attempt.

Conversion rates have increased by 8%

For the first calendar year that this improved sign up experience was shipped, GA4 has recorded an 8% increase in conversion numbers.

Next case study

Lead Web Designer
Design Systems

Deep Dive: Color Design Tokens

An accessibility-first approach to establishing color usage guidelines for Fastly's new website with a new visual identity.
Read this case study