Case study: Roamradar
An end-to-end mobile-first website
What is Roamradar?
Roamradar is a mobile site that provides users the opportunity to search and discover activities that fit their lifestyle, whether that be one of adventure, relaxation, or play. When moving or vacationing somewhere new, it’s always comforting knowing there are activities nearby that will make you feel at home.
Role: Researcher, UX/UI Designer
Methods: UX Research, Wireframing, Usability Testing, and Iteration
Timeline: February 2024 - May 2024
Empathize
User Research
Seeking to gain a better understanding of potential users for this product and what variables impact their decision to choose a place based on their lifestyles versus other criteria, I wanted to get a better sense of empathy in what makes for a positive location-searching and moving experience. Working through user interviews via phone call and in-person communications, I discovered a handful of insights. These were the main takeaways:
What motivates someone to move somewhere new? Why?
A change of lifestyle was the motivation because people want to be near their favorite activities and geographical interests they may have. For example, one of my interviewees moves every few months to be surrounded by new scenery, but also to have access to her favorite activity with nearby friends. Among a change of lifestyle was also career changes, children, and “something new.”
What common criteria do people use to decide where to move, and how does it play a role in that process? Why?
Cost of living was the most common answer to this question. Many people responded by saying things like “even if a place is perfect in every way, you won’t be able to make it work if it’s unaffordable. Among cost of living was also lifestyle, work, and commute.
How does narrowing criteria impact stress during the research-to-move process? Why?
Narrowing criteria helps to create fewer options, which in turn helps the user because the results are more specific to what they are looking for.
Additional insights…
Outdoorsy folks tend to find it critical to have a stable income or a consistent source of work, a sustainable cost of living, agreeable weather and climate. For example, one of my interviewees recently moved to Denver and her car didn’t have snow tires! She totally misinterpreted the level of winter she was getting herself into before she moved. Some form of community, and nearby lifestyle-supporting activities are also critical. If they have a dog, dog-friendly accommodations are a must.
Those who are “forced” to move are almost always required to do so for work, but they share the needs of discretionary moves regarding cost of living, safety, and the hope of making new friends or having a community because regardless of whether or not you want to move, wherever you’re going you’ll need to afford it, feel a sense of safety, and hopefully have the potential to make new friends (in our outside of work).
Research Synthesis
Insight: People moving to new areas often have difficulty finding information about nearby hiking trails or campsites, which are important for their lifestyle.
POV: As a newcomer to an area, I need an easy way to discover local hiking trails and campsites so that I can quickly start exploring and integrating outdoor activities into my new routine.
HMW: How might we design a platform that makes it easier for newcomers to find outdoor resources and activities in their area?
Define
Who are we designing for?
In compiling my research findings, I was able to narrow down who my users are, their motivations, needs, and pain points.
Welcome, Natalie and John.
Meet Natalie
The Outdoor Enthusiast
After living in Texas with her dog Nola for a few years, 29-yr-old Natalie is looking someplace new to live with good data coverage so she can work her remote job without an issue, easy access to hiking trails, and dog-friendly accommodations.
Motivations: remote job = opportunity to work from anywhere
Needs: easy access to hiking trails & dog-friendly accommodations
Pain-points: cost of living must be affordable, remote job ≠ time to pursue outdoor interests
Meet John
The Retired Beach-goer
62-yr-old John has been living and working in Manhattan, New York for too long. Now that he is retired, he’s no longer tied to the big city lifestyle. John wants to find his beachside forever home in a warm location.
Motivations: retired = no longer tied to one place, the city is too loud
Needs: nearby beaches & within a 3-hour flight distance of family
Pain-points: making new friends in a new place can be daunting, needs glasses to read small text
IDEATE
User Flows
Considering how Natalie might want to create an account to be able to save her searches and come back to them later, and John might want to explore different relaxation-related activities in a beachside town, these flows came to mind: onboarding and browsing & selecting an activity.
Low fidelity Wireframes
These were some of the first iterations of the screens Natalie and John might use when interacting with Roamradar: onboarding, discovery, and activity selection.
UI Component Library
When contemplating what colors would match the vibe for Roamradar’s purpose (to give users an opportunity to discover new activities nearby potential moving locations), I chose green as my primary with red and purple as secondary colors because green gives off an adventurous feeling, whereas purple is relaxing, and red is often found as the color of pins on a map, which seemed fitting for the project.
I chose Epilogue as my font after some brainstorming because although still simple, it has an adventurous edge to it (and easy to read, so John won’t need his glasses!), which is exactly what I was looking for.
PROTOTYPE
Lo-Fi Wireframes + Finished Component Library = Hi-Fi Prototype
High Fidelity Prototype
TEST
Usability Testing
Objectives
Determine if the workflow provides a satisfying and smooth experience
Evaluate the ease and efficiency of task completion
Identify any usability issues and and/or pain points
Gather feedback on the application as a whole, if it accomplishes its intended use
Questions
Per Task
Q1: How easy or difficult did you find this task? Why?
Q2: Did anything seem overly complicated or confusing?
Q3: Do you have any questions regarding this task?
After Testing
How does Roamradar compare to other wayfinding websites and apps? Think AllTrails, AirBnB, or TripAdvisor.
Do you have any suggestions for improving the onboarding or activity-searching process?
Do you have any questions for me?
Revisions
1. Decrease the size of the “Browse by” filters
The Browse By filters help users to separate the results of their activity search by adventure-related, relaxation-related, and playtime-related activities.
This edit was top priority, as all of my users mentioned these were too big. It was taking up too much real estate in the previous iteration, making for a not-so-exciting home page, which could cause users to go to a different site if they don’t see what they came for right away.
Before
AFTER
2. Decrease the range of colors on-screen at any one time
The colors on-screen are representative of the adventurous users that utilize Roamradar.
This edit was second priority. As mentioned by a few of my users, there were too many different colors going on at once, and the logo’s pop of red didn’t match anywhere else on the site. I lessened the range of colors at any one time to accommodate this, as well as changed the logo’s red to green, so as to match the rest of the site more naturally, as well as unify the site and make it easier to digest.
Before
AFTER
3. Make the “Next” button look less unavailable
The preference selection page comes up for users as they sign up for an account with Roamradar. Once they do, the product will suggest personalized search and discovery results catered to the interests of the user.
This edit was third priority because almost all of my users mentioned that the Next button on the preference selection page originally looked grayed out or unavailable. To fix this issue, I changed the color of the preference buttons, so they wouldn’t overpower the Next button, and to ensure the Next button doesn’t appear unavailable anymore.
Before
AFTER
4. Shorten the Roamradar description & re-organize
The non-logged in home screen features a description of Roamradar and suggestions based on the location of the user. They have the option to browse using different filters, or see where the most popular destinations are for different kinds of activities.
Same as the Browse by filters, the description and organization of the home page were taking up too much space on the screen, which could cause users to find something else to look at. I reorganized to help with this, too.
Before
AFTER
5. left-align the footer text & organize the subcategories
The footer plays an important role on a website as a source of information, usually for navigation and extra bits & pieces that may not be found elsewhere. Within Roamradar’s footer, users like Natalie and John can explore activities based on their lifestyle preferences, edit settings in their account, revisit saved activities, and more.
A few of my users noticed the footer text was all over the place, so to make it easier to read and more clear to understand, I left-aligned and bolded the overarching categories and made the subcategories smaller. A lack of organization within the site could cause users not to trust the product, so with new reorganization, users can trust Roamradar.
Before
AFTER
6. change the “save” button to a heart
Vital to Roamradar’s purpose (to assist users in finding lifestyle-related activities in unknown locations), the save button gives users the option to save an activity for later and come back to it in a few days, weeks, even years.
The save button was not as intuitive as I had originally thought, so after asking some questions of my users and what they would think would be a better alternative, I opted for a heart. This will impact the future of the product because users will more easily notice the icon and optimize their use of creating a profile/account.
Before
AFTER
7. Decrease the size of the “Get directions” button
Finding further details about a certain activity, like length of time it might take, phone numbers, whether or not booking is needed, etc., can be vital when deciding to engage in an activity or save it for later.
After being given feedback about the activity details page needing more specific information, like phone numbers, etc., I decreased the size of the Get Directions button to make more space. In creating more room for additional information, users will stay on Roamradar for longer periods, since they no longer need to go elsewhere to find the extra information they may be looking for.
Before
AFTER
The Final Solution
Roamradar: an end-to-end mobile-first website
Features
Search
Browse by (adventure, relaxation, playtime) filters
Non-logged in home screen access
Personalized activity suggestions based on preference selection
Map view
Activity details & reviews
Save & return to saved activities
Next Steps
Within my end-to-end mobile first website, Roamradar, users like Natalie and John can confidently find potential lifestyle-related activities in places they may considering living.
Whether Natalie is looking for nearby trails or John is looking for beaches, they can use the app to search for, filter, or scroll on a map to discover what best suits their needs.
Since the conclusion of this project, from discovery of the issue at hand, defining the problem, developing and delivering a solution, and launching and iterating on the final prototype, next steps include handoff to developers, where the designs may be implemented and launched to real-life users!