Enter your search

Login Screen Design – behind the scenes

Designing a login screen that welcomes users

Note: Since this post was written, we’ve made the GoSquared login process even better! Check out our new post on designing a better login screen, and how we implemented two-factor authentication.

GoSquared real-time analytics sign in screen exploded

Here at GoSquared, we love to obsess over the little details that make the real difference in your experience of the site and Dashboard. The new login screen design and experience was no exception.

GoSquared real-time analytics - sign in now, not tomorrow

We wanted the login screen to feel personal and for our customers to feel comfortable and familar with signing in. It’s something that our most loyal customers see very regularly too, so it had to be streamlined and quick to understand and submit. At the end of the day, people don’t want to stay staring at a login form – they want to use GoSquared – they want to find out more about their website.

Getting personal.

GoSquared real-time analytics - sign in and get a more personal experience with gravatars

We decided to use Gravatar to show an image relating to the users email – which updates every time the email changes. The initial design was already cleaner and had a nicer feel than the old form.

Quick fades between the GoSquared logo and the Gravatar, depending on whether a Gravatar is found or not, make the transition natural. Users without a Gravatar can’t tell that one should be there – there’s no lost usability.

BREAKING! People forget their passwords. A lot.

GoSquared real-time analytics - Keira forgot her password when signing in

When have you ever gone to “Forgot your password” without entering an email first, or having guessed a password? Clicking on this autofills the email you had in the login form, again with your Gravatar, so you can reset your password in just two quick clicks.

25+% of customers use Gmail. Not Gmaol. Or Gkail. Or Gmaik…

GoSquared real-time analytics - sign in form checks for common email address mistakes

Mistyping your email address is easy, and infuriating. We don’t like our customers getting infuriated. The new login screen uses Kicksend’s Mailcheck jQuery plugin which is a fantastic tool for suggesting email addresses – reducing the number of misspellings and annoyed customers.

And then there’s the final touch, as soon as you submit the form, the box shrinks away into the background, leaving a loading spinner. The same spinner is then shown while the GoSquared Home area loads, making the login feel quick, easy and seamless.

Check out the real login screen design now

Check it out for real now! β†’

Disclaimer: Unfortunately, to our knowledge, Keira Knightley is not yet a customer of GoSquared.

Updates: After all the great feedback, we’ve now improved the dismissal of the email suggestion tooltip – it has a subtle close button and will close as soon as you start typing a password. It also won’t show if a valid Gravatar is found, as it’s likely that the email is correct.

Written by
Lead developer at GoSquared for integrations, partnerships and the API. Works on pretty much everything.

You May Also Like

Group 5 Created with Sketch. Group 11 Created with Sketch. CLOSE ICON Created with Sketch. icon-microphone Group 9 Created with Sketch. CLOSE ICON Created with Sketch. SEARCH ICON Created with Sketch. Group 4 Created with Sketch. Path Created with Sketch. Group 5 Created with Sketch.