Redesigning Create Profile Flow

TAKEAWAY

Good practice for cross-team communication

The original flow consists of three main sections: selecting services to provide, setting up a profile, and choosing the service delivery method. While the first and third sections require service-related information, they are not aligned in the process.

DELIVERABLES

This was the first time I had been assigned to solve a real issue alone. I was eager to find a solution and came up with many draft ideas, which I consolidated mentally. However, I did not document or share my thinking process, so my work appeared to non-designers as a blind guess. This experience made me realise that I am accustomed to working with people who share my mindset, such as my design schoolmates. I need to make a greater effort to communicate with people who have different skills to improve my collaboration and effectiveness in the workplace.

I learned to write down the necessary details that the team might be interested in throughout the thinking process, prepare for possible questions they may have, and then walk through every screen with them. Looking back, I think this was good practice for honing my communication and presentation skills.

To improve the overall process, I added an onboarding page at the beginning and a profile review page at the end. These additions help ensure that users understand what they need to do next. Additionally, I included a progress bar at the top of the page. This allows users to understand their current location within the process and how many steps they have left.

Pro users can select all three service delivery methods on one page: travelling to customers, having customers come to them, and working remotely. Users who choose to travel to customers are required to specify which locations they can visit, while those who choose to have customers come to them must input the company's address. As a result, too much information is on one page, and users need to scroll up and down to review it.

The obstacles in the original flow

Rearrange the sequence of the main sections

Regarding the sequence, I have rearranged the service-related sections and put them together. Since the service-related information has multiple choices, I have placed those sections at the beginning. The profile setup section requires users to input a short description and upload a profile picture, which can be relatively challenging. Therefore, the profile creation process should be arranged from easiest to hardest. Users are less likely to give up at a later stage if they have already filled out most of the information and are close to finishing.

Minimise cognitive load

I avoided visual clutter on every page to help users understand the content and make quicker decisions. Specifically, I only put one task on each page so users could quickly complete tasks. This also allows users to skip unnecessary steps if the information is irrelevant to them.

Build visual hierarchy

Visual hierarchy is crucial for delivering information to users effectively. To indicate the hierarchy, I applied new colour and typeface contrasts. I used the brand colour only for the primary action. Additionally, I rewrote the headers to start with a verb, providing clear instructions and maintaining a consistent voice and tone throughout the process.

BACKGROUND

HelloToby is a service platform based in Hong Kong that has been connecting service providers with potential customers since 2016. During my time at HelloToby, I helped to resolve UX issues and built a UI system library for the mobile application and website. I will share a redesign exercise I did in 2017 in this case study.

OBJECTIVES

HelloToby was trying to establish its name in the community. The marketing team worked hard to raise awareness of HelloToby among potential users. Losing users during the signup stage is a pity. The team is confident that those who quit at step 3 were interested in signing up for the platform because they passed the phone number verification step involving sensitive personal information. I was assigned to study why users leave during the profile creation step and optimise the user experience on the mobile signup flow.

PROBLEMS

“Pro” users did not finish the signup process

In HelloToby, we called service providers “Pro,” short for “Professionals.” There are four steps in the Pro signup process, and around 30% of new users quit at step 3, creating a Pro profile.

HIGHLIGHT

To redesign the current profile creation flow to reduce churn rate during the sign-up process.

HelloToby

To reduce the churn rate during the signup process

HelloToby is a community-driven marketplace for services. Photo by HelloToby

ASSUMPTIONS

The potential Pro users who didn't finish signing up due to unclear instructions and a clumsy interface for inputting information need a simpler and more straightforward sign-up experience.

Given the limited time and information, I interviewed the operation team to get their insight on the onboarding experience and made some assumptions to reduce the scope.

The majority of potential Pro users have a basic understanding of the app and how it works.
The majority of potential Pro users are motivated to try the app.
The majority of potential Pro users are willing to provide sensitive information.

Hence, here is the problem statement.