TRIPZ
A Trip Planning Mobile Application
Taking a trip is meant to be fun but the number of hours that go into planning an itinerary for a trip is stressful and far from fun. This mobile application will aim to make the process simpler, pragmatic and fun. This is a solo project I worked on at Springboard UX Design Workshop.
I approached the design through user research, before developing the design. For this project my first step at research was a competitive heuristic analysis based on Nielson Norman's Heuristic Principles. I compared the apps Triphobo, Tripsee and Tripscope. This helped me
-
understand what the users actually need,
-
what works and doesn't work from the user's point of view,
-
identify usability problems in the interface and
-
learn from competition.
I then conducted surveys and user interviews, listening to their needs and analysing the information, I found that the pain points in the itinerary planning process and also the positive and negative parts of the experience. I also used empathy maps and personas to document these "pain points", allowing me to focus my attention on the user needs.
Empathy Maps
Personas
Site Map
Making user stories for an MVP of Tripz based on the research helped me sketch a site map to track each task my users wanted to perform at each step of the planning process. This enabled me to quickly reference what was needed for each page, and helped visualise which tasks were page specific and which were needed at multiple steps of the process. I often found myself sketching over it to make slight adjustments.
User Flow
After a site plan I moved on to make user flow diagrams to help me recognise all the step by step elements required to help the users accomplish their main objective. The user flow diagrams proved to be a skeleton for wireframing, my favourite part of this entire design process.
Wireframes
Did I tell you this is my favourite part. I love wireframing and prototyping. Creating wireframes for each user flow helped in visualising the user interface to give a sense of how the elements will be placed on the page without getting distracted by the use of colors, graphics and or typography. Below is the wireframe for the first user flow diagram which represents a first time user going through the process of planning an itinerary for a trip he has to take.
Prototyping & User Testing
Using the wireframes I created a interactive low-fid prototype using InVision. Isn't InVision brilliant? It made me love prototyping. I used the prototype for user testing by giving the users tasks to complete. First time users were able to make it through the process without much trouble. It was exciting to see that they were able to complete the tasks with ease. Overall the testing went really well with users able to accomplish the given tasks without any issues. Users were very forthcoming with their ideas regarding how they think it should work and function to serve them best. Four users tested the Mobile App, two from each persona type (Paul - The young professional and Donna - The working mom) . They all are medium to heavy Internet users. With this information I moved forward with further iteration.
Style Guides
Style guides help in maintaining consistency and also if I plan on developing this app then it will certainly help the developers stick maintain the same visual appeal as when designed.
Hi-fid Prototypes & Iterations
These are the final visual designs, which are the product of many iterations of the MVP (task 1 wireframe). At each step and with each user I learned new and valuable information that allowed me to clarify and streamline the process. Research, analyze, design, test, design, test.....
User can either Sign-in or Sign-up
Sign- in page
User starts his planning process in this page.
On filling in the trip details and a travel partner, the user can begin the planning.
User can select the category.
User can select the attractions based on reviews and ratings. Once done the user can click on 'go to itinerary' cta to review the itinerary created.
On reviewing the itinerary the user has the option to edit the position of each attraction within the day or between different days in the itinerary.
On the final day of the itinerary the user can save the itinerary.
Other tasks the application can perform...
On selecting 'profile' from the bottom tab bar, and 'trips from the top tab bar the user can view all the trips he has taken.
On selecting 'profile' from the bottom tab bar, and 'photos' from the top tab bar the user can view photos of his trips.
On selecting 'profile' from the bottom tab bar, and 'bucket list' from the top tab bar the user can his bucket list. User can also add places to his bucket list.
On selecting 'friends' from the bottom tab bar the user can view profiles of all his friends he is following. The user can also search for friends to follow.
On selecting 'itinerary' from the bottom tab bar the user can view his current itinerary. On clicking the settings icon the user is taken to the itinerary review mode where he can edit the itinerary.