Spin for Adventure
TRAVEL APP
Creative | UX Designer | UI Designer | UX Research
As part of a UX Design course at BrainStation in Miami, I designed a mobile app focused on simplifying the travel planning process for adventure seekers.
Instructors:
Ashley Newsome | Lead Instructor
Kimberly Tupy | Instructor
Problem
The current state of planning travel is hard and quite not satisfactory.
The information is scattered, making it difficult to make a quick decision to select where to travel.
The goal on this app is to propose a new approach on how to discover where to go.
HMW design of an app, where potential travelers could find inspiration and help to plan a trip? The goal is to show results based on what interests drives people to travel in the first place.
Project Details
The app enables users to discover randomly destinations, create personalized itineraries, and receive tailored recommendations for accommodations and activities. Through in-depth user research, persona development, and an iterative testing phase, I ensured the app’s design remained intuitive, visually engaging, and user-centered. My goal was to deliver a seamless experience that guided travelers from initial inspiration to booking and on-the-go navigation.
The solution is inspired on the “spinning wheel” game concept. The app shows capability to introduce and explore elements of gamification* during design. SPIN is the call to action to show the next random result.
*Gamification, which is defined as the use of game thinking and game mechanics in non-game contexts to engage users.
Design Process
1. User Research
I have the opportunity to interview 4 different persons, different ages as well. Most of my questions were intended in find out common behaviors.
-
What is your name?
Age
What is your occupation?
Where do you live?
How often do you travel? Why?
Is this an activity that you prefer to do on your own or in a group?
Mention the possible motivations to travel?
Can you describe those interests?
What kind of places do you prefer to visit? Why?
How long takes you to plan?
What’s your preferred way to do a search when planning? Why?
Describe your planning process using an app to plan a trip?
When interacting with the app, how long do you typically interact with it?
Mention the top 5 -10 specific information that you are interested during a search?
During the search, what will be your expectations? Why?
-
I learned how each person evaluates their way of planning a trip and how they evaluate their needs.
The final decision is based on the info found.
There is no need to travel far to find new experiences. Local places are a good source for new experiences.
Traveling is a method of personal enrichment.
Google is the tool per excellence for searching and link related content.
Other applications that provide helpful information are well known, like Expedia, Trip-Advisor, Priceline, Booking.com, All Trails app. here
“Planning a trip can be quick and fun.”
2. Personas, Use cases & Journey Maps
This section outlines the persona's demographics, motivations, challenges, and user goals, giving context to the design process and showcasing how the project is tailored to solve specific user problems.
Information Arquitecture
The original requirement was to recreate a Minimum Viable Product (MVP) in the early stages of the app, focusing on developing at least two use cases that demonstrate the logical arrangement of pages, features, and interactions.
User flow
User will launch the app. Can navigate as a guest, can create an account or skip. Some A contextual tour is provided as well. When finished the onboarding process, user must select the location and the interests. With these two actions completed, the app is ready to provide multiple results.
Use case 01:
The user launches the app and chooses to create an account. The app automatically requests permission to capture their location, which the user agrees to. The user then proceeds to complete the required entry fields.
Use case 02:
The user arrives at the location page, where they select the "LOCAL" option and set the radius to "25 miles." After clicking "Select," they proceed to the "INTEREST" page, where they choose three labels: Wildlife, National Park, and Family-Friendly. The system is then ready to provide a random result based on their selections.
3. Wireframing & Prototyping
Here are some sketches illustrating the initial design concepts and interactive elements of the app. These helped to shape the low-fidelity wireframes, laying the foundation for the path to the final result.
Sketches
Ideation and exploration of different concepts.
Low fidelity wireframe
High Fidelity Wireframe __Use case 01:
The user launches the app and chooses to create an account. The app automatically requests permission to capture their location, which the user agrees to. The user then proceeds to complete the required entry fields.
High Fidelity wireframe__Use case 02:
The user lands on the “LOCATION” page, selects the "LOCAL" option, and sets the radius to "25 miles." After clicking "Select," they are directed to the "INTEREST" page, where they choose three categories: Wildlife, National Park, and Family-Friendly. Based on these selections, the system generates a random result tailored to their preferences.
4. Design System & UI Design
This section delves into the key design elements, including color schemes, typography, iconography and interaction patterns, all of which were tailored to enhance the user’s journey and meet business objectives.
5. Usability testing
By conducting iterative usability tests with a group of friends and three of the interviewers, we identified pain points, validated design assumptions, and refined user interactions. This section explores the testing results, including participant selection, test scenarios, and key findings, which ultimately led to valuable improvements that enhanced the product’s overall usability and user satisfaction. I would also like to add the valuable feedback directly from the BrainStation instructors.
Design iteration
A) LOCATION SECTION LAYOUT
Option 1
On the initial version the header included four areas where the user could explore.
Location.
Interests.
Traveler.
Favorites.
Option 2
Testing results showed that users prefers to be focused on the search and results as the main interaction. The solution proposed was to move the others non relevant areas to a Menu located in the header. The size of some elements where enhanced as well like font, radio button size and CTAs.
B) ACCOUNT CRAETION NOTIFICATION
Option 1
Initially only one message was showed to the user when finished the account creation.
Option 2
Based on feedback “ It would be nice to have an onboarding screen...to understand what does this app, why is useful for me as a user and how it works.” , multiple additions were made at this level:
Enhanced verbiage focused on the user.
Creation of educational content for a better app introduction.
Enhanced UI.
C) INTEREST SECTION LAYOUT
Option 1
While the Interests section was fairly well received, we noticed that the initial design required adjustments in the blocks area.
Option 2
According to the comments made on the topic, “rounded corners will be more pleasing to the eye, as it is easier to identify the shape boundary.” Some changes were made to these blocks, such as color, alignment, label position, and spacing between blocks. This significantly improved the readability of the section.
In addition, the label on the button was replaced from “Search” to “Spin”. The decision was to bring as soon as possible the result to the user. In overall during the experience most of the hyperlinks are now located under the primary CTA.
6. Final Design & Results
After multiple design iterations, the MVP version of the app was brought to life, showcasing how insights and refinements shaped a cohesive, user-friendly product. The design was presented in class and received positive feedback.
Results
Successfully completed multiple design stages, including user research, wireframing, prototyping, and UI design.
Designed an interactive prototype, focusing on two key use cases to test user flow and interface effectiveness.
Presented the final design to the class, incorporating feedback and iterating on key elements.
Successfully completed the UX Design course, gaining hands-on experience and refining design skills.
Learning Outcomes
1. Describe what you learned throughout this process.
Applying the Design Thinking methodology helped optimize the project timeline.
The sketching and wireframing process was essential in defining potential deliverables.
2. Describe how you would progress your idea, given the resources.
The app could be improved by analyzing the metadata collected during user interactions.
Incorporating gamification elements can enhance visual appeal and create opportunities for other valuable interactions.
7. Celebration
After presentation there was a chance to celebrate and share with other classmates and the instructors. I would thank you again for the effort during sessions.