User Sign In & Account Creation Feature
Update user sign in and account creation flow for an existing mobile app.
Platform iOS and Android
User Interface Design
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.
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
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