A novel travel and experience booking website of the future.
December 1, 2020
"eon" has become the first company to be given approval to offer a time travelling experience to the public and are in need of a travel booking website.
- Design eon’s new brand and set up an e-commerce responsive website so they can sell travel packages and tickets to different times.
- Make the selling of the tickets as easy as possible
- Discover the best way to display the trip
- Highlighting what’s special about each time and space
- Classify or categorize trips to make it easier for people to find the one that they like best
- Allow customers to read more about the options and make a purchase decision
- Understand the different kinds of experiences sought after during travel
- Explore how users choose their itineraries
- Examine the effectiveness of existing travel booking services
- Research Plan
- Competitive Analysis
- Research Findings
- Empathy Map
- Project Goals
- When booking a vacation, do people know beforehand where they want to go or do they explore options first?
- What factors influence the decision for choosing an itinerary (including flight, hotel, etc.)?
- What experiences do people enjoy or look forward to when traveling to a desired location?
- What are user’s experiences with and perceptions of travel agencies?
- What are the pain points of booking a travel experience? (process, missing features)
- How do people approach the booking process and what are the things they consider?
I was able to conduct one-on-one interviews with three participants, and had a survey asking about types of booking websites used and booking habits filled out by 51 people.
For my one-on-one interviews, I asked my participants to walk me through their booking process and noted frustrations, patterns, and inquired about the reasons for their process and what their booking criteria were.
The main takeaways from the survey responses and interviews are:
- Nature activities
- Visting somewhere new
- Small travel group
- Nice accomodation
- Good reviews
- Hidden prices
- "Tourist traps"
- Large travel groups
- Long travel time
- Can't share search
- Can't share booking idea
- Language barrier
- Don't know where the best deal is
The notes from my interviews are included below and grouped by the websites, processes, struggles, and experiences each participant search for and experienced.
The ideal user of a time-travel booking website such as eon is outlined below. They are someone who has had significant experience booking travel experiences previously, has a desire for adventure, and is not afraid to try new things.
Design Decisions/ Project Goals
Based on the research findings and the needs of the created persona, the following are some features to be included in the website:
- Suggest custom itinerary
- Filter by experience type and time period
- Save itinerary
- Compare prices and itineraries
- Show calendar view of itinerary
- Share itinerary and booking
- Build the organizational skeletons of a travel booking website
- Information Architecture
- Card Sorting
- Site Map
- Build Page with Varying Content
This exercise helped uncover the most intuitive category groupings for users which can now be used as main filters for a search. The components within each category can be used as tags to further narrow down desired activities. Category names that subjects came up with can likewise be used to specify categories, as they give an idea of a common language.
Full site map
Site Map Crop
A site map was created to outline the features on each page of the website, but during later testing, some of these showed to be unnecessary and were changed in the final prototype.
Some of these lessons learned include:
- Map View - this turned out not to be an important nor intuitive part of the destination finding process
- Time period was much more important to users in testing than both the map view and the experiences filter
- Time period followed by location were the two filters use to narrow down experiences during testing, and experience type was not considered. This could be a fault of the testing process, where participants were asked to find a specific destination, and not a destination with a specific experience.
From the site map and feature roadmap, a first version of wireframes emerged as seen below.
- Present product & feature requirements
- Develop clear page to page navigation
- Explore clear on-page navigation
- Decide how the content of each page will be organized
- Decide what features and functionality should exist on each page/screen and why
- Create basic visual design
- Task Flow
- User Flow
- Design Patterns
- Product Requirements
- Responsive Wireframes
(for the user task of arriving at landing page and searching for a destination to book)
- Clear main navigation to start the user’s search process
- A omnipresent search accessible from any page that allows users to search for experiences, places, or eras
- Recommended or top reviewed destinations
- Basic information about eon and how time travel works
- Testimonials of happy customers / social media aggregation of posts of happy users
- Access to account
- Possibility of narrowing down the search results by providing a list of categories, subcategories and filtering options such as price, era, continents, countries, and specific experiences or activities such as seeing dinosaurs, scuba diving, or attending a street market
- Ability to save the search/ favorite search
- Ability to proceed to booking with search
- Show a map of the search locations visible
A big difference between the first and later wireframes and prototypes is the filtering options. In the first iteration of the wireframes, filtering visually by clicking on a map, filtering the time period with sliders, and picking specific activities within pre-defined categories were all options directly from the search. These filters were then simplified into the "Inspire Me" quiz. Placing them here instead left the site looking cleaner, and created a more interesting experience for undecided travelers to help them find a destination.
User Interface Design
- Document UI patterns to ensure they can be repeated
- Create a consistent and visually appealing UI theme and components for design
- Mood board
- Brand Logo
- Responsive UI designs
- UI Kit
Brand Logo Ideation
Logo ideas were mainly inspired by different hourglass forms and wormhole representations. The final logo, below, uses a reverse arrow to signify turning back time, and a sans-serif font to portray a modern feel of the brand.
Final Logo Design
The style tile for eon uses two main colors, a navy blue and orange. Icons were created and styled to look modern, with inner shadows that give them a depth when they are not selected, and filled in with the brand orange color to stand out and show the volume of the button has been filled.
- Build a prototype and perform usability testing on product
- Discover any friction points of flow
- Optimize user flow
- Validate hypotheses on user behavior
- Polish UI
- Usability Test Planning
- Usability Testing
- Affinity Map
Usability Test Planning
- Can users successfully use filters to find their desired experience?
- Can users successfully use the inspire quiz to help them find an experience they are interested in?
- Evaluate users experiences with the inspire quiz
- Can users successfully navigate the checkout process?
- Do users understand how the time travel experience works?
- Can users successfully search for their desired experience?
Conducting Usability Test
- A lot of frustration surrounding inability to fully use website and be forced through a process
- Make booking feature more prominent
- The category and pill filters were not used at all
- Search bar was intuitive to use
- Checkout process was seamless for everyone
- Search bar in results should display the original search query
- More information about the safety of the experience and how it works should be included
- Want to know how many available destinations there are once filters are applied
- Inspire quiz needs to have the clickable categories
I tested my prototype with five participants. I was able to observe each participant as they completed a set of predefined tasks.
- Used to seeing filters on the left side of a screen and not on top as pills
- The need to sign in or create an account to check out
- Want search bar to be available all the time
- Checkout process was quick, easy, and seamless
- Buttons and icons are intuitive
- Pleased with the tile look and information contained in the results
The final prototype includes changes such as types of filters available, drop-down menus instead of pills, and smaller font and component pieces. The "safety" section was included as a tab in the detailed destinations page together with reviews (which previously had been at the bottom of a destination information page).
Search for Ancient Rome experience.
"Inspire" quiz to help users choose a destination