Travel Chats
Travel Experts for Your Travel Needs
Travel Chats is a mobile application that connects travelers to travel experts. The goal is to help travelers get the information they need quickly to save time planning trips. 
Travel Chats was created as a case study for CareerFoundry’s UX Design program. 

Timeline: 4 months 
Role: UX Designer
Tools: Adobe XD, Balsamiq, Optimal Workshop, UsabilityHub, Omnigraffle
Methodology: I used the design thinking process throughout the course of this project. The 6 stages of design thinking are empathize, define, ideate, prototype, test, and implement.  

Problem Statement:
Travelers need a way to quickly and efficiently contact a travel expert for advice because they want to save time planning their trips.

Design an app that allows users to easily connect with travel experts that can best suit their travel needs. The app should clearly state the expert’s qualifications, have a clear payment system, simple booking system, and user reviews to build trust.

Part 1: Empathize

Competitive Research: Scoping out products already out in the market is useful in order to analyze what works and what doesn’t. Having that base of knowledge allows me to use the successes and failures of my competitors to my advantage. 
I completed a SWOT analysis of another travel app called TripScout. To see a more in-depth competitive analysis, click here. 
I also created a Business Requirements Document, or BRD, that outlines the goals for this app.
User Research: Knowing what people’s habits, pain points, wants, and needs are is vital for designing the best solutions to improve their experiences and make their lives better. 
I sent out user surveys using Google Forms. I also interviewed 4 people by phone that were part of my target age group and travel frequently.
I used affinity mapping to organize all the information. I created 8 relevant categories and grouped the comments into those categories. Here are the “Trust” and “Pain Points” categories:
Part 2: Define 

Based on my research, I developed User Personas to help me connect to the users in a more personal way and make sure the user is always at the center of the design process. This was my first attempt at creating personas. It was hard for me to remember to base the personalities on the user research because I had so much fun creating them, but I believe I was able to bring them to life without going completely overboard.

I ended up with Laila, “The Single Mother”, Nick, “The Budgeter”, and Sadie, “The Spontaneous Traveler”. They have completely different backgrounds and personalities, but they are all connected by their love of traveling. Below are the personas for Laila and Nick:
The next step was creating journey maps. Journey mapping documents the steps a user experiences while completing a specific goal. It includes feelings and emotions the users might have while completing each step.
These are the journey maps I created for booking a call and adding a trip:
I determined the 3 most important features of the app and created simple task flows for those features. The 3 features are:​​​​​​​
1. Book a call with an expert
2. Rate and review an expert
3. Add a trip

After determining these features, I created task flows.
Part 3: Ideate

Now that the beginning stages of the most important features of the app were mapped out, I created a sitemap. Sitemaps provide the structure and relationships between the different sections of the app in order to see how they work as a whole. I started off with a very simple sitemap: 
I did a card sorting exercise using Optimal Workshop to test my decisions. 6 participants grouped cards into categories that they thought belonged together. This didn't turn out well for me. No one was able to group the main categories the way I intended. I think the issue was I should've given the participants more context about the app before the exercise. ​​​​​​​

I went back to the user research and revised the sitemap, taking a closer look at what the users wanted. I then ran a second card sorting exercise, and the results were much closer to what I had anticipated. Here is the updated version of the sitemap:
Based on the sitemap, I started drafting wireframes, which are the basic outline of how a page is going to look. They focus on the placement of the content and flow of the app rather than on the visual details. I used pen and paper for this because it is fast and easy to create and edit or start over if anything goes wrong.  

These are wireframe sketches for booking a call with an expert:
Part 4: Prototype​​​​​​​

After the wireframes were complete, I added some functionality to the wireframes to create a prototype, a preliminary model of how the app is supposed to function. I started with low-fidelity prototypes then worked my way up to mid-fidelity and high-fidelity prototypes.

Here is the low-fidelity prototype for booking a call:
I used Balsamiq for the mid-fidelity prototype. This was my first attempt at creating digital wireframes and prototypes. Balsamiq was a great program to start with because it was easy to use and I was able to pick it up quickly. I ended up having a great time with the creative process. 

Here is the mid-fidelity prototype for booking a call:
The high-fidelity prototype was made with Adobe XD. It is mostly greyscale with hints of color for emphasis, but the goal was still focusing on the functionality. 
Part 5: Test

Usability Testing was conducted over Zoom and in person to test whether my prototype worked and if there were any issues with it. I interviewed 6 people and asked them to complete 4 different tasks in my app. The feedback I received was very helpful. To see my usability test script, click here.

I did another round of affinity mapping to gather all the information in one place and then created a rainbow spreadsheet to prioritize which issues needed the most attention:
Using Jakob Nielsen’s severity rating scale for usability problems to prioritize the issues, I made suggestions for possible changes based on the comments I received:
After working on the suggested changes, I asked other designers to critique my work to get additional feedback. The comments from the designers were very helpful and made a huge difference right away. Here were two examples of comments that I received: 
Part 6: Implement

I started to focus more on the UI and the visual aspects. I created design documentation to hand off to developers. 
After creating a simple design style guide, I began focusing on the grid layout, emotional design, and designing for accessibility so the app is inclusive for everyone.
I also created a demo video to show how the 3 main features work:​​​​​​​

What went well: I believe I was able to complete my goal through this whole design process. I had little issues here and there, but I did not come across any major roadblocks. It was exciting to see a design come to fruition from an intangible concept to a physical, material solution.

What didn't go well: Sometimes I got a little sidetracked by focusing too much on the small details and not the overall usability of the app. My imagination also ran a bit too much for some parts of the app and I had to rein myself in and remember to focus on what the users wanted. I also got stuck at some points because I either boxed myself in or could not decide what to do because there were so many possibilities. These are all aspects I believe will get better the more I practice and do this process. 

What can be improved: There are several areas that I would like to focus on in the future for this app. I would like to polish the UI of the app. Once I learn the UI basics, I will come back and tidy up the designs and maybe create some of my own.
I would also like to create more of the functionality of the app. I focused on the three main tasks of the app and the onboarding for this project, but I would like to expand the app until it is the way I envisioned it so it has a more complete feel and users can get a real sense of what it is all about.

You may also like

Back to Top