The Problem

This project update features a popular telecommunications company’s mobile app which requires a customer to verify their personal account to view important account information. Should the wrong ‘Customer number’ be entered users receive the error message screen seen in the third image. 

Redesign Edits: Account Homepage

The ‘Account homepage’ should lead users along a clearer path as they navigate the verification process.

The below image offers edits and recommendations alleviating possible user pain points. 

The redesigned mock adds a hover-over tooltip revealing an ‘information’ screen with a visual customer number example (i.e., billing statement). White space is utilized to separate the verification button from all other short links. And most importantly, revised verbiage now guides the user seeking written instructions.

Redesign Edits: Error Page

The current ‘Error Page’ does a good job of reminding users of the app footprint/where they are in the verification process. Edits made to the previous screen should be carried over to this page for consistency. An update to the color formatting and verbiage is recommended.

Finally, the Error Page was redesigned as a near-mirror image of the Verification page allowing continued users ease with the app’s footprint. While, an error occurred the updated verbiage, seen in the blue callout box, offers support and guides users with instructions on how to correct the possible error and where they find their way back on the verification path. Additionally, in the Customer Number field, a suggestion is to build code into the app locking the entered Customer Number into the field allowing users to double-check the number entered.