Signup funnel

Redesign the signup process of GuestToGuest users

Context

On GuestToGuest website, when a user signs up on the landing page, he enters his name, his surname, his email adress and a password. Then comes a funnel in which he has to create a home listing. We ask for informations about the home like adress, number of beds, photos. In order to do an exchange, even a non-reciprocal one as a guest, a user has to create a home on the website.

Problems

old signup
  • Current signup funnel is not engaging users.
  • Current signup funnel is not welcoming properly new users and giving them enough context to give information about their home.
  • People leaving the signup process or filling verry little informations about the home (home completion < 50%)
old signup

Goal

  • Make the home creation process more engaging to the users
  • Give more clarity to the user about what they are doing
  • Increase the number of qualified homes (completion rate <50%)

Our proposal

  • Divide the funnel in steps so that the user focuses on one thing a time
  • Add a progression bar so that the user knows how long the funnel is going to take
  • Display illustration to go with the journey of the user
  • Make 4 steps mandatory and 4 steps optionnal that the user could complete later

Design process

Order of informations

First thing we looked at was the order of the informations we were going to ask the user. There are a lot of informations to be filled out by the users when he arrive on the site for the first time, so the objective was to set an order that would make sense. Each informations add value to the house of the users, in GuestPoints (regarding the locations, capacity of sleeps, equipments, etc...). We also looked at data to see which informations were more relevant for the user to complete first.

Benchmark

We then study how other product-driven companies were onboarding/welcoming users, we looked at multiple signup process, and websites where people can add a home listing to become a host (Airbnb, homeaway...)

Wizzard

We decided to use the wizzard design pattern, to split all the steps and make it easier for the user to complete all of them. As the funnel would be very long to do (8 steps), we cut it down to 4 mandatory steps, and 4 optionnal steps that coulb be filled later.

user flow

Wireframes

At each step, all the main ui would fit the left side of the screen, leaving space to the right to display a hero illustration. CTA buttons on the bottom left, to continue or to go back. On the top, below the header, a progress bar divided in 8.

wireframe

UI

The interface was pretty easy to implement, as the pattern were pretty basic. We decided to display tooltips to give context and help the user during the flow. For optionnal steps, the continue CTA could not be clickable until all the informations were filled.

home equipments profile

Illustrations

Illustration were created to illustrate the steps, in a light mood way. We applied the main red and blue of GtG with a gradient palette. 4 illustrations were done by a freelance, and the 4 others were done by me (with the help of our dear friend gettyimage).

description
profile
home
size

My role and team

I was involved in the creation of the user flow, and I worked on the interface/interaction design of the wizzard. I also created some of the illustrations. When the UI was validated, I delivered the screens to the developers and made sure the implementation was done right.
Other team members : Product owner, devs, data analyst & scientist