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
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
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.
- 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.
Contact me hi@alsoko.net
…or read about
