An UX design project using AdobeXD and InVision.
I strongly believe that travel is more than just seeing sights. When we plan a trip we spend most of our time in figuring out Where to go? When to go? How to experience like a local?
Usually planning an itinerary is a tedious process. Finding the best time to visit a place, discovering travel routes with reduced transit time, booking tickets and checking travel guidelines is wearisome.
Imagine if we have an app where you can plan your trip with a local expert. Wouldn’t that be great?
I decided to come up with a solution to this problem. I’m excited to take you through the entire design process about the research, analysis, improvements based on user testing feedback, design aspects that worked or did not work.
Step 1: Explore
Background
Here I have divided the travel timeline into 6 stages:
1) Planning,
2) Pre-Boarding,
3) Boarding,
4) Transit,
5) Arrival and
6) Post Arrival.
As Aristotle once said “A job well begun is half done”. Putting together the frustrations in each stage, if planning and pre-boarding stages are eased, then the entire trip would be as rewarding as it is intended to be.
Most important functionality of the app would be to:
- Plan an itinerary: The user should be able to personalize their travel plan with a local expert
- Find and book a local guide
- Book accommodations and flights
- Manage bookings
Target Audience:
This prototype/design is based on the kind of users who would like to
- manage their entire trip in a single application
- customize their itinerary with a local guide
- travel with a local guide
- experience local culture
Analysis of user expectation
“Focal point” — what is it really?
Let us walk through the information we were able to gather from our pool of 20+ test users. Upon peering through the responses from the testers, I strongly believe that the following are the most important details which users focus on.
Due to the cost and time constraints most travelers choose a short trip, the second largest piece of the pie belongs to the business travelers.
From the chart, it is apparent that half of the users are focused on the apps functionality and the other half are focused on the outcome of using this particular design of the app, which is the local experience and how they experience it 😊.
Step 2: Define
Affinity Map
If we perform a thematic analysis on the feedback gathered from the pilot users, we can arrive at the below affinity map. This clearly shows that the options to customize, manage and have some semblance of feeling like a local during your trip are the most important features sought after by the users. The other major feature any user would look for are the reviews from fellow travelers.
Key Insights
If you look for a MVP (Minimum Viable Product), we look to group our needs into some high-level categories.
Must have:
- Customize itinerary with a local host
- Experience authentic local culture
- Manage flight, hotel, local host bookings
- Communicate with the local host directly
- Find Certified local guide
- Customer support — more power to the user if we could be available 24/7
Good to have:
- Sharing our travel story and pictures
- Language translator
- Travel alerts
Not necessary:
- Special offers
- Book cab
- Suggestions
Personas
I worked on creating user personas for the primary and secondary target groups.
Existing Platforms
To gain an idea about what would work, and how to make it work. I looked into the existing travel application in the market. Here is what I found:
Analysis of the existing major platforms for travel planning
I could find travel apps to make booking, to find a local guide, few of them to book events during their travel. This study helped me understand my focus point.
Step 3:Ideate
User Flow
User flow is the foundation to an application, which should be carefully designed to make the app experience easy and fun to use, by designing a clutter-free UI. It illustrates how a user would traverse through the app to complete a task.
The screens are arranged to preserve the order of MVP features:
- App- onboarding
- Flight & hotel booking
- Find/book local host
- Inbox
- Manage trip
- Profile
Lo-fi wireframe
Step 4: Prototype
Tools used: Adobe XD, Adobe Photoshop, Adobe Spark, InVision Studio
Also, I wanted to test each version of my prototype and make modifications from the user testing feedback.
In the effort of finetuning the application, the feedback from the user tests were used to adjust the design for improved usage with minimal impact to functionality. I am thankful for the free templates available on the internet, which was rich enough for me to customize with Adobe XD and InVision Studio, one of them is UI Store.
Just to add, even though Adobe XD could have been used for the entire prototype, I preferred using InVision Studio for certain features which seemed intuitive to me.
Step 5:Testing
Platform: usertesting.com
Each version of the prototype went through a set of user tests. The main observation from them were — the users were able to login to the application and understand the basic functionality of the application. Secondly, the navigation component needed improvement. Questions for the participants were carefully designed to get the most out of the user’s expectation.
User Test Insights
Version 1.2 was designed from the feedback from user test 1.
Top customer Insights — What worked
More than half of the testers were able to complete the following:
A. Login — successfully login, sign up and reset password.
B. Book flights,
C. Book hotel room,
D. Manage bookings.
About half of the testers were able to:
E. Use My Profile — navigate to the profile screen, check privacy policy, update payment details and were able to complete their task,
F. Bookmark — navigate to the profile screen and check bookmarks.
Top customer Insights — What didn’t work
More than half of the testers :
1. Ambiguity — were confused between the Profile and Find Locals icon.
2. Find Locals — skipped reading the information about the Find Locals feature. Users had trouble in navigating and understanding how Find Locals feature worked.
3. Locals Description — wanted to know in detail about the offers, itinerary, and pricing. They didn’t find Contact Locals button to be helpful.
Revision based on recommendation
Based on the observations from the test results, these suggestions were listed.
- Icon: modify the Find Locals icon to distinguish it from the Profile icon.
- Navigation: Tool tips can be provided to avoid the confusing situations in the navigation process.
- Find Local Landing Page — Illustrations can be added to engage the user in the screen allowing them to read the instructions.
- Filter Category — flexibility in choosing date range.
- Locals Description — Descriptions about locals can be improved by including but not limited to offers, and prep.
- Button — re-position to highlight
From the feedback from the user testing final design looked like:
Future Improvements
- Broaden the scope of local experience
- Options to collaborate among the travel party
- Search options to improvise travel with your pet
- Ability to plot an interactive map
I’d love to hear about your design experience in the comments.
