Design test

Login screen for Gooal! app

This project was developed for the test requested by Amplifi Labs. Here I present the process of building a login screen for an app for betting on soccer games.

Understanding the user

The first step was to understand the context of the project better.

I have to confess I don’t know much about sports betting. The only time I had any interface with that was when I received a coupon with a significant discount to bet on an important game. But my registration wasn’t approved in time, só I didn’t even get to bet (fortunately, because I was about to bet on the wrong team).

As the project deadline was (quite) short, I restricted myself to superficial research. I watched some vídeos of experts talking about bets, visited some sports betting sites, and read some articles. That helped me understand better the audience the project is aimed at. This step is important to help me visualize the user's profile and support future UX and UI decisions.

Then I could invest some time understanding which actions the user would like to do on the login screen, what they would be expecting, which features they would like to find.

As a soccer betting app user, on the login screen, I'd like to:

Log in using my email and password;
Reveal my password on the screen if I want to check it;
Log in through social sign-on (Facebook and Google);
Register if I don't have an account;
Remain connected once I log in;
Recover or change my password if I have forgotten it.

Sketching and ideating

So I started putting ideas down on paper, working on possible structures for the login page that would meet the conditions of use. In this process, I looked for login screen references on sites like Dribbble, Behance, and Pinterest as a starting point for the interface.

Two-step login

During this process, I sketched out different ideas for the structure of the screen, as well as possibilities of features. One of these ideas, which I found very interesting, was to split the login flow into two screens, presenting on the first screen some cards of daily possible bets along with the login/sign-up buttons.

The main advantage of this approach is to present betting possibilities to the user since the first screen, showing a call-to-action: "Start betting today". With that, we could encourage them even more, to log in or register. The downside of this option is to introduce one more click into the login flow. This makes the experience a little more laborious, but could be justified if this results in higher conversion rates.

Wireframes & Tests

Of course, to reach more precise conclusions about this, it would be recommended to perform conversion testing in a real context, which the nature of this project doesn't allow me to do. On the other hand, I could have initial insights about this by showing a prototype to some users and getting their impressions.

So I decided to build wireframe prototypes of both versions - the simple login screen and the two-steps login flow. A wireframe prototype usually would be more straightforward than the one I made for Alternative 2. But, as I intended to test its appeal, I’ve decided to work on it a little more to give the users a more accurate sensation, even with a wireframe prototype.

Alternative 1 - simple login screen

You can see the prototype here

Alternative 2 - Two-step login flow

You can see the prototype here

User tests & Insights

To capture insights from usage, I invited five friends to test both models quickly. These tests didn’t occur in perfect conditions, and there was no adequate selection of the public either, but without doubt, bringing other points of view has helped me reduce my bias about the product.

During the test, I presented one of the prototypes and then asked the user to complete the tasks mapped earlier (log in using email and through social sign-on, sign up, etc). Then I presented the alternative prototype and asked for opinions on both.

After that, I could see that the two-step login, although it aroused curiosity and had greater aesthetic appeal, had a much less fluid experience. Not only for needing one more click to complete the login, but the interactions proposed on the screen ended up distracting the users and distancing them from the screen’s primary purpose: log in.

Thus, the simpler login screen proved to be a much more straightforward option, suitable for this project context (not to mention that it was a more opportune option, given the project deadline).

Creating the visual

After defining the structure of the page, I started to work on the visual part of the interface. Following the guidelines defined in the project briefing, I looked for references to help me set a visual direction for the project.

With that in mind, I built a visual identity study, defining the logo, colors, typography, shapes, and other graphic elements. I didn’t put much effort into it, as that wasn’t the project’s focus. Therefore, I elaborated just enough to give me a visual foundation só I could work over it. The idea is to use a vibrant color to highlight details and points of attention and contrast straight forms and typography with images that refer to movement, action, and, of course, soccer.

Login screen

With the visual guidelines in place, I was finally able to work on the final interface of the login screen. I present the final version below:

You can see the prototype here

Actionable elements

To meet the usability requirements, allowing the user to perform the desired actions, were inserted the following actionable elements on the screen:

Email input - A text input with email validation.

Password input - A text input for password with the option to hide or show the text.

Remember me - A checkbox that the user can select to make the login persist.

Forgot password? - A link that redirects the user to the password recovery form.

"I'm ready" - Login button (using email and password inserted by the user)

Social sign-on icons - Buttons to sign on using social media accounts (Google or Facebook)