User Sign In & Account Creation Feature

Before

After

Overview

Update user sign in and account creation flow for an existing mobile app.

Platform iOS and Android

Role

User Researcher
User Experience
User Testing
User Interface Design

Background

Being an agile company, we approached building the features that made our app usable. Accounts were created by an administrator, the process was cumbersome.

I created some initial user flows and wire frames then called a meeting with my team to discuss. Through out the iterative process concepts were tested, shared with the team, and presented to engineers and stakeholders.

Through user research, I discovered people were failing in two places. The first being the big blue Sign In button at the bottom of the screen and the lack of information explaining what kind of information was expected.  Most assumed they could use their personal email. Others could not fill in a correct password and could not easily find the password policy.

When prompted to find the password all users tapped their way through the need help button onto the company website to download a pdf, only to return frustrated once more to have to remember it! While some easily switched between apps, others grabbed for a paper and pen.

Creating an account should be easy and frictionless. By providing user feedback in real time we can eliminate the risk of failure, decrease frustration and improve the user experience.

Input Feedback

Each field will change to the success state when the content of the input matches the regex for that feild. For example, if the email input matches @someemail.com or if the password feild matches the password policy.

User Taps into Password Input

When password input is tapped the Create Account button should slide down and a list of the password policy appears. If the user exits the password fieild the animation should reverse – the password policy disappears and the button slides back up.

User Types into Password Input

As the user enters characters that match the privacy policy list, each item should check off. If the user deletes one or more of these characters from the form the item in the privacy policy list should uncheck. If the user enters all When all characters match all items in the list should be checked off.

Create Account Button

When the screen loads the Create Account button should be in a disabled state. Only when the email and password inputs are both correct should the user be able to use this action.

Keyboard  & Inputs

When the keyboard is in view the user should be able to tap outside of the active field and the keyboard to dismiss