Adopt A Backpacker — Travel
An interactive "Home away from Home" community for backpackers, travellers and hosts
Overview
Adopt a Backpacker was founded during the COVID-19 pandemic to help stranded backpackers, travellers and international students connect with host families for free accommodation. The interactive ‘Home away from Home’ platform grew from a handful of people to a community of 30,000 that expanded to local hosts offering spare bedrooms, and backyards in exchange for employment like farmwork and au pair jobs.
Client
Adopt a backpacker
Period
2021
Geography
Australia, Canada, New Zealand
Work Done
Services
-
It started with a random phone call from the Adopt a Backpacker team to find a Laravel developer. The platform’s demand was increasing, and the Facebook group and WordPress landing page setup the AAB Team had to register interest from backpackers all over the world was proving to have reached its limit.
Founders Miguel and Nikki came to us with their design prototypes that helped us analyse the platform’s flow and site information to build the platform structure.But First, a Rebranding
Before we could even begin our development of the platform, we knew that a total rebranding was necessary, which the Adopt a Backpacker team reluctantly agreed to since they already had the full set of designs. We eased the team to our suggestions, starting from the logo. The result was awesome and they loved it!
Before:
After:
Aligning the visual language
The problem with the existing design was mainly the design language that did not well-cater to the platform’s target audience – an adventurous bunch! A more modern interface was better suited vs a traditional one. This was achieved with changing the fonts – finding one with a more reflective personality and selecting a body text with a better x-height for readability. We also streamlined visual elements such as the typography and iconography, and stripped down the original design to give it breathing space so the pages did not feel so cluttered.
Before:
After:
The brands’ colours were also changed from orange and teal to deep blue and lime green. The existing colour combinations had poor contrast of less than the standard 4.05:1. There wasn’t enough colour differentiation in status buttons, so user’s would have to find tasks with precision, causing frustration. The new colours had better contrast and were selected to be more reflective of the earth and its elements such as the sea, sky and fields- elements that most of the backpackers and travellers using the platform sought after.
Building the Information Architecture for a Better User Experience
To fix navigational problems, we seperated the website into two parts:
- Informative pages
- About Us
- How It Works
- Safety
- FAQ
- Terms and Conditions
- Contact Us
- Interactive pages
- Login/Signup/Onboarding
- Map/List view of Profiles
- Profile Details
- Interactive Community Wall
- Stories
- Membership and User Profile
Information about the platform, the community, what it offers and how it works, needed to be easier accessed and understood by the user. Hence, we listed down all of the pages on the website that users generally look for before they start using the platform, and classified the Interactive pages in the category of the user journey. We redefined the way users register and verify their accounts, from the subscription process to how they search for backpackers/hosts on the platform. We had many more ideas and features to suggest but for first version, but we kept it simple, releasing only the MVP.
We split up content for pages only relevant to the specific use case, i.e host or backpacker. Content heavy pages such as the safety screen, were made to be more appealing by changing the information structure and text leading.
A Responsive Design and Progressive Web App
We followed mobile-first as the design methodology where every screen was designed first on mobile devices since surveys show that over 70% of people use websites on mobile devices. Following this, all screens were adapted for computers and tablets/iPads for a seamless experience no matter the device. We also strategized the website as a progressive web app (instead of a regular website) which enabled the platform to:
- run faster than a normal website
- save data in offline mode
- save the website with as an icon for frequent use
- have real-time notifications in the browser
Mapview of Backpackers and Hosts
Deciding on the number of users to be displayed is more calculated than it appears. If all the app’s users are shown, the interface looks cluttered. If only a few users are shown, it appears like the platform doesn’t have enough users. To strike the balance between user experience and user content for AAB, we showed 100 location-based users on the map as the default view. Filters were also made available to cater to location-switching or to filter the type of users.
Real-time Community Wall
The community wall functions like a Facebook feed. It gives flexibility for users to post their jobs, request for adoption, community tips, and everything in between. Each type of post works slightly differently and everything happens in real-time with engagement tools like comments, user tagging, likes and shares of posts. The speed and user experience were one of Hipster’s priorities while implementing the features.
A Global Platform – languages, payments
A global platform doesn’t just differ in languages, it also differs in behaviours and other localizations – in example, how locals prefer to pay for services. We initially integrated payment gateways using credit card and debit card subscriptions, but soon some users from Europe gave feedback that Paypal happened to be their first choice of payment. Our team quickly adapted the suggestion to add Paypal as an optional method of payment. We also kept the system open for more future payment integrations. Adopt a Backpacker also currently offers 5 language capabilities that can be extended.
Making community real and meaningful
Avoiding fake people and NSFW content was one of our key targets. To achieve this, we did an ID verification and also planned for government API integrations to verify the real person behind the screen. We further used Artificial intelligence to avoid any content or pictures that do not follow the platform’s standard guidelines.
- Informative pages
