Rojin Maljaei
UI/UX Designer

Smoobu "An on-boarding process"

Introduction

Smoobu is a vacation rental management portal that enables property owners to rent a property on several booking platforms such as Airbnb, Booking.com &, etc. The platform helps the property owners to manage their bookings while having a synced centralized calendar.
I joined as a Product Designer and collaborated with a team of product designers, developers, and a product owner.
The tools used for this project are:

  • Google analytics

  • Hotjar

  • Statista

  • Miro

  • Figma

  • Zeplin

This process was done in roughly 2 months.

This is your heading

You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.

Personas

As I joined the company, my co-worker and I decided to set up user interviews to get familiar with users and their needs. Since we were short on time, instead of interviewing actual users, we made interview sessions with our customer support team. They vary in nationalities: French, German, Greek, Italian, Spanish, and last but not least, English speaking countries. Moreover, we conducted brief user research based on the information we had on google analytics, and data providing websites such as Statista.
Based on the results, we set up three personas which we referred to throughout the entire product development process.
Considering what we wanted to know from users and what they need from Smoobu, we divided the information in our personas into 8 main categories:

  • An informative quote from each person.

  • Demographics

  • Characteristics

  • Devices they use

  • Their budget

  • Motivations

  • Goals/ Needs

  • Pain points

Each category contains at least 3 points in order to cover as much data as possible for each persona.
As we were done with the personas, we had a meeting with our stakeholders. There were some minor changes made, while we also heard different perspectives, especially from our stakeholders. As we all came into an agreement about the personas, we started working on points that were shared between personas. We printed them out, for everyone, from designers to developers, to keep in mind who we are targeting, and what do we have to keep in mind.

While making any changes, we tried to include all 3 persona’s perspective in mind and try to understand their pain points and if what we are implementing, can make their experience with Smoobu easier.

Smoobu

Sketches

Sketching is the easiest, yet most effective way of brainstorming between designers. Since we were two designers working on the on-boarding process, we decided it would be best if we start with low fidelity wireframes to iterate through many design options quickly. This helped us understand each others' ideas & purposes.

Once we were done with the sketches, we made a quick presentation of the on-boarding process for Smoobu founders, so that we could hear their ideas & reviews.

With having the user research results in mind, we came up with a 3 step on-boarding process. Why 3? Well, the cause of our personas. We figured more than 3 steps might be either confusing or boring, and of course, less than 3 will not be informative about what Smoobu does and if it is suitable for their needs. Our main purpose with the on-boarding was to engage the new users with the platform in the very early stages, for the main reason:
By synching at least one of their booking portals, users won't land on an empty dashboard and this will help them understand other features of the platform better as well.

As mentioned above, Smoobu is a startup and we were short on time. So we only came up with two versions. The main difference between the two versions was between the second steps. As it is shown in the final UI versions, users will have two options, either connect their Airbnb account through Smoobu, or provide some data, so that their accounts can be set up.

Smoobu

The order of steps is quite easy to follow.

The first step is all about Smoobu’s top features, followed by the second step which provides 2 options:

  1. Connecting their Airbnb account

  2. Users are able to provide some basic data and their accounts will easily be set up for them.

By the end of the third step, users will land on the dashboard. The option of skipping the on-boarding is available through all the steps for those who don’t feel the need for an on-boarding.

As the sketches were finalized, we moved forward to creating wireframes and final UI.

Wireframes

With the purpose of testing the sketches, we created High fidelity wireframes. This helped us figure out whether we were going in the right direction or do we need to rethink the process.

Our main tool for both designing and prototyping is Figma. Figma is all a UI/UX designer needs. Not only we can use it for design purposes, but it is also easy to create prototypes and with a sharing link, all team members are able to see and test designs.
We tested our prototype within the team and our customer service fellows to gather reviews and see where is room for improvement.

UI Design

Last but not least, Final UI design!

Our audience has a huge variety, both in age and their technical skills. There are homeowners who are non-tech-savvy and there are property managers who are young and tech-savvy. All that being said, by following iOS guidelines, Smoobu’s design system, and Bootstrap, we decided to have a modern light design. We designed flat illustrations, that transfer the message of what Smoobu actually does.

Smoobu is a web application with mobile and tablet views, so each and every design contain desktop, mobile, and tablet view.

Here are some Mobile views

And here are desktop views

What we learnt from this project?

Since the on-boarding project began only a month after I joined Smoobu, there were quite problems along the way. The concept of a vacation rental is not that easy to understand for non-homeowners. There were points that we weren’t sure if the information lacks or the opposite, are we bombarding the users with so much info that it may scare them away?

There was some hypothesis that we thought could be helpful and we should put them into test:

a. We tried to focus on what would be easy for users. Using flat, related illustrations instead of long, never-ending sentences.
b. In addition to that, by adding the easiest account for set-up (Magic Airbnb), we tried to avoid “landing on an empty dashboard".