Utilizing Typography to Guide the Customer

Typography | User Flow | Journey Mapping | UI Design
Before and after of Registraton Confirmation page

"I keep getting a 'user status inactive' warning despite just setting up my account. Please fix this!"

- Customer feedback before updates

The Request

A project manager contacted me after being informed of a series of customer complaints from new customers who were unable to access their accounts. Once the customer completed the registration form and attempted to log in, they were receiving a "user status inactive" error message. The project manager asked if we could improve our error message to better guide the customer, but once we walked through the customer journey, it became clear the real problem might be on the confirmation page.

Primary Goal: Make it more obvious to customers that they need to verify their email address after creating an account

Tools: Figma, Hotjar, pencil & paper

Compatability: Desktop & Mobile

Analysis

In addition to walking through the users' flow, I reviewed our heatmaps and customer feedback in Hotjar to gain further insights into our customers' behaviors and issues. I noticed that the move heat map in Hotjar showed that customers were skipping over some of the critical information on the registration confirmation page.

Expected User Flow

User flow from create account to login

Mapping the Customer Journey

By walking through the customer journey, it became clear that a customer might not see that they needed to verify their email address before logging into their new account.

Journey map of what a user is doing and thinking during the create account flow

Final Design of Confirmation Page

Final design of the registration confirmation page with typography improvements

Results

Although I remain skeptical of a final result of zero, we saw an immediate decrease in new customer complaints about having issues logging into their account after this change. Before this update, we received 1-3 written feedbacks a week, and after this change, we received no written feedback from new customers about having issues logging in.

What About the Error Message?

There was no doubt that the error message needed improvement, too, regardless of finding the root cause of the problem. Sadly, when I was discussing this error message with the lead developer, I discovered we had a technical difficulty changing it. Not only was this scenario running into a generic "catch-all" fall-back error message when the devs don't have much information, but with how they had error messaging set up for login, it would have been a significant effort to try and get a more customized message here. This issue was noted but prioritized to be tackled within a different project focused on improving error messaging.

Website Redesign Previous
Registration Page Next