Affinity diagram based on interview feedback
Travel Collaboration Mobile App
This solo project was part of a 10-week Design Ideation & Prototyping course at Brandeis University.
My Role: UX/UI, Research, Usability Testing, Presentation
Platform: Native mobile iOS app
Tools: Miro, Balsamiq, AdobeXD, Marvel
Mentor: Debra Michalides
Inspiration for this Project
Recently, I planned a trip with friends to New Orleans. We all had ideas about where to go, what to do, where to stay. We started a collaborative Google Sheet to organize all of our ideas, but it became unorganized and overwhelming. Plus a spreadsheet gave us no idea of where all these locations were on a map. I thought, "There must be a better way to organize and collaborate trip ideas with my friends." So I decided to build a solution.
Since I wanted to design a travel app that would help me and my friends, I knew I wanted to target millennials. I looked at a recent report from Expedia to provide insights into preferences of this demographic when it comes to traveling.
Traveling with Friends
A third of US adults who’d spent at least one night away from home had taken a vacation with friends — among millennials, that number was even higher, at 50%.
79% took friends advice on destinations and booked based on those recommendations.
52% consider suggestions and reviews left on review sites, blogs, and travel forums.
Utilizing Social Networks
84% are influenced to book based on user-generated content (reviews, forums, comments).
50% use social networks, friends, and family to consult their travel options.
I began the project by conducting five user interviews within the target demographic to discuss travel habits and define the design problem.
Age: 27-35 (Millenial)
Suburban, Urban, Rural
Single, Partnered without kids
Average income $75K
Tavel Habits (pre-COVID)
1-3 work tips
1-3 holiday/family tips
1 long vacation trip
1 weekend/day trip per month that is more formally planned
1-2 weekend/day trips that are not formally planned
I created an affinity diagram to analyze interview data and identify user pain points and common themes.
Trip Planning Behaviors
Collaboration among a group of travelers
Getting recommendations from travel blogs, influencers
Traveling with friends, spouse, family members
Recognizing that folks are traveling together and need ways to accommodate everyone equally
I began to brainstorm design solutions for a product that would solve the needs of my target users. I wanted to create a tool that would allow a group of travelers—such as friends going on vacation—to collaborate and share information before their trip. A digital space to add ideas like where to stay, what to do, where to eat.
I landed on designing a product that would allow users to add various locations (e.g., restaurants, hotels) to a "trip board" which could be viewed as a list or as pins on a map. The board could then be shared with a group of friends who could then "like" it, add comments, and add their own locations.
I developed a scenario to describe the stories and context behind why a specific user would encounter this website/app. I noted the steps and goals and defined the possibilities of how the user might achieve them with the product. I would use this scenario throughout my design process.
A group of college friends have decided to plan a trip to New Orleans together. They need a collaboration tool that will allow them to virtual share and save ideas for the trip such as bars, restaurants, hotels and other attractions they want to visit.
I created a storyboard to visualizing how users will interact with the product and help me to uncover which features would be important to focus on.
Create / Share board
Add destinations to board
List view / Map view
After sketching a few iterations of my product, a created a paper prototype of a mobile app I named "Travel Collab". I chose a mobile-first design because I anticipate users will want to use the app while they travel and are away from their computers.
The paper prototype allowed me to quickly test with my roommates, but I also created a digital prototype in Marvel to test with a larger audience.
Paper Prototype Testing Insights
Users wanted pre-populated boards of popular destinations
"Continue" button should be disabled until user names new board
Users needs to see validation that board was created before sharing with others
Onboarding process was too long
"Start column" vs "Add column" is too vague
Filter button was not intuitive
Low Fidelity Prototype
I turned my paper prototype into a digital low-fidelity prototype using Balsamiq. I updated my design based on feedback from the original testing.
I conducted several remote, moderated tests using the "think aloud" protocol. I tested several tasks including creating a new board and adding a location to the board.
Low Fidelity Prototype Testing Notes
"Home" icon in top left corner is too ambiguous
Give users a list of categories and also option to add new
"Tool tip" examples were confusing to users
Users want to see location price ratings, customer reviews, phone number
High Fidelity Prototype
I reiterated my design and created a high fidelity prototype in AdobeXD. I focused on creating an organized and helpful interface using design conventions consistent with iOS apps.
High Fidelity Prototype Testing Notes
Users would want to see details of location before adding to board, even if location is known
Users wanted to add comments to posts (ex. "try the dumplings here")
Users wanted to add to "favorites" from detail page
UI and Branding
In my final designs, I made some adjustments based on the last round of testing, updated the UI, and applied branding and stock images. I utilized mobile interface elements and graphics that are visually clear, with a distinctive color palette.
I added more white space between each section on the homepage, increased size of the buttons to make it easier to tap on, decreased text length so that the items were easier to read.
See final presentation for screen annotations.
With Travel Collab, users can plan and collaborate on travel itineraries with friends. Users can easily keep track of locations they want to explore on an upcoming trip. Once they reach their destination, users can refer back to the map as they explore a new city.
"My Travel Collabs" displays displays multiple trips that users have created or collaborated
Travel Collab card displays user selected photo, trip name, # members, # posts
Popular Destinations section displays curated destination cities and popular locations
Category tags (pre-made and user-generated) act as filters on the list and map pages
Toggle view between list and map
Google Maps API sourced locations and descriptions
This project allowed me to practice iterative prototype testing at various levels of fidelity. After each test, I incorporated user feedback into my redesign. Overall, it helped me to build my interaction design and problem-solving skills.
I learned that it is important to get users' reactions to the overall idea before moving on to specific features or details. It's also important to make sure that the user can see their own problem being solved by your product.
Paper prototyping is a level of iteration that I see as being very helpful in certain scenarios. It is helpful when you are trying to test something that requires physical interaction with the user. However, I did not find paper prototyping to be helpful for my project because it took more time than a low-fidelity wireframe. Because this was a student project, I didn't have immediate access to many test participants, so taking and uploading pictures of the prototype and adding them to Marvel was another time consuming process.
I can see how paper prototyping can be useful in a testing lab environment with plenty of people around who can help test out different iterations of your product before moving into digital prototyping. However I would have preferred on this project to start with low-fidelity wireframes.