UX UI DESIGNER & ILLUSTRATOR

Blog

General Assembly Pre homework - Case Study on travel

Research Plan I Discussion Guide I Strength and Weaknesses

 

When I chose my assignment for the pre-work, I genuinely wanted to pick a topic that was relevant and interesting to me.  

I caught the travel bug at an early age and with a mother who was once a travel agent, I was well aware that today’s modern society has shifted from primarily relying on travel agents for travel bookings.  Fast forward to 2018, the internet has given us countless resources to self-book travel, but with the never-ending number of resources, there is always room for improvement in user experience and optimization.  I began to think of the tools I use and all the positive and negative experiences I’ve encountered. To supplement my own experiences, I conducted my own research, created a list of pros and cons for the resources I used, and came up with a discussion guide for interviewees.

 


Interviews

My goal was to find interviewees who traveled international frequently.  International travel plans are more complex and the more experience these travelers have, the more I will be able to pinpoint the struggles they face.  I conducted 4 interviews with 4 well-traveled individuals. I wanted to know what websites and resources they used? What was most important to them and what good and bad experiences did they encounter when booking for lodging specifically.  

“What’s important to me is that the hotel or airbnb needs to be in a central location, close to a train and city center.  I prefer it to be walkable”
 
“I often have time constraints in my trips so definitely price and location is the deal breaker.  I love to be in a central location.”
 
“I often research things to do on trip advisor before looking for options on airbnb, wish there was an all in one stop instead of spending time browsing on google maps, trip advisors, and airbnb or hotels.com.”
 
“A bad experience is that the address location on airbnb is sometimes inaccurate and makes it even more frustrating when you’re in a foreign country.”
 

Post Interview Notes / Affinity map / feature prioritization

With my recorded interviews, I grouped all individual comments onto color-coded post-its and organized trends onto a affinity map. With a better understanding of major trends, I quickly listed every feature that I could think of to accomplish my primary goal.  These features were transferred to post-its where I arranged a feature prioritization chart of what was expected and high impact to the user. It was evident that the most important features for the users was price and location.

 

afinity mapping revised.jpg
afinity map revised.jpg


Project Goals and hypothesis

Travelers need a way to locate accurate lodging because location and description of the lodge is often lost in translation.

"We believe that by improving the accuracy of filters and location pins for travelers we will achieve an improvement in the user experience.  We will know this to be true when customers write better reviews."
 

Storyboard/Paper Prototype/ User testing and finding

y interviewees were all young adults.  All of the users mostly prefer Airbnb home stays.  Therefore, I decided to base my paper prototype on improving the user experience on the Airbnb.com website.  Airbnb does not currently have a filter for landmarks and transportation, and based on my findings, location was a key filter for users.  

I conducted 3 paper prototype tests with landmark and transportation settings under filters and wrote down my findings.  When testing, as predicted, all users filtered on price and location as top priority. One user used the transportation option and liked how the metro icon pops up on the map.  This gives her a better idea on which homes were close to the metro. Another user felt the home type option was confusing and could be broken down further. They suggested having hotel, hostel, and home. Then, from home, it could be broken down further with entire place, private, or shared.

 



Lo-Fi Wireframes

Now that I know that my paper prototype functioned correctly, it was time to create Lo-Fi wireframes and stylize them with color and type.

 

listing results.png
home page sketch wireframe.png

Picking my color palette and typography options

 

Airbnb is for everyone but from my interviews, only young and adventurous travelers use Airbnb because of the “local homestay” or “guest-house” vibe they get when traveling abroad.  Airbnb is an image-heavy site with lots of host images and google maps. With that in mind, I decided to stick with a neutral color scheme and bold modern fonts.

 

 

COLOR PALETTE AND TYPOGRAPHIC STRUCTURE OPTIONS

Artboard 1.jpg
Artboard 2.jpg

TYPOGRAPHIC STRUCTURE OPTIONS

key screen typography one.png
key screen typography 2.png
key screen typography 3.png

WIREFRAME WITH OPTION ONE TYPOGRAPHIC

prototype with visual design- home page.png
prototype with visual design- listing results.png

High fidelity clickable prototype and user testing

High fidelity clickable prototype

Once I had an idea of color scheme and type, I moved on to creating a high fidelity clickable prototype in Invision.  I prioritized the questions I wanted answers for and created scenarios to test the product.

“You are planning a trip to London with 3 friends from 2/2-2/10.  This is your very first international trip to London. You are looking for a central located private apartment with a budget of $200 a night.  You want the apartment to be close to the metro. Where do you find this information? Now that has been selected you are confident you have found the perfect place.  How do you complete your reservation?”

search results.png
home page.png
dates.png
Guest.png
HOMETYPES.png
PRICE.png
filter page.png
search results AFTER filters.png
listing selection.png
booking confirmation.jpg
 
I tested the clickable prototype with 3 well traveled users.  The priorities of these travelers did not change. Users valued price and location the most.  All users liked how the metro icon popped up on the map. This made it easier for the users to indicate how far/close they would like to stay.  Of course even with the high fidelity, I found additional ways to improve the prototype.
 

Feedback

“The metro icon is not bright enough, I didn’t even noticed it.  I love the idea but wish the icons were brighter.”
 
“Love the metro icon, what would be great too is if there were an option to show and hide metro lines on the map as well.”
 
“I wouldn’t have thought of landmarks and location options in filters.  Maybe have them on a separate button on their own in the menu page?”
 
“This isn’t on the prototype but it would be great to have email alerts for when your trip is coming up or when your selecting landmarks to have pop ups for “additional attractions” when researching.”
 
“I always book based on reviews and would love to be able to filter reviews based on newest or highest ratings.”
 
“What is the fee for under booking?  Would love to have an explanation, otherwise I feel like there are hidden fees that I am unaware of.”
 
“Do you know of Amazon’s filter option?  That could be a better way to have users filter for landmarks and transportation.  When you search for a product they have filters that pop up on the left that are broken down by age, price, types of products..etc.”  
 

Taking the feedback on my usability test, I wrote down the positive and negative feedback onto post-its to see what else can be done to improve the user experience.  I had more feedback than I expected, but based on the test, I received valuable information that will help improve the final prototype. Firstly, I learned it was valuable to make sure the high fidelity prototype needs to be as realistic as possible.  Secondly, I learned that color is very important and icons that may look obvious to you may not look obvious to the user. Lastly, I found that user testing was incredibly valuable to find ways to improve the design.

usabinlity test relfection revised.jpg
Loretta SoComment