ReadyToGo Travel App design

Time Scope:
Three weeks
Members:
Thanh (me)
My Role:
UX / UI Designer
Tools:
Miro, Figma, photoshop.
Deliverables:
High-fidelity figma prototype, presentation slide deck.

For this project, each person were tasks to create a travel app that that can benefit others while traveling during post-COVID time. ReadyToGo is an app that help travelers keep track of what they need to bring in order to have a successful and stress-free travel by providing useful features that ensures traveler an easier time preparing for their trip!

Introducing Lawrence
A 30 years old Industrial Designer from San Jose. Lawrence love to travel but he can be very indecisive about what he need to bring on his trip. He wants a stress-free vacation without having to worry about forgetting his necessity. Due to his indecisiveness he prefers all of his information to be in one place.
Given the fact that this was my first project as a UX designer, I really didn't understand how proto-personas plays into the research portion of UX. However, when trying to come up with interview questions without a proto-persona to based on was ALOT harder. Then when i finally went back and created a proto-persona, I finally understand the importance of it. It was easier to come up with interview questions because I know what my potential target audience is.

Research

Based on Lawrence I was able to come up with 15 questions that i used to interview 5 individuals who have traveling experience in order to understand their preparation process, how long it takes for them to prepare and how they cope when forgetting something important. With the data collected, I group them using an affinity diagram to understand their topic in a broader sense.

Affinitiy Diagram
By grouping the data that I've found from their interview, I was able to deduct some key points:
  • Individuals like to write lists of things that they need to do and bring before their trip.
  • People often give themselves 3weeks to a month in order to prepare for their trip.
  • People worse fear would be getting sick in a foreign country.
This part was quite challenging for me because I started without a persona. I drafted my first 10 questions and realized they didn't connect to the topic so i had to go back to the drawing board and figure out what I am missing. Fortunately, once i figured out the problem, the interview went by very smoothly and I was able to collect many important data from it.

Introducing Daisy

Daisy lives a hectic lifestyle, doesn’t have the time nor patience to sit through a prep session for her trip. Therefore, she needs a way to help her prepare as quickly and easily as possible because wants to enjoy every moment of her travel and not having to worry about forgetting necessities. 

Problem Statement

Preparing for a trip can sometimes be stressful when travelers are forgetful because they are fearful of forgetting important documents and necessary items which will make their travel experience less enjoyable. How might we help forgetful travelers with limited travel time stay on track with what they need to bring so that they can be as prepared as possible, making their trip more comfortable and stress-free by eliminating the stuff that they need to remember and providing them the help that they need? We believe that making an app that helps forgetful travelers organize their priority and essentials will make their preparation for travel easier so they can enjoy themselves on their trip.

Ideation

The next step is to construct a user journey for daisy to get a better understanding of her problem and how our app can be design to help her with her travels.

As we can see from Daisy's journey, ReadyToGo not only provides information on the traveler's destination but it will also allow user to create their own list on necessities with suggestive items for indecisive travelers as well as an alarm system that will remind user of a specific item on the day of travels.
Constructing Daisy's journey was a smooth process for me given the abundance amount of data that I have collected. Understanding her journey provide deeper understanding of what ReadyToGo needs to provide to its user.

User Flow

Starting out my first user flow, I knew I needed a starting screen that gives instruction to the user on how the app function and the pages that follows are build to give new users the opportunity to explore around before deciding on registering, this would give user the opportunities to try out the app before making a decision.
There were various iterations that this user flow went through. The first few iterations were quite clunky and doesn't flow together. With two iterations I was fortunately enough, I was able to add the missing steps to made it more versatile.

Prototype

Thanks to the extensive user flow that I've made, it was easy for me to quickly sketch out all the basic pages that the page will need by following it carefully.
I wanted to design ReadyToGo as an app that not only allow users to keep a digital list of necessary items but also serves an app that provide general information about all things travel. I hope that by using the app, people will get inspired to travel by looking at cool information about the all the amazing place they could travel go. The app seems straightforward but when I started doing the user grow it just kept growing and growing.

First iteration

I did some testing with the sketches I've made with invision and took my finding to figma and create me first prototype. The four panels below are the essential panels are the app.

  • The homepage will provide users with popular place that has been travel or user can also use it to search the specific place that they want to visit. As the click on their option it will bring them to the second page which allow users to look at general information about their destination.
  • Once the user decide on a place. They can press on the "make a list" option that would bring them to the list function with suggested items based on the user input the trip date and activities.
  • Lastly, if the user is able to save the list if they have an account or they can create one. With an account, users are able to store their lists inside the profile portion.
Working on my first prototype iteration as a new UX designer is very fun for me. I didn't know that you were supposed to start off in grayscale, so I went ahead and did my iteration in the color blue. Luckily, blue seems to be a very appropriate for travel as it is a calm color that can make people feel at ease while searching for information.

Second iteration

The second iteration of the prototype were dedicated to creating and improving the supporting pages that would flushed out more functions of the app and here is what I've added/fixed:
  • First a menu list that shows the added items the user have chosen so far and also a red number indication to show draw more attention to the list button.
  • Second is the option to edit the list so users can increase/decrease the amount of items they want on the list or just competely remove it.
  • Third, I've added a searching screen that allow user to search for their specific destination using the homepage search button or if the user want to add a list from their profile page it will brings them search to the search page.
  • Lastly, I added a confirmation page for list deletion for a way of error checking.
My biggest struggle in this part of the project is watching the scope of my work. I kept on wanting to flush out all the functions I want in the app but deadline was closing in so I had to stick with the current feature I have and improve upon it in the future.

Final Iteration

With the second iteration completed, my app felt much more fluid and I was able to do some more testing before the final iteration. Through my last test, I've found that there were a major problem my color palette. Everything were all blue which was confusing confusion between some of the options, testers were also missing some of the important functions of the app. These were some things I've improved in the final iterations:
  • Added images throughout the app and png's for list items.
  • Change the color of some important buttons of the app to yellow in order to draw more attention such as "ADD" "removed" and list button.
  • Added icons to for the bottom navigation and iOS elements.

In conclusion...

Designing an app that is responsible for making a list sound really simple, however, it isn’t as simple as I have imagined. In order to making a suggestive list as accurate as possible I needed to collecting information from the user’s travel through my app, in a way that doesn’t overwhelm them. The most I’ve struggled with was probably prototyping because in order to show the ability to add multiple items to the list, multiple boards have to be created with different item combination and different amounts which can cause a lot of confusion when a new board is made because then I’ll have to relink everything to that board and link them correctly. If There is more time in the future, I’d like to work more on the design aspect of the app and make the prototype a lot more functional.

View Project 1-
MercyHouse Web DesignTry out ReadyToGo travel appDesign!View Project 3-
BEAU