AlgaeCal gives natural, clinically-proven solutions for women worried about osteoporosis.
Customer service was reporting complaints about the password reset process. Users thought the steps were confusing and didn’t think it was working.
Objective- to create a Forgot Password process with minimal interruption to the user.
First I ran through the password reset process myself. Along the way, I made notes and took screenshots of any frustrations, redundancies, or other problems.
Then I compared our process to that of other sites. I looked at Amazon and Facebook since they are sites most people are familiar with but I also looked at Dr. Axe, whose site more resembles our own.
I wrote summaries of the steps needed in a simple spreadsheet so I could compare many sites at once. A red cell indicates a possible UX issue that can be improved:
• Amazon and Facebook both email a numerical code for the user to confirm. This didn’t seem necessary for our site (or Dr. Axe’s) and would be more work than we want to put our users through.
• It is important to show indications when the user completes a step! Dr Axe doesn’t confirm that it will send you an email or that your password has changed. Our own site drops you off at the initial login page leaving you to wonder if it worked or not. If the user has already typed their new password twice, let’s let them in already! No need to type everything all over again.
• Every site makes you re-enter your email, even you just typed it in the last step. I know we have the technology to remember what was just typed. Did I really find an idea that Amazon and Facebook didn’t think of?
• When typing new password, the characters are hidden as •••• by default. The AlgaeCal site has an ‘eyeball’ button that I haven’t seen anywhere else. It’s too ambiguous and possibly creepy:
Facebook uses a simple text switch saying “Show/Hide password” which is much more natural:
My next step:
I kept all all of these observations in mind as I sketched out a basic user flow for the new process. In my versions, all of the redundant calls for re-typing a password would be removed. The need to sign-in a second time would be removed. The user will not be abandoned on a meaningless page or left uninformed about what’s happening.
Afer showing this new user flow to the project manager, I Iearned there was a crucial detail missing. While it was true that some users will want to see the account page after signing in, the vast majority of them actually are signing in while in the middle of a purchase.
While in checkout, they are asked to sign-in to avoid having to type their shipping address, etc. In that case, they don’t want to go to their account page at all — they need to go back to checkout to complete their order.
It was suggested to end the process with a ‘Password Change Complete’ page containing links to various places the customer may wish to go next: their account page, checkout, or the products page.
I thought we could do better, though. The user shouldn’t need to tell us where they want to go. Why not just automatically take them to where they left off? For example, if they are in Checkout when they click “Forgot Password”, we can use a unique link that brings them back to Checkout.
With that solution approved, I was ready to create mockups showing what the steps would look like.
I reduced the Forgot Password process from 8 steps down to 4 steps and made the instructions more helpful and informative along the way. The COO was happy with my solutions:
Can we build and test it? The development team is waiting until after our planned switch to a new e-commerce platform but they are glad to have an improved design to build when setting it up.
What did I learn?
There is always more to know about a project than what is in the brief. It is important to ask questions about what the user’s goals are when they begin any process. I’m thankful that my user flow included the steps before and after the process in question so that it is easy to see how the design fits into the bigger picture.