Starstuff logo

Ultra-personalized travel

Roamr prepares travelers for their journey ahead by helping them find curated experiences and like-minded travelers along the way.

Starstuff header image Starstuff header image mobile

Summary

Why Roamr?

Traveling shouldn’t impede the ability for you to be the fullest expression of yourself. Whether it's finding experiences that suit your personality or meeting the type of people that broaden your perspectives, travel should serve as a gateway to charting your own personal journey.

With the number of solo travelers skyrocketing, travelers are asking themselves how they can find less frequented places and more diverse cultural experiences. Roamr is a mobile application that changes the way people experience travel by customizing their travel experiences and the people they meet along the way.

design role icon

Design Role

  • UX Design
  • Visual Design
  • Branding
design deliverable icon

Design Deliverables

  • Competitive Analysis
  • User Survey
  • User Personas
  • User Stories & Flows
  • Wireframes
  • Wireframe Prototype
  • Brand Style Guide
  • Usability Testing
  • Hi-Fi Mockups
  • Final Hi-Fi Prototype
tools icon

Design Tools

  • Principle
  • Figma
  • Sketch
  • Draw.io
  • Photoshop
  • Invision
  • Marvel
  • Maze
  • UsabilityHub
abstract flower

CHAPTER 1 | OVERVIEW AT A GLANCE

The challenge

Defining the problems

All traveler types headed to new destinations are frequently faced with the following two questions:

  • Will they find people along the way that they can travel and connect with?
  • Which experiences and activities are worth their fragile time?


While travelers can easily meet people through random occurences, hostels, and group tours, they are often not the best match in terms of their ideal travel buddy. My research shows that travelers want to embark on experiences off-the-beaten path and meet like-minded travelers that directly align with their interests. With more people using dating apps to meet travelers abroad, users have clearly shown that there's a market need for a more targeted and curated travel experience.

chapter 1 header image chapter 1 header image for mobile
solution screens solution screen mobile

The solution

Smart travel suggestions for a curated user experience

Today, there is no question that travel must be modernized for a mobile experience and a social world. Roamr uses machine learning to find curated experiences and like-minded travelers that suit the user’s personality, motivations, and travel style with just a few simple swipes. It weaves high user personalization, a smooth user experience, and diverse trip planning and research methods to empower users to find adventure no matter who or where they are.

abstract flower

CHAPTER 2 | DISCOVERY PHASE

User survey

Getting to know the users

To understand my target audience and identify the problem focus, I created a user survey to understand what motivated and frustrated users with regards to the different phases of the travel experience. Here are the questions I needed to answer:

  • How passionate were they about traveling;
  • What were their main travel concerns;
  • Did they travel with friends, family or solo;
  • What would they like to know about travelers before meeting them;
  • How often do they travel and for how long;
  • How did they typically find experiences and places to visit;
  • How do they meet other travelers while exploring new places;
  • What apps (if any) did they use to meet other travelers;


The survey questions were completed by 38 respondents.

VIEW USER SURVEY

User survey

Testing my assumptions

Before analyzing the survey results, I anticipated that this project would focus on the “social” aspect of a travel mobile app. I thought users would be interested in matching with like-minded travelers “Tinder-style” either for a romantic affiliation or friendship. Travelers could then follow each other to view their social travel posts, maintain friendships, and get notified if they were in the same city. To see if my assumptions were correct, I sent out a selective user survey to frequent travelers.

User Research Findings

Travel concerns & behaviors

first part of chart mobile
75% of respondents’ key concerns when traveling alone are safety & smart trip planning
second part of chart mobile
Respondents listed Google, TripAdvisor, Yelp, and Pinterest as the top trip planning resources with 95% making at least a basic itinerary before traveling.
third part of chart mobile
90% wanted to meet travelers strictly for friendships, 65% preferred meeting with 2-3 travelers at once, and 50% chose to meet both single & couple travelers.

Travel motivations & frustrations

93%

of travelers preferred meeting people by joining their plans rather than "matching" with them dating-app style

75%

of couple travelers found it difficult to meet people abroad and 66% were open to using an app to meet travelers

72%

of solo travelers would use an app to meet people abroad with 60% already having used one to meet people digitally

Travel features & demographics

90%

of respondents chose receiving curated experiences & finding like-minded travelers as the top travel features

85%

were open to using new technology and research methods like AR and visual search to find experiences away from tourist traps

82%

were between the ages of 21 and 34 with 55% female, 28% male, and 17% non-binary gender

Joining plans over 'matching'
My user research showed that respondents were underwhelmed about matching with travelers by swiping left or right simply because that process felt impersonal and too focused on the dating scene — which is not what travelers were looking for. They were more interested in inviting people to join their plans because it generated a natural opportunity for the traveler to reach out to the user if they had common interests.

User interviews

Confirming user research by talking to users

A key insight unearthed from interviewing long-term solo travelers showed that these users were tired of joining pre-established tours because they did not get a unique travel experience catered to their needs. Many travelers joined these tours bandwagon-style because it required no planning and led to meeting new people, but they felt that they were too generic and apathetic.

chart showing top features mobile chart showing top features

Problem insights

Pinpointing user frustrations

To recap, here were the most prevalent frustrations that continued to resurface when it came to exploring new places:

  • Travelers are used to finding activities that fit their needs rather than having them pushed to them
  • They don’t want to use dating apps or "match" with travelers to find friendships abroad
  • They want curated experiences that they can plan on their own rather than joining "pre-packaged" group tours
  • It was often difficult to meet like-minded travelers because most friendships are made purely by chance
Types of user frustrations graphic

An app for personalized experiences & plans
It was clear that my pre-made user assumptions were wrong. Instead of focusing on creating an app that matched like-minded travelers, I decided to deviate from this idea to focus on pushing personalized experiences and plans to users based on their interests and then allowing users to invite travelers to explore these adventures with them together.

Target audience

Who are the users?

While women held the majority of my target audience, I found that solo travelers, couple travelers, and all gender types also found value in this app. This leading theme of designing for inclusivity is what made me switch gears to create a travel app for all types of frequent travelers within the ages of 21 and 34, who loved embarking on new adventures away from the tourist traps.

types of users

Competitive analysis

Where does Roamr sit in the marketplace?

With user customization being key, I had to ask myself – what was the competition doing to customize experiences to their users?

While Travello does a good job of collecting user's travel interests in the onboarding process, it doesn't continue tailoring its services to the user after the fact. Similarly, Couchsurfing’s “Hangouts” feature doesn’t give users the ability to filter the types of hangouts they’d like to join.

What if users could search for top-rated experiences using new research methods with just a few simple swipes? What if they loved a new adventure sport and wanted to visually search for similar experiences to it in different parts of the world? By incorporating new trip planning and research methods, users could broaden their exposure to new experiences that they otherwise might have missed out on.

Roamr competitor images Roamr competitor images horizontal
VIEW COMPETITIVE ANALYSIS

User personas

Bringing the users to life

To embody the full range of Roamr's audience, I created Rory, Raya and Liz, and Joaquin. By giving real-life stories, faces, and names to these personas, I could later ask myself — what would Raya and Liz think of this design decision? How would this addition serve Joaquin's and Rory's needs? I knew that asking these questions throughout the design process was key to reaching the MVP.

first persona image

Rory

Solo Offbeat Adventurer, 26

"

Solo travel is a fast track to personal growth, but you have to be smart about it."

Motivations –

  • Meeting with female solo travelers to travel safely in groups and make friendships
  • Relying on offbeat adventure blogs to avoid tourist traps

Frustrations –

  • Too much time spent researching adventures based on her budget and travel style
  • Finding apps or websites that find experiences based on her needs
second persona image

Joaquin

Solo Budget Traveler, 28

"

For me, travel is more about the stories you hear than the places you see."

Motivations –

  • Keeping costs low by joining budget-friendly group tours
  • Photographing and listening to interesting travelers' stories

Frustrations –

  • Making friends with hostel goers who prefer to party
  • Missing out on new experiences by "following the group"
third persona image

Raya & Liz

Foodie Couple, 27 & 29

"

For us, travel is a gentle reminder to always love and be yourself."

Motivations –

  • Trying spicy food in different cities the local way
  • Being a part of an LGBTQ and digital nomad traveler community

Frustrations –

  • Using dating or "matching-based" apps like BumbleBFF in different cities to find like-minded travelers
  • Using word of mouth to find local food spots
VIEW USER PERSONAS
abstract flower

CHAPTER 3 | INFORMATION ARCHITECTURE

User stories & user flows

Mapping the MVP by defining user goals

To begin mapping the MVP based on user goals, I created a list of the highest to medium priority user stories and then converted them into detailed user flows as shown below.

1. As a returning user, I want to filter experiences based on my budget and travel style so that I can plan my trip within my constraints and preferences.

publish a file user flow

2. As a new user, I want to save my curated experiences so I can view them later when I’m in that city.

share an item with another person user flow

3. As a returning user, I want to filter traveler plans so I can select a plan activity that interests me.

filter plans flow

4. As a new user, I want to review the plan details before joining a plan and chatting with the plan owner so I can discuss further details.

filter plans flow

Wireframe ideation

Beginning with pen and paper


Using my sitemap, user stories, and user flows, I could move onto building the skeletal structure of the site starting with simple wireframe sketches and then moving onto high-fidelity wireframes as shown below.

hand-drawn wireframe sketches

Low-fidelity wireframes

Building a foundation focused on customization

To lay on easy customization and a smooth user experience, I focused on creating a seamless filtering experience embedded throughout the entire product. I did this by mapping a process from which users could isolate their preferences by clicking a filter tab and inputting their information within a filter menu page that slides out from the left. While this is an unconventional approach to applying filters, I chose to use this method because it's a simple way of navigating, with the ability to return to the dashboard using a quick tap of the thumb.

wireframe screen wireframe group mobile

Low-fidelity wireframe prototype

Testing the foundation before moving forward

I conducted in-person usability tests using a clickable prototype made in Marvel to understand users' opinions and behaviors with regards to the following:

  • Completing the chatbot onboarding process
  • Understanding the purpose of the earth spectacles and visual search features
  • Navigating through the "unconventional" filter process without getting stuck
VIEW LOW-FIDELITY PROTOTYPE

Optimizing the onboarding
Insights unearthed from testing the wireframe prototype showed that the onboarding process was too long, users were unfamiliar with the activity feed buttons upon entering the dashboard, and the Earth spectacles feature's purpose was unclear.

Iterations based on testing

Refining for a shallow learning curve

After observing users struggle through some major areas within my prototype, I realized that the following iterations were necessary to significantly reduce the margin for error.

1

Reducing churn by streamlining the onboarding

Ok so, I’ll admit I wanted to onboard users using a chatbot because I thought it'd be a fun and conversational way of introducing users to the app. But after getting user feedback stating that the process was too long, I realized that I’d made a mistake by placing my motivations before theirs.

I’d designed 20 screens specifically for this chatbot onboarding. But did it take too long for them to complete? Yes. Was the delight of having a conversational chatbot more important than the users time? No. So I redesigned the onboarding process for efficiency, which saved two minutes of the user’s time.

V1
V2
2

The evolution of the interests personalization picker

To suggest the right types of experiences and people to meet, Roamr needs to understand what users enjoy doing while traveling. Instead of selecting from a rigid list of interests, I wanted the app to respond to the user’s choices using machine learning. If users chose “adventure sports” as an interest, they could then find narrower topics like “paragliding” or “sky diving" populate underneath it. Once I’d established a flow that worked, I decided to place them into categories so users could easily scroll to the right section and drill into the “Show more” tab to find tailored interests.

V1
image of first version of picker
V2
image of second version of picker
V3
image of third version of picker
3

Improving the earth spectacles feature's ease of use

My hunch that the earth spectacles feature would come across as obscure was indeed, correct. This feature assists with trip planning by enabling users to view an experience location and its top-voted reviews in their current physical form. By selecting an experience, viewing it from different angles, and reading its top-voted reviews, users can identify whether this experience will likely be worth their time. To clear confusion and improve its ease of use, I included nudge-focused tooltips showing users how they can utilize this feature using quick swipe gestures.

image displaying tooltips showing how to use the earth spec feature image displaying tooltip showing how to use the earth spec feature screen 2 screen showing tooltip earth spec features three
4

Optimizing the date selection process

In ideating methods to streamline the date selection process, I decided to completely eliminate the date picker scroller and calendar within the “Make a Plan” flow. Because most users wanted to make a plan to meet with traveler(s) within the next few days, I chose to display “quick day” tags that showed days like “tomorrow” or “Tuesday” rather than specific dates. If the user wanted to make a plan a month ahead of time or within a particular date range, they could do so by selecting the “specific date” or “date range” sections.

V1
image of first version of picker
V2
image of second version of picker
abstract flower

CHAPTER 4 | BRANDING

image of landing page branding image of landing page branding image of landing page branding

Conceptual ideation

A brand with an inclusive theme

Roamr serves as a friendly travel enabler, empowering travelers of all types to be themselves while on the road in order to make authentic memories that last a lifetime. So communicating and evoking emotions of inclusivity, comraderie, adventure, and trust were of utmost importance in the development of the brand.

quote image

To Roam implies a wandering or traveling over a large area, especially as prompted by restlessness or a driving curiosity to understand…”

moodboard collage

Logo design

A logo that spurs a desire for movement

After conducting word association exercises to establish the brand name, I came up with three options: Roamr, Veer, and Wayfinder. In the end I went with Roamr because it describes the user's frame of mind – a traveler's mantra if you will – for those who are in constant need of movement, adventure, and growth.

logo design image
mobile logo ideation 2 mobile logo ideation 1

Roamr’s primary logo uses simple map icons to chart the transformative journey travelers undergo, both in distance and in personal growth, when going from their current location to end destination.

logo design image

Color palette

Getting users excited about the journey ahead

I chose to use contrasted blue tones and pastel blue tints harmoniously to transmit soothing and energetic sensations reminiscent of the sea and sky. It also conveys a trustworthy brand image especially amidst travelers who haven’t met yet.

color palette

Typography

Clean typefaces to go with the brand

Apercu and Glacial Indifference were selected as the primary typefaces because Apercu’s grotesque sans-serif typeface displays subtle quirks that complement Glacial Indifference’s orderly geometric sans-serif typeface.

typeface usage
style guide first image style guide second image style guide third image style guide fourth image
VIEW THE STYLE GUIDE
abstract flower

CHAPTER 5 | VISUAL DESIGN & TESTING

High-fidelity prototype

Weaving the branding into the wireframes

Now that I had the tools to create the high-fidelity mockups, I went straight to work — weaving the branding carefully into the wireframes to create the high-fidelity prototype.

A/B testing the filter

Don't reinvent the wheel

Because Roamr prioritizes customization and a seamless user experience, I knew the filtering process had to be brilliantly executed. While I was absolutely fond of my original filtering idea of selecting the filter tab located on the right-hand side and seeing the menu slide out to the left, I knew that testing would be critical to ensure a positive outcome.

Filtering Process A/B Test

Screen B

Bottom Filter Tab

preference screens of Starstuff

19%

preferred the bottom filter tab with a "slide left" transition

Screen A

Embedded Filter Icon

preference screens of Starstuff

67%

preferred the embedded filter with a familiar "slide up" transition

Screen C

Top Filter Tab

preference screens of Starstuff

14%

preferred the top filter tab with a "slide left" transition

Screen A won with flying colors.
User feedback showed that testers thought Screen B and C's filter were being globally applied to the entire application, while Screen A’s filter felt more local and purposeful for the “Discover Plans” page. Needless to say, I had to let go of my beloved slide left filtering transition process.

User testing

Testing prototype usability

To understand if users could maneuver through my prototype, I conducted four usability tests to see if users could conduct the following high priority tasks:

  • Navigate through the onboarding process
  • Filter their experiences and plans
  • View experiences using the earth spectacles and visual search features
VIEW THE CLICKABLE PROTOTYPE

Refining educational components
Key insights revealed from usability testing showed that users were still unfamiliar with some of the icons and functionality displayed within the experience and discover plan summary pages.

Iterations informed from usability testing

Finessing flows for ease of use

The following changes were made in efforts to significantly improve Roamr’s usability.

1

Editing the experience results page

Results from A/B testing the experience results page informed the need to design a new page.

A/B testing the experience page

Let the users decide

In this preference test I wanted to see which hierarchical display of information was most preferred by my users. Users have the option of selecting an experience type category at the top of the page which shows them results based on that category.

Information Hierarchy A/B Test

Screen A

Condensed Image Categories

preference screens of Starstuff

33%

preferred to see the experience type category as images with results displayed in small image grid view

Screen B

Expanded Image Categories

preference screens of Starstuff

44%

preferred to view the experience type category as images with results displayed in list view as expanded images

Screen C

Condensed Tag Categories

preference screens of Starstuff

6%

chose to see the categories as tags with results displayed as smaller images in grid view

Screen D

Expanded Tag Categories

preference screens of Starstuff

17%

chose to view categories as tags with results shown as expanded images in list view

Neither design was a clear winner.
So I made a new one. Users preferred Screen B because they liked viewing large images with the average experience rating (claps) displayed. Those who liked the small images in grid view wanted to be able to quickly scan the list of experience results.


Using the results and feedback, I created a new design so users could toggle between list or grid view based on their preferences.

the new design born from the test results

Final design

2

Making unrecognizable elements familiar

When landing upon the experience card page, users were having a tough time figuring out where the visual search and earth spectacle features were located. To reduce this cognitive overload, I added small tooltips explaining their location and purpose.

tool tip inactive screen tool tip first screen tool tip second screen
3

Editing the "For You" rating to address incorrect ratings

The “For You” rating page was created to show the user why Roamr had given this experience its rating based on the user's interactions within the app. For example, if a user chose “snorkeling and scuba diving” as an interest of theirs and then upvoted a posted experience with a beach setting, a beach experience with great snorkeling would be rated quite highly. However, the user didn't have the ability to change the rating if Roamr had given the user an incorrect rating. To allow this functionality, I made the following three changes.

V1 for you page version 1 screen
V2 for you page version 2 screen
V3 for you page version 3 screen
1

I added a link so users could advise the app why they didn't agree with the given rating.

2

I adjusted the position of the "Is this rating correct?" link to the top of the screen for higher viewership and proximity to the given rating.

3

I removed the "Travelers describe this place as..." section to reduce clutter and included a section that prompts users to update their interests at any time.

4

Refining the user experience of joining a traveler's plan

When users decided to join a plan in the “Discover Plans” flow, they were immediately directed to the chat page so they could discuss plan logistics with the plan owner. The issue was that users didn’t know they were going to be directed to the chat section after clicking “Join Plan” which created anxiety and confusion. To fix this, I added a timestamp interaction to show that the plan was added to the user’s “My Plans” page. There, they could click on the “Start chat” button to begin their discussion with the plan owner.

V1 gif of join plan v1
V2 gif of join plan v1
5

Adjusting the UI to allow easy plan editing

Users didn't know they could edit their plan simply by tapping the highlighted text. Thus, I made the following changes to make it obvious where the user could edit their plan information.

edit plan version 1 screen edit plan version 2 screen edit plan version 3 screen
1

Users were unaware that the highlighted text was a key edit functionality.

2

I rearranged the plan information to allow space for the familiar "more" icon. Users can then tap it to make changes to this specific plan.

abstract flower

CHAPTER 6 | BRINGING IT ALL TOGETHER

The Final Product As Videos

After creating over 150 screens, three A/B tests, four usability tests, and two clickable prototypes, I'd finally reached the final MVP.

Breezy onboarding

Quick personalization before entering the app

By signing up with Facebook, Roamr learns about you without having to ask you additional questions before signing into your dashboard. If you want to skip the personalization process and jump immediately into your dashboard you can do so simply by clicking “skip for now.”

Ultra-personalization to the user

An app that learns about you

After you enter the app, Roamr doesn't just take a back seat. By rating experiences, saving experiences to your bucketlists, and upvoting experiences that you'd like to see more of, Roamr learns about your likes and dislikes, sending you only the experiences it thinks you'll love.

A seamless user experience

Search less, travel more

Apply easy filters and have experiences, travelers, or posted plans pushed to you based on your preference selections. With simple taps and swipes to input and change your preferences, you're provided with a much smoother and simpler user experience without the need for hefty forms.

Know before you go

A bird’s eye perspective of locations and top voted reviews

Plan ahead of your travels with the earth spectacles feature. It vouches experiences for you by showing you what the experience location will look like and be like based on previous traveler's reviews.

Beyond the traditional search

Search the way you want

Roamr surpasses the traditional search bar by giving you the ability to search visually for a particular activity or a location's aesthetic appearance. Whether you’re looking for places with crystal clear waters and pink sand beaches, or you’d like to upload your own photo to find the name of a dreamy place, the visual search feature is your right hand man.

A place for spontaneity and comraderie

Adventure with like-minded travelers

Traveling alone doesn't mean you're alone. With Roamr, you can meet people from all over the world and join traveler's plans based on the types of experiences you want to see.

Conclusion

Key Learnings

Stay focused on the MVP

Roamr was a passion project I’d been planning on creating ever since I’d returned from my backpacking journey around the world. Even with so many apps at my fingertips, I still felt that it was difficult to find places off the beaten path or meet people who aligned with my travel style. I learned that with passion projects, you need to tread carefully in order to avoid feature creep. While the purpose of Roamr is to be robust and offer features for different user types, being able to draw a line between the "must-haves" and "nice-haves" is critical.

User testing as a guiding light

While I had initially thought that Roamr would serve as a platform to match with other travelers and stay connected with them, I’d found that users wanted more than that. They wanted to ease the research portion of their travel process by having experiences suggested to them. While I had a targeted intention for the primary audience, app features, and overall branding at the beginning of this project, I completed it with the project headed in a completely different direction. And that’s more than ok! It means there’s a market need.

In addition to letting user research inform the product tasks and features, I also learned the importance of letting go of the design decisions that I was most attached to — like the 20-screen onboarding chatbot and the filter tab with the slide-left transition process. I learned how to keep myself in check and recognize when my own internal biases and intuitions about what users wanted were taking over. I found that if I’m unsure whether I'm biased or not, testing the specific product flow and/or feature is one of the best ways to find my answer.

flower graphic

Let's create disruptive user experiences.

With my creative problem-solving and goal-oriented mindset, we can create amazing products (and business results) together.
If you like what you see let's connect and take this offline!