Intrepid Travel Website

Transcription

1 Intrepid Travel Website View Prototype Designing a solution for users to book trips based on availability, searching in maps and apply filters Memo Martin UX Designer 2 week team design sprint Team members: C. J. Matthews Kha Nguyen Stephanie Gama

2 Introduction Intrepid s website offers group trips and adventures around the world and one of its biggest problems is that customers want to be able to choose destinations based on their vacation time availability. Overview For the development of this project we chose to analyze the features of four competitor websites, we did interviews, surveys and contextual inquiries, as well as worked on the creation of affinity maps, personas, problem statements, solutions, information architecture, paper prototypes and features, ending with an interactive prototype. Research The four competitors that we chose to use on our competitiive (feature) analysis were: FEATURES LONEY PLANET PEREGRINE HOME PAGE Hero Image Responsible Travel Search Bar Shopping Cart Featured Products Sales/Promotions Side Navigation Top Navigation Bar Shop by categories Login/Create Account SEARCH RESULTS Filter Sort Rating PRODUCT PAGE Quantity Selection Trip Details Reviews Group Size Multiple Product Photos Itineraries Similar Products Description FAQS RESPONSIVE DESIGN Responsive design Feature Analysis GO AHEAD TOURS ADVENTURE LINK INTREPID KEY Have Don't have Key takeaways Intrepid has about 75% of the features that the competitors offer on their websites, although it lacks some of the main navigation components There are no filters to customize some aspects of the trip The group size is not selectable There is no offer for similar products at the results page There is no quantity selection

3 User research & Affinity diagram For this project, we conducted a total of 5 interviews, 4 contextual interviews and posted a survey with 30 responses that helped us understand better the needs, and facilitated the creation of an affinity diagram that represented the groups better. Key takeaways from user research People needed to search for trips faster than what the current navigation offers Searching by time availability was a big part of the experience The booking experience for the trip should be easier

4 Key takeaways from the affinity diagram Most travelers are budget conscious Reviews and other help are of great importance Travel habits and customization are related Personas & Problem statements The research allowed us to create two main personas: Adventurous Anita (primary) and Traveler Travis (secondary). For this project, we designed a solution for Anita. Problem statement As a group traveler, I want to discover different places and get inspired so that I will be able to go with all my friends. Traveler Travis The Solo Explorer 34 years old Likes to experience other cultures and mingle with the locals Problem statement As a solo traveler, I want to be able to search for trips based on my availability as well as insightful information about the destination so that I can enjoy a more immersive experience. Goals Book a trip for his next vacation Book the destination based on the length of his vacation Find a trip that will provide him with an immersive experience I went to India by myself and learned so much about their culture that I m coming back as soon as I can for a more immersive experience! Traveler Travis has a new with a strict vacation policy for the first year. He has 10 days available and he wants to book a trip to go back to India, because he loves the culture and he wants to make the most out of this experience. Needs Find deals and offers to save some money Find all the information available about the destination A detailed itinerary to make the most out of his time off Frustrations Difficulty tailoring a trip to his time constrains Difficulty booking a trip that accommodates his traveling habits

5 Personas The solution & Storyboard (Before) Create a better way for travelers to explore destinations, empowering them to find where they want to go quickly and book the trip based on their availability.

6 Personas The solution & Storyboard (After) Create a better way for travelers to explore destinations, empowering them to find where they want to go quickly and book the trip based on their availability.

7 Minimum viable product We created a diagram for this website that would have essential characteristics, considering the time and budget constrains, hoping to solve Intrepid Travel s problem for its users. User flow We took the research and analysis to create an easy user flow that would facilitate the search and customization of trips.

8 Site Map Site Map Creating a site map as part of the browsing experience was crucial to be able to present all the options to the user in a simplified way.

9 Design and testing Sketching We proceeded to ideate and sketch based on our research and worked with a few iterations on our design that were tested along the way. On the first iteration we used a whiteboard to quickly create ideas that would make the experience easier, as well as items on a feature page that would later be tested when moved to paper.

10 Design and testing 2nd iteration We created a paper prototype to help us test the expected funtionality as well as features for the website. On the second iteration we learned that some of the functionality and navigation elements were not recognized easily. This paper prototype also allowed us to perform an A/B testing on the feature page to observe how would the users react to the navigation, as we located in the form of filters on the left side (1) or below in the form of tabs (2). We learned that, for usability purposes, the filters on the left are more familiar. View Prototype

11 Interactive digital prototype Medium fidelity Moving to a medium fidelity digital prototype allowed us to observe how the navigation components were used during the test. The medium fidelity digital prototype already contained what would be the last set of navigation and features from our prevcious test results. We were able to achieve consistency, similarity and recognition on this prototype View Prototype

12 Final prototype We incorporated all the features and navigation elements to create a digital prototype for Intrepid Travel, where we applied design guidelines to enrich the visual experience and some final touch ups. BEFORE AFTER COLOR PALETTE USES EXAMPLES HEX: #DCE7ED RGB: 220:231:237 HEX: #374E5D RGB: 55:78:93 Background sections Separators Main nav background Footer Menu 1 Menu 2 Menu 3 We were able to achieve consistency, similarity and recognition on this prototype! HEX: #2D6AC0 RGB: 45:106:192 HEX: #C93F58 RGB: 201:63:88 Buttons, selectors Links Buttons, Deals Accent lines Button Protons Oxygen Lumbersexual coffee tacos intelligentsia sartorial 3 wolf moon tote bag umami, keytar semiotics kombucha forage typewriter. Button 30% OFF STUFF View Prototype HEX: #EDAF5F RGB: 237:175:95 Accent lines Separators

13 Conclusion Working on a project where we had to add features and streamline user flows proved to be a great learning experience, having to keep in mind at all times the current business model and trying to avoid disrupting it. We also learned the importance of A/B testing for features that seemed interesting, but in the long run were not received with enthusiasm by our testing subjects. In general, it really helped us to have multiple iterations and testing for usability to learn how, a subject like travel, has so many characteristics that have to be kept as close to the real world tasks as possible, to make the whole experience enjoyable! Next steps Enhance filters and information architecture A/B test nice to have features Explore new user controls, such as customizable trips and departure locations Addition of flight and hotel booking Price alerts on trips