NomadX — A Redesign of the Onboarding Process

NomadX is on a mission to revolutionise the way remote work travellers, or “Digital Nomads”, live, work, and travel the world. [The company] started with the desire to help others easily and affordably experience the slow-travel Digital Nomad lifestyle whether for a month or a lifetime in amazing locations throughout the world, with a start in Portugal.

Timeline: 2 weeks | Role: UX Researcher | Client: NomadX

BRIEFING

NomadX was facing an issue related to the onboarding of their new users. As a matter of a fact, a reasonable percentage of this group never completed the sign up, meaning that part of the investment made to attract new users turned into waste. Solving this problem meant we were turning the on-boarding process smoother and easier.

Therefore, under the light of my last project at Ironhack before graduation, I took upon the challenge and fulfilled the role of a UX Researcher to further investigate how we could improve the experience of registration at NomadX. Therefore, the objectives for the project were defined:

  • Understand why users who sign up but do not complete the on-boarding/registration process
  • Define the type of users who are using the NomadX website
  • Explore new user flows and concepts for the registration process
  • Improve the current registration experience
  • Evaluate the performance of the registration process
The Original Sign Up and Onboarding Pages of NomadX

🔍 METHODOLOGY

For this project, the following methodology was applied:

  • Development of an online questionnaire to understand the motivations of users enrolling in the platform and what issues they were experiencing — goal of 40 answers
  • Conducting interviews with digital nomads and hosts — goal of 6 interviews divided evenly between the two groups
  • Usability testing with the interviewees to assess their difficulties and emotions while signing up and onboarding in the platform — same goal applied as before
  • Benchmarking Analysis — Competitive and Strategic — to know how are NomadX’s competitors and non-competitors doing their onboard of new users?
  • Finally, development of a new design for the onboarding process that included low, mid and high fidelity versions.

💻 SURVEY AND INTERVIEWS

Survey

Introductory Message for the Survey — using Google Forms

To start things off, an online questionnaire was drafted using the Lean Survey Canvas. The goal of this survey was to get quantitative information about both types of users who use these kind of services regarding the online booking of accommodations and and respective hosting.

We made use of NomadX database of registered users to reach out to the desired segments that we believed to be relevant for the process. And this would also be a nice way of involving their customers in the improvement of the platform. Thus, the segments were the following:

  • 25 Hosts — onboarded less than a month prior to the project
  • 25 Nomads — onboarded less than a month prior to the project
  • 25 Random Users — didn’t finish their online process

In the end, we reached only 27 answers that didn’t match the initial goal of this project. Worst of all, of those 27 respondents, only 1 was registered in NomadX as a host and, unfortunately, very little information was extracted from this method. At this point, I felt that I had somewhat wasted one day preparing that online questionnaire and hoping that it would give me something more interesting.

Interviews

Despite the lack of meaningful responses from the survey, I was able to get a lot of insights from the one-on-one interviews I conducted. In the end, I had meaningful conversations 6 individuals from my direct and indirect network:

Reaching out to previous hosts I encountered during some of my trips
  • 3 Digital Nomads: people who had experience in working while travelling and who also felt the need to book an accommodation or plan their trip ahead via similar platforms such as NomadX.
  • 3 Hosts: people who were or still are Airbnb Hosts (since it is the most common booking platform); for this, I even reached out to previous hosts I had come across with in previous trips.

All in all, the interviews proved to be way more insightful than the online questionnaire. And this alone taught me a valuable lesson — if I am task to redesigning a flow, process or someone else’s work, the first thing one can do is to perform immediate usability testing. During my interviews, not only could I have insightful conversation with relevant people personally, but also attend their reaction while performing the tasks I asked them to within the platform.

Some of the most “screaming” reactions

🧐 UX RESEARCH RESULTS

Throughout the usability tests, I was provided with improvements points beyond the sign up process. I placed every insights received in an Affinity Map (image below) and clustered them in different categories. In a nutshell, I would like to highlight the following themes, as they follow:

Landing Page: the placement of the search bar for accommodation doesn’t allow it be to the first thing that is seen in some computer screens — if one wants user to start exploring an accommodation website, that is a must

Copywriting: copywriting left the users rather confused and for those who didn’t know NomadX, they were not able to understand immediately what the companies does.

Colours: the choice of colours left a lot to be desired; NomadX’s main colour is a very strong pink and the secondary colour is blue, which isn’t very pleasing in the eyes of most users. So little to the point were they felt sadness and distant while using the platform.

Sign Up Page: the sign up up page only provides users with two forms of registering — either using email or facebook; if a person doesn’t have a facebook account, he/she is forced to go through a long process.

Onboarding: as it had already been anticipated by NomadX, the onboarding the part of the process with the most critical issues — too long, no information the number of steps required to complete it, little freedom and annoying.

The Affinity Map shows and organises the main findings from the UX Research phase

💼 BENCHMARKING ANALYSIS

For the benchmarking, NomadX team provided me with their 4 main competitors — Uniplaces, VRBO, Airbnb and Spotahome. For this analysis, I intended to study the following stages:

  • Landing Page
  • Sign Up Page for Accommodation Seekers and Hosts
  • Listing of a Property as a Host
  • Profile Editing
Analysing the Sign Up Page of the 4 main competitors of NomadX

Something that I noticed in every platform was the simplicity — To register and start using the platform, the minimum required was to provide with an email and/or phone number, it takes literally no time to be part of the said community and either book an accommodation or list a property (this requires a few more steps, obviously).

After the benchmarking analysis, I felt that I had a solid ground and inspiration on how to improve the registration process of this challenge.

🤓 PERSONA DESIGN

This project there are two obvious personas — the local host and the remote worker or digital nomad, if you will. For this two week project, I decided to focus only on the digital nomad side.

Based on the interviews with other digital nomads and the information that was fed to me by NomadX, Noah Dalton came into play as we designed the prototype around his needs and wants. Noah is a person who likes conveniency, is quite impulsive and wants things fast — quite a normal trait in today’s social media and digital services era — so the question was — can we create a onboarding that satisfies these needs?

Noah Dalton is a Belgian Remote Worker looking to move in to Lisbon, Portugal

👤 USER FLOW

Before defining a specific user flow, I created several Use Case Scenarios for Noah and his interaction with NomadX. Basically wondering, “For what purposes would Noah be using the platform?”

Use Case 1: Noah wants to sign up in the platform and start exploring it freely as soon as possible

Noah just landed in the NOMADX website. He is quite convinced thus, he wants to sign up through the platform. He clicks in the “sign up” button which leads him to the Create and Account page. He signs up with his facebook because it is fast. NOMADX immediately gets his details (email, name, picture). With that up and running, he is sent back to the homepage.

Use Case 2: Noah is interested in updating his profile so that I have better chances of being chosen by a host

Noah is quite ready to explore more of the accommodation options and book something. But he just wants to increase the chances of him being accepted. He goes to “My Profile” in the top menu (clicks in the circle with his picture) and the system leads him to an edit profile

With the two use cases, I was able to embrace better the actions that Noah could be taking. And so, I was able to put a user flow that covers both of the cases presented. Basically, Noah is signup in the platform and immediately completing/editing his profile.

The user flow of Noah Dalton

✏️ PROTOTYPING & TESTING

Low Fidelity

As I finished up gathering insights, I moved on to create a low fidelity prototype that could serve as an alternative sign up and onboarding process for any user within NomadX. So the main changes that were applied to the original process are the following:

  • Search Bar: although not linked with the sign up / onboarding phase directly, there was feedback on its placement as some people couldn’t see it in their screens. As a result, the Search Bar was placed right at the top of the screen — which also follows the trend of other accommodation platforms.
  • More Registrations Options: more registration options have been added beyond Facebook, including G+ account and LinkedIn.
  • Informative Onboarding: Noah can pick what type of user he is (nomad or host) upon registering; also, there is information about in which step of the process he is in, allowing him to manage his expectations
  • Skip Button: also, a skip button has been added to the process as users should not be forced to complete their profile They are asked are recommended to complete but it is a task that should not be imposed.
  • Less Data Input: the original version ask for a lot of information all at once, something that is annoying to Noah. So the new prototype is going to make this simpler and move that information input to another section — in this case, the profile editing phase which doesn’t enter in this low fidelity phase.
Low Fidelity Prototype using InVision Freehand

After testing the new prototype with 6 different people, I finally learned a few things .

  • The current for of email verification didn’t make any sense. People expected to verify it somehow upon registering but the platform allows them to do it a much later stage. It’s of NomadX interest to have verify their emails rather quickly and it’s something that doesn’t shock anyone.
  • The whole breakdown process of the sign up and onboarding felt more pleasing. The adding of the Skip Button made it easier for people to get down to what they wanted — search for an accommodation. Overall, it was smoother and more direct
  • Although a progress bar was placed in the prototype, it didn’t make much sense for those who tested the prototype. They didn’t understand what that was for, per that chosen design

Mid Fidelity

Now with the insights collected from the low fidelity prototype testing, I moved on to the mid fidelity version of it. In this phase, I added a new layer that included the profile editing, as it can be seen below.

Another part that came into testing was the standard email verification process of receiving an email upon completing the registration.

In this phase of the project, I didn’t have a lot of learnings. It was rather a “green light passage” that assured me that the process and options that I was applying made sense.

“It doesn’t shock me having to verify my email right away” — Hugo Rocha

Testing the Profile Editing phase of the prototype

✨ HIGH FIDELITY

The high fidelity version was reached

Style Guide

As I progressed in the prototypes that had been created, I was adding more and more layers of complexity to this project. And something that was evident throughout the whole process, starting from the research was that both colours and typography hierarchy needed a revision as well.

The Style Guide used in this project

Thus, I opted to change the colours that had been used in NomadX to make the platform more appealing.

Since pink is the de facto colour of NomadX, I knew that I couldn’t change it. It isn’t the easiest colour to use but I think I managed to make it work when I went with a complementary colour, in this case, green. After testing it out, it seemed to create more harmony in the platform and give it a more pleasant, friendly and warmer feel.

Regarding the typography, I used the original Avenir for titles and sub titles and Hind Mudarai for texts and links.

Upon going through both the low and mid fidelity version and conducting several tests to try different nuances, I reach the high fidelity version which represented a redesign of the sign up and onboarding flow of NomadX.

Landing Page

The Landing Page was included in the redesign because it is the first thing that Noah sees when he enters the platform.

  • As it has been being stated throughout this post, the Accommodation Search Bar was placed higher in the screen so that it can be seen immediately.
  • The call for action Search button colour is pink, the colour of NomadX, to highlight it as the most important thing to do.
  • On the top right, a Sign Up call for action can be found and that is the button that kick-starts the flow of Noah.
  • Finally, there were some minor changes applied to the UX Writing, background picture and aesthetics of the landing page.
Redesign of the Landing Page

Sign Up Page

The Sign Up Page ended up having the following aspect and several new elements:

  • Three quick sign up options that include Facebook, Google and LinkedIn, the latter a well-received option that made a lot of sense since NomadX is direct to remote work professionals
  • A standard email sign up, which requires a full name, email, password (without needing to confirm it) and date of birth (due to the Terms and Conditions Agreement). The password section has a Show / Hide button.
  • A call for action Get Started to complete the sign up
  • Finally, a background image of a home to give a cool, cosy look to the whole page.
The Redesign of the Sign Up Page Sequence

Onboarding

Upon the sign and confirming the email account, Noah is taken to the onboarding page. The onboarding page includes three steps:

  • Step 1: Identification as a Digital Nomad or a Host
  • Step 2: Recommendation to upload a profile picture, with the option of using either Facebook, LinkedIn or upload one from the computer. This is not mandatory, thus, a Skip Button is included.
  • Step 3: A final stage where Noah is incentivised to complete his profile
Redesign of the Onboarding

Profile Editing

Finally, if Noah decides to complete his profile, he can do it in his My Profile section. This is where NomadX can extract all the remaining information about users that is not considered to be essential — About Me section, profession, phone number, hobbies, etc.

Redesign of the Profile Editing

📈 RESULTS

The results of this project indicate that the sign-up/onboarding path have a lot of space for improvement — from bettering the messaging and overall UX Writing, the typography hierarchy and use of colours to the experience new users have when signing up.

The recommendation of adding more options to the sign-up was well received by NomadX, specially the choice of using LinkedIn as one of those possibilities.

Another result of this project was the understanding of NomadX that changing a lit bit the aesthetics of their website would bring a fresher and more appealing feeling to anyone who’s visiting the website. At the moment of this writing, the company has already applied a few changes to the landing page based on this project.

🚶‍♂️NEXT STEPS

As a UX Researcher, I was able to pick up on several points for improvement within the platform of NomadX, some of them indirectly linked to the sign up process which was the challenge for the time being. With that being said, there are some other points which should receive attention:

  • Listing Property: as I interviewed hosts and did usability tests with them, I was able to notice how their path was somewhat tumultuous — too much text, not clear call for action buttons, some improvements necessary for the data input.
  • Testing: as I proposed a new design, I would like to be able to test the new sign up to see how new users would welcome it and if it does prevent the churn of new users.
  • Landing Page: the first impressions of a website count a lot and the landing page needs to have a redesign in terms of the message that is trying to conceive as well as the display of information across it.
  • Colours and Typography: overall, the website requires a better design in order to give a more professional and credible feeling to it.

🔑 LEARNINGS

After spending weeks taking on projects proposed by Ironhack, having embraced this real challenge proved to be a very maturing experience. For 2 weeks, everyone worked extremely hard to meet the expectations that were created on the other side — having that chip on the shoulder was healthy.

Other than that, here’s some other things that I’ve learned:

The value of interviews

The interviews proved to be way more insightful than the online questionnaire. And this alone taught me a valuable lesson — if I am tasked to redesigning a flow, process or someone else’s work, the first thing one can do is to perform immediate usability testing. During my interviews, not only could I have insightful conversation with relevant people personally, but also attend their reaction while performing the tasks I asked them to within the platform.

Innovating within a pre-defined system

Based on my previous experience as an entrepreneur and having taken on so many projects from scratch, having to innovate within a set of boundaries was a challenge to me. It took me some time to adapt and accept that a lot of work before had already been done — and for a reason — and that there were things which were not covered by the project.

The Design Thinking Process isn’t Linear

Still related with the previous points — for so many weeks, I was used to follow a process anda flow in my design work that I thought that applying the same steps in this projects would lead me to results. And that wasn’t true, as there were several tools I tried to apply in this project that, honestly, didn’t add me much more knowledge to what I already knew. This project taught me that, to become more focused on what I already knew and where I want to go and, based on that information, define a tailored path to reach the results that I need.

All in all, a wonderful experience having worked with NomadX. The journey at Ironhack was an intense one, which has now opened me so many doors. A thank you to the whole academic team — Hugo Rocha, Daniela S. Ferreira and Catia Peres — as well as to my colleagues at Ironhack.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rafael Martins

I’m a UX/UI Designer with 2+ years of experience in design thinking practices by conceptualising and crafting innovative services