Tripplanner is the app for travelers. It gives users the versatility to plan trips, share itineraries, find packing lists & explore secret locations all in one spot. The goal is to design a brand, logo, and an app that aids users in their search for fun and different things to do.
Despite being familiar with flight apps, I have never used an app to plan an entire trip. I wanted to learn more about potential users and what features users prefer. I recruited 5 participants for user interviews. I focused on the users, their needs, pain points and goals. Some of the things I discovered through the surveys are:
I reviewed competitors to understand their design. I learned about which features were successful through the reviews. I broke down the main features and used that as a guide to see what were the strongest. I learned that while a lot of companies included things to do, none really showed itineraries. The surveys showed me that users wished for curated plans or itineraries they can follow.
Most end users are 18-32 years old. I made a persona for Rebecca and Marcus, both are young travellers who want to learn explore on a budget. Most users are afraid of finding ways to get around and accommodations that fit their needs.
To better understand how to help Marcus find what he needs, I broke down common frustrations a user would feel. Marcus is frustrated about scheduling transportation. It is specially difficult in another country/language.
Rebecca is someone who is worried about finding different activities and hitting everything on their list. Having an itinerary with schedules on top activities to do may help in this dilemma. The recommendations from other users aids in their decision making.
Creating these personas aids in my understanding that users want help in subtle ways. Instead of being told exactly what to do, they want ideas.
I made a step by step of the user's approach to the app. This showed me how to define the challenge and make sure my solutions are fitting. I especially learned how to include relevant information to the user and make use of the user's feedback. Using their feedback is essential because it can improve the quality of the suggestions.
Now with a clearer understanding of the user's needs. I am moving on to understanding the goals of the app as well as the users and their demographics.
This road map helped clarify what goals and objectives are needed. It also narrowed down the focus and solified what I learned about the users and their needs.
Once I gathered the information from the users about their pain points, wants, and needs I moved into drawing out the paths for them. I wanted to learn more about the paths Rebecca and Marcus would take throughout the app. The road map gave me a solid idea of the apps' goals, but the flows are going to aid in the layout of the page.
This user flow identified where to place the login and sign up, choices. Most importantly, it taught me how much information I should give out before asking the user to register/log in. I want the user to be able to explore to see if this app fits their needs. One frustrating aspects of apps these days is the pressure to sign up. I want to give users a chance to play with the app, and then give them a reason to sign up.
%402x.png)
Since the application serves both trip researchers and trip sharers, I also constructed this task flow. This helps me understand the goals of each function. This task flow focuses on a user searching for a future trip.
For this task flow, I omitted the sign up process. I wanted to solve the adding itinerary problem to find a solutions that felt chronological and natural. One of the challenges I faced through this part was adding many activities to one day. Showing it in a task flow was challenging so I had to white board it a lot until I came to a solution that makes sense.
%402x%20(1).png)
The task flow for viewing a saved itinerary is slightly easier to make. This task flow shows the best approach for researching an itinerary. I looked for ways to receive feedback on itineraries. Some itineraries may not be as functional as others so leaving a star review for that itinerary can tell other users if it was useful or not.
%402x.png)
Making use of everything I learned through the research and information architecture, I sketched out some ideas on Excalidraw.
I wanted to show ideas for itineraries in the search section because I want users to get other inspiration too. The option for number of days started out as a drop down, but that felt too generic. I wanted to give users a more exciting way to count the days they will be vacationing. I also wanted to use filters to give personalized results.
Once I finished sketching. I created these mid-fidelity wireframes on Whimsical. I can now see how the spaces fit.
The back arrow felt like it is in the wrong place, so I worked with it in later designs to find the most appropriate spaces for it. I also moved my filter by activities towards the middle. As more tags get added from itinerary creators, more filters can be added as well. In the sketches, there was a lot of white space beneath it, so I moved the filters towards the middle and added a color to the active ones and kept inactive filters grayed out.
I also removed some of the options from the bottom to make it less overwhelming for users. These wireframes along with other screens helped me understand the way users would be interacting with Tripplanner.
%402x.png)
Based on users’ feedback and much testing and iterating, I created the following design. I changed a lot of things from the mid-fidelity design. These high fidelity wireframes show the main screens the users, Rebecca and Marcus, will see when starting the project. Giving them the option to filter their search lets them find what they need quicker. All of the data from the research was integrated and used toward the usability of this design.
For usability testing I asked three users to complete a task of searching through the app for a specific city. From this I learned that the main arrow going back was not in the best place, and that some of the pages felt empty with so much white space in between. I went over this feedback and found that adding graphics helps enhance the experience. This gave the design more fluidity.
I implemented using suggestions in the dropdown menu, and filling in the cities available. It gave users a chance to quickly pick their city rather than typing in a very long, or difficult to spell names.
I would really love to add a location sharing feature as suggested by one the users. I think this could enhance the experience.
If you made it this far, check out my other projects below.
.png)