Travl
User Personas
Affinity Mapping
Wireframing
Prototyping
Usability Testing
Maze
How might we make the group trip-planning process more enjoyable, collaborative, and organized?
Trip planners traveling in a group need a better way to create and share an itinerary with fellow travellers so that they can stay organized, connected, and up-to-date on trip activities.
Group trips can be fun, but when it comes to planning, there can be a lot of headaches and groans in the process. From coordinating flights, car rentals, and accommodation bookings, to choosing activities that suit everyone’s tastes, group travellers tend to rely on their group chats and (for the more organized crew) spreadsheets to track everything down.
Through user interviews, I found that the bulk of group trip planning tended to fall all on one person, who would easily get overwhelmed with planning and keeping track of activities for a larger group. After all, simply anticipating a trip can make you happier than actually taking it.
Travl is a personal collaborative trip planning app that enhances the group trip planning experience for group trip organizers.
- Conducted 5 user interviews to understand pain points for group travellers
- Synthesized findings by creating affinity maps, persona, and story arc
- Prioritized 20 brainstormed features, 7 of which were low effort & high impact, and implemented one feature (i.e. a shared itinerary)
- Conducted competitive analysis to determine gaps in the market
- Created user flows and mockups of low-, mid-, and high-fidelity (backed by findings from usability testing)
I used the Double Diamond model with the following methods.
.png)
After some preliminary research, I conducted five user interviews.
These user interviews helped me to better understand the trip planning process and the motivations, goals, and barriers for those who travel in groups.
Five working professionals, including Gen-Z and Millennials ranging from 24-30 years of age with varied traveling preferences were interviewed remotely via Zoom.
The whole process was pretty chaotic because it was all on Messenger. Messages get lost really easily if you know you're not on the same screen when the questions being asked.
There needs to be flexibility built into every day.
If everyone had a shared view of the itinerary that would be nice, so you know exactly what we're doing each day and what free time we have.
I performed a SWOT analysis on two main competitors in the travel planning space, TripIt and Google Sheets.
Through the user interviews, I uncovered some common tools people used to plan their trips instead of a trip planning app, such as their Notes app on their phone or simply mentally. By far though, the most popular was collaborative spreadsheet software like Google Sheets.
I also did some secondary research to find one of the most downloaded travel planners on the app stores, Tripit (a corporate travel app).
Between these two competitors, I completed a SWOT analysis to identify areas of strengths, weaknesses, opportunities, and threats. This helped me pinpoint where the gaps are in collaborative trip planning apps.
I used an affinity map to sort through all thoughts, feelings, quotes, and behaviours that were uncovered during the interviews.
By visualizing them, I identified eight overarching themes, five of which I considered important to the project given its scope and constraints:
- Feelings/Sentiments
- Use of Google Tools (GSheets, GMaps, GCalendar)
- Collaboration
- Travelling Alone vs. in a Group
- Planning Activities
Too small to read? Click on the image to see the original Figjam file!
I created a persona to explore and capture the needs of a specific group of users, to help design with target users in mind.
I envisioned an ideal hero's journey for the persona, Teresa, as she plans her next group trip.
Based on my research and own ideas, I brainstormed 20 features and prioritized them based on effort and impact.
The highest impact and lowest effort ideas are the best for an MVP, and are highlighted in the top-left corner. The idea I chose to move forward with is the shared itinerary.
I landed on two user flows to design: adding a trip, adding a car rental.
At first, I wanted to create a flow from when the user opened the app, created a trip, and added their first plan to the trip.
However, after some feedback from a mentor, I decided to split the flows into two separate flows, as these are really two distinct tasks:
- Adding a base trip to the itinerary
- Adding a car rental plan to that trip
Adding a trip is fairly straightforward, but adding a specific plan requires more thinking and decision-making. Car rental chosen to illustrate the task of adding a plan to a trip because:
- Car rental was mentioned in the user interviews as a task that requires some pre-planning
- Car rentals, in the case of group trips, are typically shared by multiple people on the trip and thus require more collaboration in the planning compared to, say, booking a flight.
Sketches
As part of my ideation process, I sketched out wireframes.
I also conducted moderated user testing with 4 users using mid-fi wireflows so as to prevent costlier and time-consuming changes down the line.
I created wireframes in Figma for these three flows, visualizing the first iteration of what a collaborative trip planning app may look like.
- Add a Trip
- Add a Car Rental Plan
- Onboarding Journey
I conducted four user tests on the wireframes above and found four key insights.
Method:
- Each participant was asked to complete the two tasks, add a trip and add a car rental plan, on a live Zoom meeting.
- Each task was timed, and participants were asked to think aloud so that any hesitations, errors, and logistical issues had more context.
1
Importance of form labels
In the Add a Plan flow, edit the form label from “What do you want to call this plan?” to “What do you want to call your car rental?”. Some prompts also solely lived in the textbox, so the user risks forgetting what they should be inputting if they start typing inside the box. Since this app requires user input into forms, form labels will need to be thoughtfully worded, and include specifics and labels that live outside the textbox.
2
Display vs hidden user-inputted information
In the Add a Trip flow, added attendees were not displayed once the user exits the textbox. By displaying user-inputted information, the user can double-check the form before submission to reduce the chances of submitting an error in the form.
3
Confusing Add button
In the Add a Plan flow, the user mistakenly clicked on the add button on the top-right corner of the Trips Overview page to add their Plan when in actuality, that button was for adding a new Trip. A visible button should serve a clear purpose for the user, or it will risk the user veering off the happy path of completing the intended task.
4
Legible text sizing
Some of the text for the Trip description was in 10 pts, which was way too small and barely legible. This size should only be reserved for footers or nav bars. If a font is for a standard text like a description for the Trip, it should be 14-16 pts.
Issues with this iteration:
- Contrast issues with yellow buttons and some texts
- Form backgrounds were not the best visual choice (dark vs light)
- Profile icons / avatars didn’t meet accessibility standards
- Background overlay behind confirmation pop-up not visually appealing
Issues with this iteration:
- Form fields: allow multiple contacts; nested vs unravelled view
- Form changes: dark → light, gradient, rounded edges, pop-up, header
- Tweaked icons (sizing and filled colour)
- Tested for contrast (accessibility)
- Added aesthetic elements (waves)
- Better transitions in prototype
I conducted usability testing on the high-fidelity prototype with 8 participants.
The test was conducted in an unmoderated setting, using the tool Maze. The test was conducted on iteration #2 of the high-fidelity prototypes.
Three flows were tested:
- Onboarding
- Add a Trip
- Add a Plan to the Trip
I analyzed the results from the usability testing, summarized key findings, and made recommendations to improve the app.
.png)
I prototyped the final iteration by implementing participants' feedback from the usability tests.
The main flows are 1) Add a Trip and 2) Add a Car Rental Plan.
I also created onboarding flows for two methods, email and phone.
It was important to choose a colour palette that conveyed a sense of adventure and fun so that the users feel excited to plan their trip.
The colours used throughout the high-fidelity prototypes are in compliance with WCAG AA colour contrast guidelines, considering accessibility in my design.
Sinopia is from the orange family, which brings a sense of fun and adventure, akin to the feelings invoked when planning a trip with friends. This was chosen as the primary colour.
As a contrasting secondary colour, Aquamarine was chosen for its brightness, youth, and ability to harmonize elements throughout the app.
Yellow Orange was chosen as an accent colour to add pops of happiness, excitement and enthusiasm throughout the app to highlight the fun that comes with trip planning.
Source Sans Pro was chosen as the font for its versatility and legibility, even at small font sizes in a UI.
Design more flows
The scope of this project was limited to one key feature for the app, the shared itinerary. For the next iterations of the app, I would employ the design thinking process to design the flows for these other high-impact features:
- Map view of itinerary and activity discovery (Google Map integration)
- Voting polls for public plan ideas
Launch the MVP
Once the MVP launches, monitor key performance indicators (KPIs) like number of downloads, number of trips saved, app ratings, as well as qualitative feedback from users such as feature suggestions.
Research, mockup, and test other features suggested by users
As for future features that can also be considered beyond the initial two listed, these features were brought up by users during the testing phase of the final prototype.
- Calendar integration/sync with iCal or GCal
- Draft or save folder for potential plans
- Focused view on each plan in Detailed View (currently Detailed View may be overwhelming with information)
- Ability to add multiple destinations in a single trip (i.e. multi-city)
- Customization options such as drag and drop to rearrange legs of the trip, and the ability to choose personal icons for the Plans
More feedback will be collected and analyzed from active users on an ongoing basis.
Takeaways
As I was the sole designer on this project, there was a lot of learning I took away from this experience.
User research techniques
I learned how to organize effective user interviews, ask good questions, and employ practical interviewing techniques. I also learned how to synthesize all the insights from user research into effective problem statements and hypotheses.
Visual design: forms, design systems, and accessibility
One big learning was the key consideration when it comes to designing forms on mobile—labels, confirmation modals, and correct use of placeholder text was highly important. I also learned how to put together a design system with components in Figma and choose a colour scheme that met the industry’s accessibility standards.
Working efficiently with constraints
I did this project after my full-time job, which meant that I had limited time to work on it. Many of the concepts I was applying as I learned throughout the project. I learned to document my progress as I went, as this was a personal reminder for why I was making certain design decisions, which was especially helpful towards the end of the project.
You've made it to the end. Thank you for reading!