Duration:
3 months
Instructor:
Brian Fling
My Role:
UX Designer
The Team:
Rahul Banala, Manó Bárkovics, Kairi Hye, Alexis Koss, Lisa Koss, Rebecca Ta, Jorge Velez
Tools: Adobe XD, Figma, Marvel, InVision
Methods: User research, sketching, usability testing, wireframing, project re-assessment, high fidelity mockups, case study
Many people aspire to travel, but they don't know exactly where to start in order to find the best deals and places to travel to. Some of the most frustrating aspects of traveling include deciding on a location to visit, discovering exciting things to do once they've arrived at the destination, and documenting their visit.
Chapter is a mobile phone application that centralizes the travel process so that there is more time to experience the journey rather than stressing over the details. With a built in itinerary system that keeps track of each segment of a journey including the budget and the desired places to visit, travelers can be confident that all of their trip details are safely stored in one place that's easy to access at any time.
It is currently difficult for travelers to find an application that allows them to discover a destination to visit, to find exciting things to do at that location, and to keep track of all of their trip details, including budget, all in one single mobile phone application. Travelers often have to resort to using more than one mobile application, which can make it difficult to keep track of what details are being recorded in each one of these apps. This increases the amount of guessing a traveler must do when planning a trip, especially when they've never visited that destination before.
Over nine weeks, we conducted a total of four two-week design sprints in which we used sketching, wireframing, prototyping, and usability testing to design the interfaces and UI components needed for our new mobile application. As a larger team of seven individuals, we worked diligently during each and every one of these design sprints in order to create a mobile application that both looked and felt consistent throughout all of the screens and met all of the goals needed to satisfy our target user group.
During the first week is where we decided that we wanted to focus our design on travelers, who could either be experienced or even completely new to traveling. From here, we identified the problems that travelers often face and narrowed down our scope to only focus on how travelers decide on a destination to visit, organize all of their trip details, and maintain their budget.
With the remaining eight weeks, we executed our four design sprints. At the beginning of each sprint, we outlined the goals and features we wanted to accomplish at the end of that two weeks. During the rest of the sprint, up until the last two days, we either sketched or used Figma to mockup our designs. The final days of each sprint were dedicated to testing with five users for 15 to 30 minutes each, which was where we gathered feedback and critiques in order to improve the overall user experience of our designs. We choose different users to test with every week so that we could receive feedback from testers with different perspectives. Although, we did keep one tester consistent every week so that we could monitor how their feedback changed in regards to the new changes and features we added.
How can users easily plan, budget and choose places to visit when they’re unfamiliar with the areas they’re visiting?
To begin to understand how travelers are users are currently planning their trips and preparing a budget, we conducted five initial semi-structured interviews with people who fit into our target user group of being interested in traveling. We targeted any user who expressed an interest in traveling, regardless of their level of experience with doing so. Through these interviews we learned that travelers spend unnecessary time searching for a destination to visit because they have to use multiple apps in order to find the information they need in order to craft an accurate budget.
We identified the following problems:
Different sources of information sometimes have conflicting facts, which makes it difficult to know what's true.
It's difficult to find accurate budget information for trips to certain destinations.
Comparing price differences between destinations proved nearly impossible.
As a result we learned that travelers, especially inexperienced ones, were left unsatisfied with the results they found while preparing for a new trip. Since these sources of information make it difficult to be completely confident in planning a trip, travelers are often left guessing how to decide where to visit, how to plan what activities to do once they arrive, and even how to create an accurate budget that will cover all of the things they aim to do there.
From our user research, we created two user personas that detail the needs and expectations of travelers while they are preparing to go on a trip and when they actually arrive at their destination. Our target users informed us that they:
Wish to find accurate information when they are searching for new locations to visit.
Want to track their current budget and itinerary progress while on their trip.
Want to share their experiences from a trip with their friends.
As a result, we discovered that there is tremendous difficulty in keeping track of all these details with a single application. This is why we believe that a mobile application that keeps all of these details stored in one place will make it significantly easier to book a trip and explore confidently once there.
Using the knowledge that we gained from our initial user interviews we began designing our app with the problems we identified kept in mind. At the beginning, we wanted to include features for all of the chapters in a traveler's trip: planning, booking tickets, and recording their journey. While this idea seemed to solve our user's needs at first, we quickly realized at the end of the first round of usability testing that this idea was too broad and missed our goals terribly, thus creating a bad experience for our user.
Instead of making it easier for our target user group to plan, book, and keep track of all of their trip details within one app, users were left confused and puzzled at how these three sections of the app were anything different than previous applications that they had used. These users were also hesitant as to why they should trust another app with their secure, private details to purchase tickets for airplanes etc. if they were confident that the apps they currently used were doing a good enough job already.
Our testers also felt that the app in its current state almost seemed like three different apps simply combined together without an obvious connection between them. This disconnected feeling left users feeling like they were still using three completely different applications. Without this connection, our testers were left feeling unsure if the data from one chapter of the app (planning, booking tickets, or recording their journey) was available in another part of the app.
To prepare for our second round of usability testing, we re-designed Chapter to better meet the expectations of our target user group. Instead of creating three distinct chapters for app, we decided to only focus on trip planning and budget planning in order to better narrow our scope and to receive more focused feedback from our testers.
With this change, users can instead plan trips using suggestions and filters to find the right destination for them. If a user wants to create their own trip, they simply choose a destination and then input additional details about the trip, such as how long they want to stay and their budget, in order to customize the trip to match their desires. The user is then able to begin creating the itinerary for their trip after the initial details have been finalized. If a user doesn't want to create their own trip from scratch, they can find a trending trip that they like and fork its itinerary into their own account. Once an itinerary is forked, users can edit the trip's details to fit exactly what they want.
Our testers this round thought that our idea seemed more cohesive and actually felt like a single app instead of three different ones like before. Our users also thought that the suggestions given to them via the trending adventure section was an innovative way to give travelers new ideas of where they should travel to next because they might not have thought of the destination themselves. Although, several of testers mentioned that the word fork wasn't intuitive and we noticed that it confusing to those without a technical background. We took this into consideration and decided to use save throughout the rest of our designs because it felt the most appropriate for our context.
After receiving positive feedback from our testers confirming that we were heading in the right direction with our design, we identified the key features that we wanted Chapter to include when it came to planning a budget and creating an itinerary. By mapping the information architecture of our app, we verified that Chapter had a logical interaction flow throughout the entire process of creating a trip, whether that was from scratch or if the trip was saved from another user.
Note: Our team ended up adding additional features when we designed the final high fidelity mockups, so those features are not present here. Further testing revealed that users wanted a better way to share their personal experiences while traveling via photos and blogs, so we integrated a system that allowed users to share these items with their friends and followers.
Based on the feedback we received from our first two rounds of usability testing, we moved onto wireframes where we could better define our user interfaces and create more distinct UI components, thus creating a better experience for the user. In this iteration, we focused on ensuring that users were confident that they could either create a new trip or choose a trip from the suggestions section with relative ease.
To lessen the confusion about what Chapter's purpose is, we introduced onboarding that all travelers are exposed to when they first load the application on their phone. This way users are immediately introduced to all of the core features of Chapter in three simple sentences. Although, adding an onboarding process proved to be unsuccessful, so we removed this feature in our final high fidelity mockups. Testers thought that the onboarding was unnecessary and took too long to go through to read.
When creating a trip, users are brought through a three step process that makes it easy to discover and choose a destination that's right for them. First a user is asked to provide specifics on where they're departing from and how long they would like to stay and visit. This step requires the most detail and lays the groundwork for the rest of the trip's details.
We later learned from our testers that they preferred to do some research and look at other user's journeys first before creating their own. This prompted us to change the create a trip button into a smaller, floating action button instead so that the first screen (on the left) could show trending journeys worldwide to help inform the user's decision.
In the second step, users are asked to input their desired trip budget. This budget helps Chapter suggest destinations that are affordable for the user and are not out of reach. Users are kept up to date on how far they on in the process by the progress bar at the top. This way users can be confident that there is an end in sight and that the overall process of creating a trip isn't that time-consuming. In the third and final step, users are prompted to help narrow down their suggestions by filtering, which ensures that users are only suggested trips that they would actually be interested in.
From our testing, we learned that users preferred to be able to break their budget down into more specific categories such as transportation, food, activities, etc. because it helped them better define and stick to a budget during the actual trip. For the filtering system, we ended up enabling users to tag their journeys, so it would better let other users know what kinds of things to expect if they also went on the same kind of trip.
Once a user fills out all of the necessary details in the creating a trip process, they are greeted with potential destinations that they might be interested in (shown on the left). Accurate details, such as the amount it would cost to go on this journey, are provided so that users know whether or not they would be prepared to embark on such a trip. On the other hand, if users would rather look through trending journeys instead of going through the three step process, they can see popular trips that other users have enjoyed going on. Regardless of which process a traveler uses, they will end up finding a journey and destination that's a perfect fit for them.
Overall testers liked how they are suggested potential travel destinations via both processes. They especially enjoy the trending journeys section because they think it's a neat way to discover destinations that they may not have necessarily thought about visiting prior to seeing the trip displayed there. Our testers did mention that they would like to see more detail given per trip though, so we made changes to provide clearly labeled itineraries, travel blogs, and budget breakdowns in our final high fidelity mockups.
Chapter's final screens were designed and prototyped with Figma because it let us easily work together as a team and collaborate in real time. Prior to switching to Figma, half the team was using Adobe XD and the other half was using Sketch. Since both of these programs are not very compatible with each other, it became very hard to collaborate and give input on each other's screens. This disconnect caused us to become unhappy with the product we were creating because every team member had a different vision of the final product in mind and did not communicate these desires with the rest of the team. Figma solved this problem because we were constantly updated on each other's current progress and it allowed us to create a mobile app that felt and looked consistent on every screen.
In these final screens, we took the feedback and criticism we received from our third round of testing with our wireframes into consideration while designing. We revised Chapter's overall design to include more social UI elements, which would better allow users to share their travel experiences with others via their profiles, blogs, trip details, and the newsfeed.
A style guide was also developed to keep our color scheme and font choices uniform throughout the entire app during development. We opted for a cooler color scheme so that we could keep users focused on the content provided by the app, rather than on the actual colors themselves.
On the trending journeys screen (shown on the left) we used a tile display to show the most popular trips. We felt that it was the best way to allows travelers to discover what types of trips are the most popular with a quick glance at the images. Trending journeys are determined by which trips have had their itineraries saved the most along with the number of times they have been saved to a user's favorites.
By placing the search bar near the top of the screen, we are signaling to users that they can still search for their own trips that more closely match their desires. Conducting a simple search brings up trip results relevant to the input given along with dynamic tags that suggest to users other things to search that can potentially help them find a trip that better matches what they're looking for. Users can also see which of people they follow have also visited the same place as well, which might encourage them to also take the same trip if they know their friends have had a great experience themselves.
A user's journeys, both ones in progress and ones planned for the future, are saved in a convenient location for easy access at any time. Here travelers can access details about any of their trips, most notably their trip's itinerary and budget details. This helps to ensure that travelers are sticking to their plan and can make note of any changes that they wish to make to their trip's original plan. Users also have the ability to favorite journeys that interest them, but this feature doesn't require them to actually commit to making plans to visit that destination.
The newsfeed allows users to stay connected with their friends and to discover what they're up to by reading their travel blogs and viewing their photos. Both blog posts and photos can be shared with others, which allows travelers to document every part of their trip and share it with the ones who are interested in their experiences. Personal blogs and photos also help to inform travelers what visiting a certain destination is like, which may be hard to understand from more impersonal and less trusted sources.
From the my journeys or trending journeys screens, users can tap on the "+" floating action button to create their own customized trip if they wish to. This feature is intended for travelers who already have a set destination in mind and know what kinds of places they want to visit once they get there. They can choose where to fly from, what destinations they want to go to (multiple if desired), the initial budget they want to stick with, and even the types of accommodations and transportation they want to use while traveling. This feature ensures that travelers can create a trip that they like and aren't forced to pick only from trending journeys only.
With profiles, users are able to share all about their personal travel experiences with the people that follow them. We utilized the tile display here as well because it allows users to quickly glance through the user's journeys to discover what where they visited. Tapping on any of the journeys shown brings up the journey's details about where that user went and the experience they had. Users can also filter by the kinds of content they want to see from other users, such as their most popular journeys, their recent posts, and their favorites. Profiles allow users to stay connected with others and are meant to inspire travelers with places they may want to potentially visit in the future.
Tapping on a journey brings up the trip's overview with how long the journey was, its itinerary, the traveler's blog, its budget, and details about all of the things the traveler did while on the journey. This kind of documentation allows other users to know what things they should expect should they take the same trip or go on a similar one. Users also know that they have a safe and secure place to store details about their trip that they can come back to later to review and look at for future reference.
For example, tapping on the food & drink tab brings up all of the locations that the traveler visited while on their journey. Users can filter by the time of day to discover suggestions for restaurants with particular foods. Each place links to a more detailed page where users can find additional details such as the location's average price point, its recent reviews, and information on its location and hours. With this information conveniently provided, users can know what to expect before they even arrive at the actual restaurant. Users are also shown which of their friends have also visited the same place, which aids in establishing the establishment's credibility.
Every traveler who takes a trip manages their own budget, which can vary from person to person. Chapter makes it possible to share these details with other users so they can better estimate the amount of money they should budget for themselves if they take a similar journey in the future. This type of knowledge is invaluable and makes it easier for users to be confident that they are allocating enough money to comfortably enjoy their trip without worry. Every traveler's budget is broken down into categories, which makes it easy to sort through and easier to understand where and how money is being spent.
Viewing another traveler's itinerary for a journey gives users a breakdown of all the locations that they visited while traveling at that destination. Users are also able to save itineraries from other users, which allows them to take the same trip just as the original traveler did, or they can edit it to match the kind of experience they want. A map is also provided that documents the traveler's entire journey throughout their destination and demonstrates how many unique locations they visited as well. Every day within the itinerary lists the locations visited within a particular city or country each day so that other users know what to expect if they were to go on a similar journey themselves.
Once an itinerary is saved to a user's account, they are free to edit any part of the trip in order to fit their desires of particular places to visit or they can even alter the trip to fit within their own budget or timeline. If a user doesn’t want to visit a particular place, they can remove that place from the itinerary altogether. They can also add additional places that they want to visit as well or even edit the timeline of the trip to match the dates of when they actually want to visit that destination.
Additionally, any user is able to add updates or warnings to any itinerary in order alert other users of price increases or about avoiding a particular place because of a bad experience. This ensures that travelers don't waste their time and are aware of changes that have occurred since the original person had taken this journey. Users are also able to make better informed choices before visiting an unfamiliar place.
Since Chapter targets both experienced travelers and those that aspire to travel, the travel blogs allow users to gain insight into others' journeys and to discover what the experience is like to travel in that particular country, such as Japan. Within blogs, travelers can document the process of getting to their destination and where they visited during the duration of their stay. By sharing their experience in the way they most feel comfortable, other users can learn from them and have better information when it comes to planning their own trip to the same location.
Due to my previous experience with working in such a large group of people for a project, I already knew what to expect and how hard it can be sometimes to all come together and agree on the same design. Our team started off great, but the weeks went by, our team dynamic slowly declined and it became rather hard to communicate and express ideas freely without feeling like new ideas would be dismissed before the entire group could even begin to discuss it in a positive manner. At the end of a couple of sprints we were left with a prototype that all of us didn't agree on and ultimately we were left unsatisfied.
Although, as we all quickly became aware of this problem manifesting within our group, we took a step back and reassessed the goals we wanted to achieve with our design. We knew we lost sight of our users in the process and after we went back and looked over the feedback we received from our usability testing sessions, we were able to pinpoint exactly where we went wrong as a team. Instead of listening to our users and what they wanted, we were listening to what we wanted in an app. After we began truly listening to our users, we realized we were beginning to create an application that we not only all loved, but our users were happy with as well.
Even though we ran into many problems as a team, this entire design process helped us learn that working together as a team and letting every member give their own input was incredibly valuable in creating a product with a satisfying user experience. I also learned that speaking up and catching these types of problems early is critical in ensuring that everyone on the team is happy and feels like they're contributing in a meaningful way. I'm proud of my team for pulling together and creating something that we all were proud of in the very end.