Login screens are not the most exciting things on the planet. The challenge was to see if we could make logging in more interesting and engaging with UI design. Working with Anthony Conta, we approached this challenge with the end goal of exploring micro interactions in the realm of the humble login screen. Today's session was primarily focused on brainstorming.

First we had to come up with a theme to work off of. We each took two minutes to think of fun situations that we would want to log into. We presented our ideas to each other and discussed which might have the best options to explore micro interactions. Here is our initial list:

Winning a trip 
Space Trip
Pet  Adoption
 Axe Throwing
 Laser Tag
 Escape Room 
Golf
Mini Golf
 Concert

After discussing our options, Anthony and I landed on Mini Golf as our mutual favorite. The main reason for this was all the creative things we could dig into gamifying the login screen. Swinging at golf balls, making it past obstacles, and getting a hole in one to name a few.

Next on our agenda was to discuss the absolute must have features for our login screen. Here are some of the options we came up with:

Email
First Name
Last Name
Password
Opt in for newsletter
Age
User name
Team name
Terms of service
Captcha
Single sign-on

Trying to make our login screen as painless of an experience as possible, here are the main fields we landed on:

Email
Password
Terms of service
Single sign-on

With these core options, the user still has a choice of how to log in, either directly, or via another service they use. Information on the rules and restrictions given upfront also helps the user be prepared for any questions they may have before playing.

Continuing on, we brainstormed for five minutes on different micro interactions that would be a good fit for our mini golf login screens. Here are some of our ideas:

Each field filled out equals a hole completed on a virtual course.
A ball making it past different obstacles can be seen as each field is completed.
Funny mascots playing on each screen.
The cursor is a ball as you type. It rolls when you select the next field.The ball follows until it reaches the hole at the end.
An avatar swings each time you fill out a field.
Screen scrolls after you fill out and looks like a POV of a ball flying through the air.
Flag poles pop up after each successful field is filled out.

Excited to see where these idea’s take us, we began the UI design process by building a mood board. This mood board will be our guiding light towards the look and feel of the login screens. Anthony told me he didn’t have a lot of experience building mood boards, “If you could talk me through what you’re thinking while we go through this process, that would be very helpful.” Teaching experiences are always helpful, not only for the person learning, but the one teaching. I was ready.

The first thing you want to do in building a mood board is brainstorm a few words or phrases that represent a mood or look you are going for. Here are some words we thought of:

Playful
Kid friendly
Colorful
Straight forward
Direct
inviting
nature
Crafty
Exciting
Absurd
Family
Whimsical
simple

For this mood board we decided to go with playful, colorful, and nature. Anthony and I felt these words represented what we thought mini golf could be. With these words locked in, we searched for images, fonts, and colors we thought represented those core ideas. After about half an hour of searching, we looked at everything we had gathered and discussed what fit the most. We were both drawn to a bright teal color as our starting point. From there I pulled 4 images I thought went together because they all had a vertical motif, contained nature, and bright colors. With these images locked in, we discussed combining a playful rounded font with a san serif legible font to balance playful with professionalism. I then organized our images, fonts and colors onto a mood board.

This was it! Our starting point. Next week we work on UI design.

Login Screen Challenge Part 1