Building a better travelling buddy
UX/UI and User Research | June 2018 - Aug 2018 | Team: 1 PM, 5 front end SWE, 1 backend SWE
As a passionate traveller, I have been on numerous road trips in different countries to explore and take photos. However, whenever I try to plan my trips with friends and family, they are often frustrated with the overwhelming resources online and the difficulty to find one good app that they can put all their visiting sites into. Recognizing the demand, I decided to create a travel planning app that eases the tediousness of trip planning.
Union is a traveling app that allows people to view travel guides and personalize their own trips. Union removes the tedious process of trip planning with one click feature integrated with pinned sights on maps.
Design Methods: Storyboarding, User Journey, Rapid Prototyping, Sketching, User testing
Research Methods: User interviews, Market Research, Usability testings
Tools: Sketch, Principle, After effects
Avid Travelers want to go to the places they want with an easy planning process. However, current apps do not support such function. Avid travelers find it hard to plan trips online with the overwhelmingly vast amount of information. They can only combine these scattered resources by themselves which is frustrating and time-consuming.
Combining with the fact that users might want to write about places they have been to, I determined to create a simple, centralized process that streamline the process of trip planning. To maintain the focus and clarity of the project, I defined the following people's problem.
People want to plan their trips efficiently and smoothly, but can't because the planning process required gathering scattered resources from different places and there are too many things to consider when deciding where to go.
I started to dissect my ideas into actual solutions using Designer’s indispensable skill: the ability to write and present a solid problem statement as a starting point to generate questions surrounding the problem statement.
How might we make the planning process for traveling more efficient and less tedious for avid travelers?
How might we ensure avid travelers can personalize their trips such as travel guides, comments and writing about details of the places they go?
How might we present the right amount of information to avid travelers so that it is enough for their trip planning processes?
If my app allows people to personalize their own trips and view others' guides, we can make traveling more engaging and immersive.
User Research: Online research + Interviews
Online Research: "Let the user research guide the way" -- This is what I believe in when building my app. After gaining sufficient research from different articles and documents, I found that travel app only accounted for 1% of the time of users and 80% of the users would immediately switch to another app if they find a bug, or affected by the poor UX design. Also, 52% used traveling apps to browse for traveling resources for last minute bookings. These figures showed that travelers wanted to plan their trips fast and simple.
Interviews and surveys: While onboarding 25 travelers and gaining some knowledge of their extensive traveling experiences, I crafted two sets of surveys for people in UCLA and near the school to fill out. I believe using surveys can effectively be scalable to a larger demographic and users later on.
Major research key findings
After synthesizing research from the 25 travelers with affinity mapping, surveys and user research, I summarized the key user needs for the development of the UI.
1. Poor Customization
Travelers are not able to customize their itinerary based on popular themes such as cultural sites, natural parks and nightlife. There is also no feature to write travel journals of the places of interest they visit.
2. Overwhelming Resources
Travelers struggle to discover places of interest due to the overwhelming number of tourist sites they discover online. There are no categories to these tourist sites.
3. Insufficient Details
Important information such as cost of the trip, time and age constraints of the events are not displayed on those traveling apps or websites.
"I have used a lot of apps for trip plannings. From expedia, google trips to road trippers. I wish they offer me the function to plan my own trip"
Kenny Sun, UCLA 4th year student
After synthesizing my user research, I concluded the biggest design decision to be implemented in the app would be giving sufficient resources for users and allowing them to plan their trips with personal customizations, which is a major win for Thomas and Oliver who likes planning. Also, I wanted to emphasize on creating different distinct traveling themes and refining the flow of finding travelers' guides.
1. Flexible personalization
Current traveling resources do not provide an incredible personalized travel planning procedure. I hope introducing day and week plans through constructing personal tour guide would create an inclusive, flexible environment. Users like Thomas, who struggled to put all the resources together can now easily add guides into his own plan and change the plan as he wish to.
2. Centralized categorization
With the feature to toggle between different cultural themes, users can now easily focus on which categories of visiting sites they want to go instead of being overwhelmed with scattered resources. This is a major win for Oliver, who doesn't want to visit two museums in the same day. She can now easily find places to visit from different categories and a plan a more diverse trip.
3. Presenting the right details
The users no longer have to be afraid of seeing the unrelated traveling information. By viewing the details of the travel guides, the users can now see related ratings, detailed cost of the event, and age constraint of the visiting sites.
Competitive Analysis: Reinforcing my design goals
How about the competitors? Right now, both Roadtrippers and Google Trips are travelling sources that users use for planning. However, both of them have main flaws when I delved into their functionalities.
Google Trip/Map: The so called "customization" for google trip actually does not offer customization. It is a planning procedure that will shuffle itself every time differently and automatically provide a day plan for the users.
Roadtrippers: If you see a group of places you want to go, you cannot put them in order. The defects of these traveling apps further reinforced I need to implement the personal customization's feature.
Objective: Make a journey plan into one single process, rather than multiple convoluted stages.
1. Search Bar for travel locations: base on a map and a navigation bar to search for places to travel. Created as an all in one searching process to plan for the trip.
2.Travel Themes: Help users to remove the tedious process of choosing which places to go.
3. Guide Page: users can create their own travel guides through the guide page which not only offers flexibility on where to choose but also allows them to customize their own visiting sites
4: Plan Page: users easily access and change their daily or weekly traveling schedule
Team division: I consulted my two roommates on the feasibility of the features with their backend and front end coding knowledge, and decided not to implement the real time traffic from spot A to spot B but instead chose to implement Google map integration due to the technical difficulty to scrape data and this feature can be easily accessible through google map.
Information Architecture | User Flow
User Flows: 2 main user flows are created that help the users to plan their trips and create travel guides respectively. This is in line with my original design goals of planning trip guides and viewing others' guides which help me to visualize the flow for a trip planning experience.
Information Architecture: 4 main subsections are created to search for trips, plan guides, alter traveling plans and profile to store important information
Low fidelity mockup
Initial user testings: I underwent one round of user testings with my General Assembly classmates and discovered they wanted to access the details of the visiting sites immediately while planning trips.
New Feature 1: When creating low fidelity mockups, I incorporated a two choice feature when seeing sites' details. For example, in one single screen page, the user can swipe or tap on sites to choose their themes for visiting.
New Feature 2: Users can easily add people's guide as reference to their own traveling plans in my profile page. The whole idea is to reinforce traveling as personalized and efficient process.
High Fidelity Mockup
Design for future
Color choice: I found black to be most consistent color with my design. Thus, it is used as the main color of the app to showcase a sense of trustworthiness and power granted to users, the power to create and customize their own plans.
Typography: I used San Francisco fonts because it is simple and readable. Body text and headers are distinguished by font sizes and font weight. The app also applied a minimum of 13 pts to maintain clarity.
Design Principle: As I looked ahead in every step I built the app, I realized the importance of USER-FIRST concept. I am building a platform that is built around the users and their journey ahead. Thus I added sharing function and building own guides to allow people to share their experiences with another person. It is about a traveling experience that you and your friends and family can enjoy together.
Crafting the sign in experience
When users sign in, I give the users just the right amount of context to use either Facebook, google or phone for logging in. Now, they can easily sign up with their own choices.
The main page has gone through the most iterations. I want to make clear for users to select their destinations first, while providing the opportunity for them to toggle between various themes. I am providing a comprehensive experience for them to plan their journeys fully.
Finding the right destination
Into the visitors' shoes
By giving travellers the ability to personalize their profiles and create their own guides, I give them the ownership to control their own plans with a seamless Union experience. They lead their own trips and choose what they want to see.
Visual Design: Logo
I believe a memorable logo can either capture the visual attention of the users or convey the main idea of the object it represents behind. Union did both. By combing both the U together and alternating the positions using Illustrator, I want to create a symmetrical aesthetic that coveys the idea of uniting resources to people in an organized fashion.
Measuring success: Because the app does not get officially published on app store, it was hard to measure the success using retention rate or uninstallation per downloads. Thus, I gave my friends to interact with the high fidelity prototype on Principle and they were happy to see that setting their own user plans were useful for road trip planning.
Opportunities for future improvement: I will continue to explore areas such as hotels and flight bookings integrated to the existing search process. In addition, I will also want to add more themes to the search process. As a whole, my goal later on for this project is to learn Swift and actually push it out on App Store to gain real users' feedback.
Another possible improvement is to limit the use of Spring animation. I notice that my app may seem too bouncy to some of the users and I think spring animation might only be limited to either home page or important actions.
Next step: Throughout this 40 hours part time General Assembly class, I learnt a lot about product thinking, interaction design, visual branding and the importance of user research. Most importantly, I uncovered a lot of possible ways for improvements in the traveling industry and looked forward to improve my design and coding skills so that I can truly assess the difficulties of certain design decisions from the perspective of a developer.