February 2020

Login Scenario Case Study

Duration
4 weeks
Team Role
Solo Project
Primary Tool
Figma

Challenge

What makes a good login?

This was a class project with the goal of doing a deep dive into what makes a successful log in and to design/prototype a login scenario user flow based on the analysis.

Phase 1

Research

Analysis

Logins often go unnoticed, but to say they have no impact on user experience would be a massive oversight. To start, I went through every login/account recovery I could on mobile and desktop. I identified trends, pain points, and common flows across many applications.

Phase 2

User Flows & Wireframes

Definitions

Returning User

A user who has used the app before and has previously logged in on the current device.

New User

A brand new user who has never used the app before and does not have an account.

Returning User
(New Device)

A user with an account but a new device that hasn't been fully set up yet.

Key

Returning User

Since we are designing for a mobile app, it is more likely than not that the user is returning and already has an account. Thus making this our primary use case.

New User

This flow will be experienced by every new user. The goal here is to educate the user and gather the info to create their profile.

Returning User (new device)

This is our least occurring user flow. This will only be encountered by those that get a new phone and don't sync the settings, or delete and reinstall the app.

Account Recovery

If a returning user forgets their password, pin, or fails authentication too many times they’ll have to reset their password.

Phase 3

Mockups & Prototyping

User Authentication

Welcome Screen

Login

Sign-up Form

Account Recovery

Home Screen

For the sake of completion, I created a basic homepage. This was not a focus of the case study but felt necessary in order to create a working prototype.

Overlays

I decided to use overlays to alleviate the need for multiple screens. This made the overall user flow easier to navigate

Error Handling

The UI provides feed back to the user that their input was invalid. The feed back details what specifically went wrong and prompts them to try again.

Take Aways

1

A good system will treat users differently depending on their specific use case.

2

A good design accounts for edge cases as they appear without bringing them to the attention of the user unless necessary.

3

Not only must we consider who our user is when creating a design but under what conditions are they using an application.

Keep Going!

Next Project: CO