Welcome to Hera's site

UX analysis and UI redesign

UX analysis and redesign of
PayPal mobile app

Category​

UX Analysis
Design

Client​

PayPal

Start Date​

March 2022

Designer​

Hera

Project overview

This UX design project, which is a facial recognition-based authentication onboarding process within the PayPal mobile application. This is a high-friction experience with multiple steps, so the user drop rate is relatively high, and also there are many privacy issues.

For this project, my task was to redesign the whole process of user interfaces to maximize the optimization of the user experience, analyze what caused the drop rate from a designer perspective, so that we could work on to reduce the user drop rate, and at the same time, make the interfaces more beautiful and coherent.

To find a simple solution to address this complex problem. I was focusing on improving emotional satisfaction to ensure pleasant experiences throughout the process.

The user flow involves multiple steps, particularly during the ID photo capture and liveness capture processes. If users are not familiar with these steps, they may become confused or overwhelmed by the actions.

Previous User Flow:
Cognitive Load and Clarity

As you can see in the previous user flow, the design was very unclear and lack of instruction. The user flow involves multiple steps, particularly during the ID photo capture and liveness capture processes. If users are not familiar with these steps, they may become confused or overwhelmed by the actions.

A user journey map

I developed a user journey map to identify major blockers that caused user frustration from each step. By reproducing these problems, I was able to break down the user process into three aspects: doing, thinking, and feeling. As you can see from my interview questionnaire and the journey map based on the result. There are many thoughts and feelings during the loading phase, there were many negative thoughts and tend to be nervous and anxious, which gave me a little hint that I might did a careful thinking about this one.

Consent page

The very first step would be the consent page. As you can see, there’s about 26% of people dropping off, which is a huge number. Problem: During the consent stages, the previous design offered too many option to exit the page. Also, the agreements over here are taking up too much space, which can also lead people to click on the blue options here. To proceed, there’s only one way to continue.

Solution: To cut it down, I did a research on the current product so there are 3 solutions to address this problem.

ID Capture and
Liveness Capture

During the ID photo capture and liveness capture stages, there is a lack of immediate feedback on whether the user is performing the steps correctly until the checkmark appears.

The flow does not clearly show what happens if an error occurs, such as an unreadable ID photo or a failed liveness capture. Users may be unsure how to correct their mistakes or whether they need to restart the entire process.

Implement error prevention and recovery features. For example, if the ID photo is unclear, immediately prompt the user to retake the photo with specific tips on improving clarity. During liveness capture, provide clear instructions if the user fails to perform the required actions (e.g., not aligning their face properly).

Introduce more dynamic feedback during the capture process, such as real-time alignment guides or progress bars. 

Redesign of ID Capture and Liveness Capture

Here’s the redesign of these 2 stages. I put a new navigator above, added a retake button and added more positive feedbacks to every success steps. This could encourage users and also enhance user satisfaction.

Loading Page

Then it comes to the loading page. I addressed the problems here. People can make mistakes, so sometimes you don’t have to overreact on this. Mistakes can be identified as big mistakes and tiny mistakes. When there are serious problems, like session time out or document problem, a stark warning will reduce users’ confidence. A pop-up window will be more acceptable. But when there’s a scanning problem like lighting issues, rather than taking up the entire screen for a warning. Users will think to themselves: “What’s the big deal!!!”. But I didn’t get to redesign this part, because this wasn’t required, so I got to analyze and give a reference.

Then for the loading pages. There are 2 loading stages during the whole process: after the ID capture and after the liveness capture. Remember from the journey map, people can think A LOT during loading stages, especially after a long journey of this process, Users tend to feel more engaged since it’s close to the end. Therefore, a more user-friendly presentation leads to a better user experience.

Additionally, the progress indicators (“Reviewing scans…,” “Comparing info…”) are passive, leaving users unsure of how much longer they need to wait. For the waiting screens, it would be helpful to use more engaging animations or show an estimated time to completion to reassure users and reduce anxiety.

Redesign of loading pages

I added some critical visual elements, such as the tips for users to read when loading, loading animation, and also navigation above to track the progress and give users comfort to wait for another few minutes.

Key Takeaway

The optimized facial biometric experience design contributed to a better user experience and positive feedback was received. Although it’s a demo prototype and didn’t get to launch at the end, it’s still a valuable experience for me to act as a bridge between cross-functional teams for the first time and to share some design knowledge to those engineers.