Check out a short 30s video highlighting the key features of TripKit!
Katie
UX designer
TripKit
A native mobile app that helps
group travelers plan collaboratively.
Project Overview
As a capstone project for the UX Program at BrainStation, I decided to research on the process of trip planning and design a native app as a solution to improve the overall trip planning experience for group travelers.
TripKit is a native mobile app that provides group travelers a collaborative space to plan their trips and reduce travel planning anxiety.
🖌️ UX Research, UX & UI Design
⏰ Two Months
📱 Mobile App (Android)
🔧 Figma, Adobe After Effects, Adobe Illustrator
Feel free to check out the high-fidelity prototype by clicking the button below 👇
My Design Process
During this project, I followed the Double Diamond Design Process which consisted of four main steps: Discover, Define, Develop & Deliver. I then added extra steps to this process to further develop the brand and create a marketing strategy.
DISCOVER the problem space through extensive research
DEFINE and focus on the design question
DEVELOP and explore potential solutions through sketches & wireframes
DELIVER a finalized design after conducting user testing & iterating
BRAND DEVELOPMENT Create brand visual identity & High-Fidelity Prototype
MARKETING STRATEGY Develop a strategy to further promote the app.
Introduction
I've always loved travelling — travel takes me out of my comfort zones and inspires me to try new things. Whenever I travel to a new destination, I want to make the most out of my trip and have the most authentic experience. I want to feel confident knowing where I need to go and doing things that I’m interested in. To be able to do that, I find myself sitting in front of my computer prior to the trip: doing research and planning an itinerary - probably not the most fun, especially when I need to plan for a group of friends as well.
Problem Space
Travelling is fun and exciting, however the planning process may often be overwhelming, complicated and even stressful, especially when planning with a large group. Often times, young travelers are overwhelmed by the amount of time and effort needed to plan a trip, while also taking in the opinions and interests of everyone in the group. This can often lead to conflicts within the travel group and making the overall experience stressful and unpleasant.
Tackling the Problem...
The problem space itself was pretty vast, which gave me a lot of scopes to experiment with and start ideating solutions. But before I start to think of solutions, I needed to get a better idea of WHAT the actual problem is, WHO it is affecting, WHY there is a need to solve this problem, and lastly HOW I will be solving it.
Firstly, I wanted to know more about the travel industry and how group travel works. This would allow me to gain more insights and understand the problem space better.
Research & Discovery
Why Focus on Millennials?
To narrow down on my problem space, I focused my target user group to millennials. In recent years, studies have shown that millennials have travelled much more compared to any other generation. More and more Millennials have started to plan their own trips rather than using travel agencies or joining tour groups.
5.6
Trips per year
Trips per year
Millennials take more trips than any other generation
$200
Billion
Billion
Total spent on travel in 2018 by millennials
66% of
Millennials
Millennials
Book trips via smartphones. 74% use it to research.
What is Travel Anxiety?
Travel anxiety is the fear of visiting an unfamiliar place. It can also involve the stress that comes with planning for trips. While it's normal to feel uncertain about visiting new places, travel anxiety can become serious. It can even stop potential travelers from enjoying their vacations and add stress to their lives.
Main Factors of Travel Anxiety
Financial Concerns
Travel is a big expense for most people. This extra spending can put a strain on a person’s finances and lead to extra stress.
Travel
Planning
The most stressful part of travel for most people actually begins before the trip - the trip planning stage. This includes doing travel research, making travel bookings & an itinerary, and packing.
Safety
Concerns
Many people worry about the safety of certain destinations, especially if that destination has experienced recent terrorist activity, tourist kidnappings, theft, or shootings. Feeling unsafe is a huge factor that causes travel anxiety.
Expectations of Travel Group
When travelling with groups, the needs, preferences and expectations of each travel companion will have to be considered. This can often be a stressful experience for people, especially if travelers don’t agree on everything. The more people, the more stressful it can be.
Primary Research
To get a better understanding of my users and their behaviors, motivations & pains, I conducted four interviews with Canadians between ages 20-35 who have travelled or planned their own trips before. I wanted to understand the "Why" behind the problem.
After completing the user interviews, I gathered my notes & identified 4 main themes & insights.
Define
Persona
Building a persona will help create a visual archetype of the ideal user based on my primary and secondary research. Deriving insights from research and interviews, I was able to pinpoint the motivations, behaviors, and pain points of the user. The persona will help guide future design decisions for the development and creation of my solution.
Let's meet Jennifer
Jennifer is a recent graduate who is a freelance illustrator based in Toronto. She loves travelling and often takes charge when planning for trips. However, when planning a trip for a group, she finds it difficult to cater to all her friend's different interests and needs. Because she is the lead planner of the group, she feels stressed and burdened whenever she has to make important decisions for the trip.
Click on the Persona image above to get a closer look!
Experience Mapping
The experience map helps us understand a general human behavior and helps us visualize the baseline understanding of an experience prior to using a specific product or service.
To visualize the entire end-to-end experience of Jennifer and see how she accomplishes her goal, I built an experience map of her trip planning process with her friends.
Click on the Experience Map above to get a closer look!
Refining the Design Challenge
After I gained insight on my key users and got a deeper understanding of my persona, it was important for me to re-visit and refine my original design challenge to ensure that it reflects the insights that I gained.
In this new revised design challenge, I decided to focus on group travelers rather than just "young travelers". I wanted to focus more on the dynamics of group planning and how to further improve and smooth out the process of planning a trip with a group.
Develop
User Stories & Task Flows
User stories are representations of small instances in peoples' lives. They depict a scenario that enables designers to empathize with a user, and from there, generate ideas that improve their experiences.
Based on my refined How Might We Statement and goals of my persona Jennifer, I created a set of 30 user stories and identified 5 core epics in order to help guide the ideation process of my solution.
Core Epics
01
Organizing Travel Plans & Itinerary
02
Exploring Things to Do
03
Collaborating with Travel Group
04
Being Prepared & Up to Date
05
Plan Trips Based on Interests
Choosing the Main Epic
After analyzing the user stories and epics, I decided to choose “Collaborating with Travel Group” as my main epic. The reason is based on my interviews and research, all of my interviewees agreed that while going on trips with a group of friends is very enjoyable, planning with a group was the most difficult part.
This can be caused by members of the group having too many different opinions or interests and can’t decide on something together, or the exact opposite where the group is indifferent to everything, leaving the group planner feeling burdened with making all the important decisions.
Building the Task Flow
A task flow is a diagram that represents a user’s journey through a specific task. It is focused on the specific main task that a user is trying to accomplish.
The main task for our user Jennifer is to make important decisions for the trip together as a group.
Secondary tasks include viewing trip plans & messaging group members.
Exploration
Exploratory Sketches
To begin my ideation process, I started exploring various layouts and components of the app, taking inspiration from popular travel & exploration apps on the market such as AirBnB, Expedia, Instagram, Yelp and TripAdvisor. I started to explore sketch out ideas and different features of the app. Key features that I wanted to focus on in the app included a home screen with a suggestion/recommendations feed, a group trip plan screen with saved locations or pins, as well as an interactive group activity to engage group members into contributing towards the trip plan.
The interactive group activity was the most important part of my task flow - this was the key to helping my user make decisions with there groups. I didn't want it to be just a simple poll activity and wanted it to be more engaging and fun. I decided to take inspiration from the famous Tinder swiping feature and integrate that within my app and making it into an activity to help the group decide on locations to visit during their trip.
Solution Sketch
My initial solution sketch shows the user navigating from the home page to their “Trips” page and browsing through the pins saved by their group. From their, they notice there is a new message in the group chat (on the navigation bar) and decide to take a look. The user notices that the group is having trouble deciding on a hotel to stay at and taps on the “Activity Kit” Icon to see which activities can help them decide as a group.
After the user selects the “Quick Decide” Activity, they fill in the question they want to make a decision on and start to select pins of the hotels they want to include. After selecting, they send the activity invitation to the group chat and starts the activity. The activity is a card swiping game where they can vote “YES” or “NO” to the cards/locations selected. After the activity ends, the user can see the total results and which hotel was the most popular amongst the group.
Wireframes & Initial Prototype
Once I had developed my solution sketches, I refined the drawings and translated them into greyscale wireframes in Figma - following the Material Design principles. I then started to prototype the appropriate interactions and animations and began to prepare for formal user testing.
Deliver
User Testing
To gain more insight and feedback on how users interact with my digital solution, I started conducting usability tests.
I conducted two rounds of usability tests over Zoom with 10 individuals (5 testers each round) who are of ages 20-35. Each usability test took about 10-15 mins. The testers were asked to complete 5-7 different tasks while navigating through the prototype. I was able to observe how real users interacted with the app, which helped give me real-time feedback in order to further improve the design and create an optimal experience for users.
After each round of testing, I analyzed and compiled my notes and identified the major issues and mapped them onto a design prioritization matrix. Overall - I made 3 versions of prototypes & identified 5 major issues to be revised.
Scenario
“For this session, imagine you are a 20-25 year old recent graduate who is planning a trip to San Francisco with a group of 4 friends. You have already made an account and created a group with your friends in the app. Your friends have started to save multiple attractions, restaurants and hotels in San Francisco in the group already.
You and your friends want to start deciding on a hotel to stay at so you can start booking –however, everyone has pinned down so many different choices and can’t decide on one. You would like to come to a final decision today with your friends so you can start booking the hotel.”
Major Change #1
Add Heart Icon Interaction
Added heart icons to top right corner of cards.
Text appears on the card to show that this specific card has been saved to “SF Trips”
Show motion of card flying towards the “Trips” icon in the navigation bar to show that this is where the user’s saved pins go to.
Major Change #2
Easier Access to Quick Decide
In version one, user had to press the “+” icon to be able to show more features on the chat such as stickers and their “Activity Kit”.
In version two – I placed the “Activity Kit” icon outside where it is accessible without having to press the “+” icon. The design of the icon has also changed to resemble a puzzle piece forming together to symbolize “Group Activities”.I’ve also added a chatbot to recognize certain keywords typed by the user such as “decide” , “choices”, or “vote” to help guide the user towards trying out new features within the app.
Major Change #3
Show Top 3 Results in Chat
Changed the quick decide invitation chat bubble to update after the activity is complete with the top final results (top 3 choices) from activity.
User can then click in to “See all results” to view the rest of the results.
Major Change #4
Save Pins to Another Trip
Added an “Edit” link so that users may select to save the pin to another trip if the have multiple trips created.
On the prototype, the transition speed was also slowed down so that users have a longer time to read the text and select the “Edit” option if needed.
Major Change #5
TripBot Suggestion
An added explanation at the bottom of TripBot’s suggestion to show users how to access the activities again if needed in the future.
Brand Development
Visual Identity
After completing the usability tests, I then started to transition my greyscale prototypes into a high-fidelity prototype. Before doing so, I needed to develop a visual identity for my digital product and create a design system.
The first step to establishing my products' brand is to identify the keywords and moods that embodies my brand's personality.
Using these keywords and moods, I began to build a brand mood board, colour palette, & typography system. I wanted the brand to evoke a friendly and creative feeling while also being helpful and reliable.
Wordmark Exploration
I decided to find wordmark inspiration from brands that my persona, Jennifer would be most familiar with –such as AirBnb, Google, Facebook, Discord, and TripAdvisor. I wanted to find sans-serif typefaces that are simple & modern, yet still rounded, unique and fun.
Why "TripKit"?
In the end, the name “Tripkit” was chosen as it ties back to the idea of a helpful toolkit for travelers to plan their trips. “Tripkit” holds all the essential tools needed for trip planning in one single app. The name is also short and easy to pronounce -making it a memorable wordmark.
Testing Review
Results Ranking Screen
After reviewing my testing session document from my previous rounds of user tests – all usability issues in the app have been revised and improvements were made to make the flow even smoother.
There was one minor issue with the overall look of the results/ranking page. Most of the users during the test agreed that the top 3 didn’t stand out enough and should be emphasized more. I tackled this by placing the top 3 results on a pedestal at the top of the page – giving them even more emphasis.
High-Fidelity Design
Brand & Colour Injection
I began to apply colour, imagery & brand elements and refined my prototype.
The Big Question...
How will this App Help Jennifer?
Since Jennifer is the lead planner of the group, she often feels stressed and burdened whenever she has to make important decisions for the trip.
Now with the app, Jennifer and her travel group can make decisions together collaboratively in a fun way. She doesn’t have to keep badgering her friends to get answers from them about which hotel to book.Jennifer is a huge planner, and when it comes to planning trips, she often juggles multiple apps and websites like Google Docs/Sheets, AirBnB, Expedia, Facebook Messenger, YouTube, Instagram and more.
With this app, Jennifer no longer needs to juggle all these apps anymore. Jennifer can now find travel inspiration ideas, save points of interest, plan her itinerary, message her friends, and even book for stays/hotels all on one single app.
Value Proposition
Manage Trips & Saved Pins with your Group
TripKit makes it easier than ever to plan a trip with your travel companions. You can browse through locations recommended for you & your group, and easily save the locations to your trip plans. From there, you can start building your trip itinerary easily with your group!
Plan Effectively with your Travel Group!
TripKit can help you plan and collaborate with your group and make your planning process smoother. Easily send points of interest, travel plans/itineraries & other travel documents to your group - no need to jump back and forth between different apps!
Make faster & better decisions for your trip
Can’t decide on a place to stay, attractions to visit, or places to eat at? Or can’t figure out what your group wants to do on the trip? Try out one of our chat activities QuickDecide and make your decision making process smoother and more efficient!
Marketing Strategy
How will People Find out About TripKit?
In order to promote the TripKit app, I plan on starting out with advertising via social media apps such as Facebook, Instagram & YouTube as a large amount of the target audience also uses these apps. Another strategy is to use a referral program & make use of recommendations and word of mouth. Once the app starts gaining traction, I plan on advertising through partnerships with major influencers such as travel vloggers.
How will TripKit Make Profit?
I explored different monetization models for similar products on the market such as Airbnb, TripAdvisor or Expedia. Most of these products on the market use either a subscription basedmodel or a freemium model. Most of these products however make profit through click-based advertising, sponsored placements & listing fees. For TripKit, I plan on using a similar freemium model where it is free to use, unless the user wants premium features, such as exclusive hotel deals, travel advice from experts or extra perks & benefits from partners.
👆 Scroll within the mockup to see the rest of the page!
Desktop Marketing Website
In order to market the app, I developed a responsive website to help further promote the app and broaden the audience. This landing page would describe the key features of the app and value proposition so that visitors are enticed to click through, download & install.
To view the full animations & interactions on the website, check out the Figma prototype link below 👇
👆 Scroll within the mockup to see the rest of the page!
Mobile Marketing Website
In order to market the app, I developed a responsive website to help further promote the app the target audience. This landing page would describe the key features of the app and value proposition so that visitors are enticed to click through, download & install.
To view the full animations & interactions on the website, check out the Figma prototype link below 👇
Multi-Platform Challenge
👆 Scroll within the mockup to see the rest of the page!
TripKit - Desktop Web
I wanted to further expand TripKit and bring it to multiple platforms. If users wanted to view and manage their trip plans on a larger viewport, the most logical platform expansion would be for desktop web.
This is because trip planning is a long and involved task and often times, users prefer using desktop for such tasks. This allows users to not only plan on the go (mobile), but also settle down for longer planning sessions and plan at home on their desktop.
What's Next?
What's Next for TripKit?
Revisit and create new user stories and task flows for the hotel booking process and itinerary creation process and continue user testing.
Bring to a developer and start building the app & prepare a launch plan.
Research monetization & pricing strategies and develop a finalized business model.
Keep Testing
There will always be more room for improvement, and after conducting multiple rounds of user testing, I realized that design is a never ending process and the solution will never be perfect - there will always be something to improve!
Focus on the Key Problem
I tackled a very large problem space and the product can only help relieve one portion of this problem. I realized I needed think more realistically and focus on designing the solution to a part of the problem first rather than designing multiple solutions for every single problem that the user may have when it comes to travel planning.
Don't Get too Attached
I found that being too attached to my own design ideas started to limit the options that I could explore and stunted my growth as a designer. I found that as a designer, I needed to be more objective towards my designs. After countless iterations and revisions of my wireframes & prototypes, I learned to not get too attached to any idea.
Though there were times that I felt doubtful of the outcome of my product, I learned to embrace the ups and downs of the design process. It was a challenging process but also rewarding at the end.