B - UX
Creative, Mindful, Resourceful
signup flintno.gif

Onboarding Sign Up Form

Introduction

A good signup form is essential to user experience. Our research found a big pain point for our users at certain points in the form. Below you will find the new prototype, research findings and before and after shots.

The Task

User research, and a full redesign of the sign up form.


The Prototype

signup.gif

Before

sign up form

Our user research showed that people often dropped off after looking at the sign up form.

  • It looked foreign compared to the rest of our marketing website.

  • It did not entice anyone to sign up since there is no value statement.

  • The password field required a two step verification.

  • We asked for a username, but we found that we only needed an email address for the user.

  • The terms of service and privacy policy can be combined together without an action.


UX Updates

normal.png

Completing in 8 steps to 3 steps

  • Creating a username (we don’t use it, so it’s only asking the user to go through an extra step)

  • Entering a password twice (Instead of verifying the password, a ‘view icon’ is added to the password field to help the user verify their password.

  • Combining first and last name (in-order to be more inclusive, we added a full name field where users are able to enter their middle name and in any format they need)

  • Removing check boxes for terms of service and privacy policy

The value statement

Teach Music. Build Confidence.
Our user research discovered that users were confused on the value of signing up for a trial. We also found users dropping off the page because they were unaware of what our product really offers. In order to make that clear, we stated the our top features that are being used now.

The button

Our current gradient button does not pass the accessibility requirement. We decided to switch to a different color primary color from our brand guide in-order to make our site accessible for all users.

Interactions

A major change that affects how the users feel about our form is the user interactions.
Hover, selected, and finished states are now introduced to the form.
Error states are now interactive as well. As soon as the user finishes typing the error state notifies the user that there is a problem and highlights the form that it is on.