Responsive web design for the future of travel
Zeit was a hypothetical responsive web project completed in Designlab’s UX Academy. The project centered on designing for a product that does not yet exist like time travel.
Role: User Research, Information Architecture, Design, Prototyping, Usability Testing
Tools: Sketch, Invision, Adobe Illustrator, Audio Recorder, Optimal Sort, Zoom
Duration: 4 weeks
Zeit is a Richard Branson Virgin company that is on the brink of changing the face of the billion-dollar travel industry. Zeit is working on a new business venture that would entail time travel luxury trips to 289 destinations around the world.
Creating a responsive website for a new travel company that would disrupt the luxury travel market.
Building trust and a sense of confidence in Zeit's brand and innovative travel technology.
I started by completing a competitive analysis summary analyzing a handful of global leaders in the luxury travel marketplace and some popular travel companies like Booking.com. In my research, I found that luxury travel companies often specialize in niche travel concepts and highly customizable trips. Luxury travel companies emphasized top of the line customer service, safety, and exclusivity as selling factors.
I next proceeded to user interviews. I wanted to understand how users defined a “luxury” travel company, what motivated users to go on a novelty trip or somewhere obscure, and explore user experiences around booking a trip online.
1. Users wanted to make limited choices around booking a trip.
2. Users wanted to learn about the highlights of the itinerary but not be overwhelmed by information.
3. Users wanted extensive company information on a site if they were going to book with a new travel company.
4. Users were suspicious of new travel companies. They wanted to be convinced that the company was trustworthy.
5. Users would be willing to go to an unusual or obscure location if the site convinced them of high-quality amenities and safety.
6. Users wanted a quick booking process that did not involve clicking through a lot of pages.
Forming the Personas
I created two personas named Sam and Jonathan that emerged from patterns I saw in the user interviews.
The youngest persona named Sam was in their mid-career. Sam was looking to book a vacation that was both relaxing and unusual.
The older persona Jonathan was married and retired. Jonathan was looking to book a relaxing getaway somewhere remote with 5-star amenities.
Mapping out the Journey
From here, I created a Site Map utilizing open card sorting on Optimal Sort to construct the information architecture of the site. I then made a user flow of the process Jonathan and Sam would take to book a trip.
How Might We Statements
I brainstormed “How Might We” statements that would help as I set out in designing the wireframes:
1. How might we present general trip information without overwhelming Sam and Jonathan with too much information?
2. How might we build trust with Sam and Jonathan in Zeit as a company and confidence in the new technology?
3. How might we create a seamless booking process that allows Sam and Jonathan to book a trip quickly and efficiently?
4. How might we show a trip itinerary that presents the general highlights of the trip without overwhelming Sam and Jonathan?
5. How might we guide Sam and Jonathan towards choosing a trip destination without overwhelming them with choices/decisions to make?
6. How might we convince Sam and Jonathan of the high-quality amenities and services they will receive booking a trip through Zeit?
Visualizing the Site
I first drew out a rough wireframe sketch of Zeit’s main pages and then created low fidelity wireframes.
When users arrived on Zeit’s landing page, I wanted to build confidence in Zeit’s technology and luxury travel brand. I did this by having the CTA button inviting users to learn more about Zeit's new technology while including articles linking information about the scientists behind time travel, Zeit travel ambassadors, and featured destinations.
After feeling confident with Zeit, users could search for a time period/destination that fits their preferences. From here, they would be directed to a page of destinations that match their search and then ultimately to the final destination page.
With the final destination page, I wanted the design to present only the necessary information, but with the choice to read more in-depth information. I then wanted the users to interact with the itinerary in a visually dynamic way where they could see where they are going on the “Map” view or “List” toggle view.
Creating a Brand Identity
I wanted to convey a sleek modern design in Zeit’s logo while also symbolizing traveling in time. I wanted to design a logo I could imagine Sam and Jonathan wearing on a branded hat or shirt that would create a conversation with their friends/colleagues, generating interest in Zeit.
I chose to go with a white logo without any color for its contemporary aesthetic. I knew that I wanted to show a clock in the logo and looked at the luxury watch brand Patek Philippe's watches for inspiration. From here, I finalized my watch face design with a falling minute and hour hands to symbolize the breakdown of time.
Designing the Details
The UI Kit included all the elements that I wanted to incorporate in my high fidelity designs.
04. Testing & Iteration
Testing the Prototype
Using the UI Kit, I created my high fidelity designs. I took these designs and produced an interactive prototype to use in usability testing to gauge positive or negative user interactions. The usability testing goals I set out tested user confidence in Zeit after exploring the landing page, if users were able to successfully navigate the destination page, and how users navigated the booking process.
Tallying the Results
I created an affinity map from my usability testing results, noting elements that worked and features that needed to improve in my design. I choose to focus on four main user pain points for iterations:
Pain Point 1: Confusion around search icon on the Landing Page
Solution: Users did not always understand how the magnifying glass icon was a button to click on when they finished filling out the information in the search bar. To correct this, I made this into a full-sized button that said, “Search.”
Pain Point 2: Confusion around the order of the search bar
Solution: Users often went straight to destinations instead of clicking on the time period dropdown item first. Choosing a time period before a destination is critical because it filters the destinations you can pick. I fixed this issue by adding numbers to each section and adding instructional text.
Pain Point 3: Confusion around how to add a travel package in the booking process
Solution: Users were confused by the radio button to choose which travel package they wanted. Users were getting stuck in the booking process and were not able to proceed. I fixed this issue by replacing the radio button with a checkbox.
Pain Point 4: Map/List view toggle options were not always clear
Solution: Users did not always toggle between the two options and were not clear that the “List” view was another way to view the itinerary. I fixed this by making the icons more prominent, and by adding color signifying the user had selected this option.
Hi Fidelity Designs
From my usability testing, I was able to iterate to fix the four major pain points of users to design the final high fidelity designs.
Zeit was a challenging project since I tried to create a design around a fictional concept like time travel. During the research and design process, I learned that building user trust and confidence, especially with a new product and emerging technology, is paramount. Throughout the process, I learned the importance of always revisiting the “How Might We” statements to guide the design process. These statements were central in deciding on critical design choices and improvements that put the user first.