Reducing Friction in Signing up

Overview

In 2017, we saw the registration and sign in experience of Zhihu was challenged because the existing design has much friction for new users. Our goal was to reduce possible friction throughout the process and drive the conversion.

My Role

  • Led the redesign of the entire sign up & sign process for iOS & Android.

Where is the Friction

image To get a better understanding of the existing process, I did a comprehensive experience audit of Zhihu’s mobile sign up and sign in interface flow. I also observed how people interacted with the existing interfaces, and identified the friction and opportunities throughout the entire journey. image

Learning from Other Apps

Before jumping into designing, I analyzed how other apps designed their sign up and sign in experience. image

Key Findings:

  • Multi-step sign up is applied well to mobile scenario. People can focus on one task at a time and the experience is more smooth.
  • Using multi-step sign up has positive impact on increasing conversion rate, because people feel less overwhelmed when the design walks them through the process.

Design Decisions

Sign up: One Task at One Time

Informed by the findings in competitive analysis phase, we ran a fast A/B test to validate our assumptions. The result indicated that registration in one step with multiple forms did suffer higher bounce rate compared to registration in multiple steps. Thus we decided to break down sign-up into three steps. image image

Sign in: Pull the easiest way out

SMS verification is the easiest and most popular way for people to sign in, but in existing design, the choice was buried in a bottom sheet. To solve the problem, I decided to use two tabs to put both ways. image

Updating the Entire Flow

image

Design Solutions

image

Less Click times

Previously, there were 5 clicks away to sign up. Now it only needs 2 clicks throughout the process. The multi-step design is more efficient even though the procedure seems longer. People spend less time finishing signing up. image

Unified Structure

I used the Complexion Reduction design language to focus on the key task of each step. By following a shared structure, pages throughout this flow are consistent and clear. image

Be Mindful of Visibility

During user testing I realized a problem. The original sign in button was placed on the bottom of the page, so users couldn’t find it right away when they needed it. In the next iteration, I moved the sign in button to the top right corner to make every important elements more visible. image

The Outcome

Our main metric is the overall conversion rate between opening the page and signing up / signing in successfully. After we launched the new design with A/B test, we found that the sign up conversion rate increased by 8%, and the sign in conversion increased by 32%. Also, people gave us lots of positive feedback for better experience.