Fixing common usability bugs in login/signup funnel on time budget

bescouted.com

BeScouted is an online photo casting service for photographers, models & other related professions ( like MUA or stylists ). In parallel with introducing a major new feature, they started a major marketing campaign and marketing without the signup form is like MVP without bugs — you know how it goes. The catch was that the free development time was minimal since all the forces were concentrated on the new feature so the design improvements should contain little to none general user flow changes or backend edits. Also its an existing project so the UI design itself couldn’t fluctuate too much from the brand and the UI on the inside of the project.
So…

Where did I start?

Detecting problems

Sign Up step 1| What is primary profile type? Also wild Captcha appears

The thing about the state of the forms when I got to them is that they are a leftover of an MVP stage of a pretty complex project so not too much attention was paid to it, so basically it was just UI elements thrown together. Its bad cause its the vital part of any startup but it’s good because lots of those problems can be easily fixed. For example check out the first screenshot, it has the Choose your primary profile type? dropdown. Just what is a primary profile type? It can be fixed by changing the copy around and maybe moving it under other fields so the user would be already filled 2/3 of the forms an would be invested in the signup form when tackling it. Anyway, I spent some time staring at the form, coming up with hypothesis and trying to reject or confirm them through research, and these are the offenders I found:

  • Captcha
    The kind which asks you to distinguish between roadsigns and baguettes. Its not visible at the beginning, it pops up when you enter your password so it’s as unexpected as it is unpleasant.
  • No field labels
    Although easy-ish to scan, those labels disappear when you enter the data which can make the user get confused.
  • Dark, flat button
    The button is not particularly inviting, lacks hover effect and doesn’t look like a button
  • No field validation
    No active in-line validation for things like password make users actually click the button to realise that they are wrong
  • No autofocus
    Users need to click on the field to start writing which is just a pointless action
  • No crosslink between Log in/Sign up
    So mistaken users have an easy way out(ultimately that should be in one window but it was one of the constraints, no backend was to be altered)
  • ToS Agreement tick
    Another additional action

Where did I get?

Addressing problems one by one

Sign Up step 1 revamped — Tadaaam
Validation & Error handling on steps 1&2 of Sign Up

A bit better ain’t it? The fields in the form were rearranged so the familiar and omnipresent entries go first and the odd one goes last. The copy of the primary profile type selection was rephrased so the user gets the context, plus some info was added to hint the multiple user profile feature which is not simple for the user to grasp at this stage but can be a source of confusion on which profile type to select. A decision to add branding & copy was made in conjunction with the marketing department. For the sake of saving the frontend dev’s time I found the field component on CodePen so no learning in the process was needed for him.

Field label animations
Having a lot of labels and fields can be distracting and intimidating for the user. The best contemporary practice to avoid clutter are infield top alligned labels which smoothly animate with the placeholder as in Google Material Design.

  • Captcha
    No more burger and ice-cream roulette! Checking out the stats it became clear that the spammers who wanted to get in got in anyhow with or without Captcha so it went out. We introduced a system where if the form is filled in less than 5sec all the profile is still created but marked “invisible” so all its communication doesn’t impact other users in any way, ie the messages are not displayed in the recipients inbox.
  • Shiny new button
    Created without driving away from the branding of BeScouted, although I’d like to gradient and round it up a bit ( Shoutout to Johnny )
  • Field validation
    Active field validation clearly indicates when everything is OK and when it is far from OK. Oh, and it’s combined with inline errors with clues so everything stays clear even when its wrong.
  • Crosslink between Log in/Sign up
    One of the most common user errors is mixing up login and signup screens, so it’s only fair to give them means to fix that together with the Forgot password? link.
Focus, hover and errors on the Login screen
  • Hover, focus & button animation
    Adding hovers, animation and clean color coding for the UI gives clean and recognizable cues for the user
  • Terms of Service Agreement
    A neat trick to avoid the ToS agreement checkbox is to add a string of copy under the Sign Up button effectively combining those two actions to one action while satisfying the needs of privacy-savvy users.
  • Inline errors with link to solution
    Designed not as an afterthought they integrate nicely with the UI and provide full info on what went wrong.
  • Show password option for the password field
    One of the most frustrating and annoying parts of signup/login forms is entering the password twice or not being able to see what you wrote. Adding a simple field demasking option helps the forgetful while streamlining the process for stenographers.

Working with developers time in mind

Things omitted due to technical limitations and time

So as I said in the beginning I couldn’t make change the existing flow or things related to database/backend logic too much, and I didn’t but I considered some options which in my mind should be integrated further down the line

  • Keep me logged in / private computer checkbox
    Pretty much a no-brainer, everyone likes to feel safe privacy-vise and users get annoyed when they are signed out of the accounts they use often.
  • Alert/autologin if the user tries to signup with the existing email
    Works well for the forgetful users
  • Password help popup when entering password for signup
    Having hidden guidelines for password strength is terribly annoying, but displaying it constantly might be too intimidating and cluttering, so a dynamic solution should do the trick. In my experience the best and simpliest one is Adobe ID signup form.
  • Better Location Select
    Google Location Autocomplete API is definitely the best option. The problem with its integration in this particular project is that it requires overhauling the whole location storage flow together with refactoring all the existing data to what this API uses
  • Rounded Corners
    Current style of BeScouted has straight 90º corners and flat color everywhere so it would be unapropriate to round the corners only on the login/signup pages, but ultimately its a well documented fact that rounded buttons are more emm.. buttony and gradients also help simplifying the UI.
  • Social login
    Also a nobrainer for a heavily social project, but it requires some refactoring on the Backend side and careful consideration on how you handle a user with an email but without a password. Common solutions are to prompt a password entry when trying to sign up or log in with the same email used with the social login or asking to enter a password right away after signing up with a social login.