Designing a Travel itinerary app
For this case study, I simulated the process of creating an app from the first stages of UX research through the final engineer handoff. You can follow my journey below.
Google Travel
For my course long project with Udacity, I created a Travel app with a hypothetical Google collaboration. The basic concept for this app is to be a one stop app for all your travel planning needs. This app can be used for everything from storing plane tickets to exploring ideas for things to do at your destination. You can see the prototype for the final project here. Keep scrolling to follow the app from ideation to engineer handoff.
Step 1: Identifying a challenge
A 2019 article from the Guardian stated that global tourism has hit record highs in recent years. With 1.4 billion people traveling internationally every year, I wondered if their needs when planning trips were being met.
Through my early research and user interviews, I found that there was a lack of resources when it came to organizing trip itineraries.
I set out to design an app that is made for international travelers who long for a more organized and inspired approach when it comes to planning their trip.
Step 2: Discovery, research, analysis
I began my discovery process by interviewing a small sample size of international travelers in order to discover their trip planning habits and pain points they come across when organizing their trip itineraries.
Using Miro, I synthesized key insights and revelations and had 2 major takeaways:
1. Every single user I interviewed used Google in some capacity when planning their trip.
2. 3 out of 5 travelers wished they had planned better.
Step 3: Design concepts & wire framing
With the need for our app validated and a vision for what it might look like beginning to form, I began to sketch out some wireframes.
Since all of our users already used Google in some aspect to plan their trip, it made sense that we would team up with Google to create our app.
With this in mind, I decided to mirror what users see in other Google experiences like Google Maps and Google Flights.
For the section of our app where users are organizing their ideas for their trips and all their important itinerary documents, I had the idea to organize sections of their trip like Pinterest boards. I thought this would be a good way to arrange the different parts of their trip in a way that was both easy to navigate and visually pleasing. My thinking behind this was that it also might make our users feel more inspired and excited about planning their trip. This is the idea I decided to iterate on when moving forward to my next steps.
Step 4: Building a
low fidelity prototype
With wireframes in hand, I took to Figma to create a low fidelity prototype of the app experience. By starting out with the low fidelity prototype, I was able to focus solely on functionality with my first round of usability testing. During these tests, I discovered that my sample size of users did not know what the top plus button on the individual trip pages meant. I decided to add text below the button to make its purpose more clear that users were being given the option to add a fellow traveler to their trip.
Step 5: Designing a
high fidelity prototype
After a quick round of usability testing, I took my initial concept and fleshed it out into a high fidelity clickable prototype.
You can view that prototype here.
Step 6: Validation, Usability, Feedback
I then ran this prototype through a series of tests to see how different features were perceived by our users.
First: I utilized WebAim to make sure the color combos I used in my app passed a color contrast test. They failed initial tests so I reworked my color scheme to make the text within my app more readable.
Second: I conducted a usability study within Lookback to gain some insight into how users would interact with the travel app. Through this process, I learned that users were having issues with some of the links in the app because they did not realize they were clickable. To remedy this, I added a color change when the links were hovered over in order to give better indication that they were interactive buttons.
Step 7
For my final step, I created a style guide that listed all the colors, fonts, and icons that were utilized and prepared the app for engineer handoff using Zeplin. I then built a Keynote presentation detailing my research, key findings, and design recommendations to be presented to key stakeholders.
Further Iterations
After submitting my final project, like any good designer I went back to my project to look for areas of my app that could be improved upon. I made the following changes:
1. I updated the color scheme and fonts to better mimic Google. I wanted the app to look and feel more realistic to how it would look if it was genuinely developed by Google.
2. I wasn’t happy with the look of the main view. I realized the solution I came up with during my project for making the buttons look more clickable (adding a color change when the mouse hovered over them) would not be a workable solution within a mobile application, so I went back to the drawing board. I added rounded corners and drop shadows to make the buttons appear more clickable and added more options near the bottom of the page in order to give the app a more sophisticated, modern look.
