Create An Account
At the time users could not create an account. This feature had not been built yet. Before it was we conducted some user testing using our old app and a prototype of the new design.
Through our research we discovered that people were failing in two places. The first was the prompt to Sign In. They assumed that they could use their personal email because they were not told otherwise. Another problem we found was the password policy. People were unable to login in several times without getting errors then being asked to try again.
When asked 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.
User flow diagrams were created to get the initial outline of what we were trying to build followed by wireframes. Both documents were shared with cross functional teams. The contents discussed and iterated over until it was ready to be built by engineers.
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