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.
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.
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...)
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.
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.
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.
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).
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