Zeit: a Time Travel Booking Company

Overview

This was my first solo end-to-end UX project and was completed in the six weeks allotted while learning the material as I went.

Zeit is a hypothetical company that provides time travel vacations to many destinations around the world at different points throughout history. The user would be anyone who enjoys traveling and/or world history and is looking to go on a vacation. The designed solution would make it easy for users to book a time-travel vacation. The service includes travel arrangements for the trip as well as activity planning during the trip.

The problem: Travelers need a simple way to find and book an interesting trip in order to benefit from this fascinating new technology and have a great time.

Project Roadmap

1. Conduct competitive research to see what the closest competing products are like
2. Conduct user research to see how users like to book trips, and any pain points they may face
3. Design an elegant solution for the company based on this research and the company’s product

Competitive Research

I started by researching potential competitors in the travel booking world, as they are already established and users have experience with their websites. While there are no direct competitors to a company like Zeit (yet), we can learn from similar companies and users’ experiences with them.

There was a lot of information here and it was difficult to distill it all into something useful/actionable, but this initial research was very helpful to get a general feel for how a travel booking experience may look/feel for the user. I noted that there were generally two distinct phases of the entire process: finding/booking a trip, and then going on the trip.

User Research: Planning

When I thought about what I wanted to learn from users, I decided that I wanted to learn about booking the trip as well as going on the trip based on my earlier research.

A few example interview questions:

• “When you want to go on a trip, how do you go about it? Why do you do it this way?”
• “How do you feel about booking a trip this way? (What are some parts of the process you enjoy/pain points?)”
• “What experiences are you looking for when you go on a trip?”

User Research: Results

Key findings, booking a trip:

• All participants book flights, hotels, and rental cars on separate websites to find the cheapest prices
• Participants book trips on both computers and mobile devices, leaning towards computers for easier comparison (browser tabs)
• Pain points: can be difficult to reach customer service, insufficient flight filters on some websites, mobile site glitches/timeouts erasing booking progress
• Overall, there isn’t one website that does everything the best

Key findings, during the trip:

• Participants are interested in local restaurants/bars, historical sites, nature/outdoor activities, local events
• When it comes to trip packages, all participants appreciate some activities being pre-planned, but want room to choose which activities they do
• Pain points: stress involving airport/luggage/renting a car/driving to destination, fear of missing out on good experience due to lack of knowledge of local scene

Based on this research, I took a linear approach to define a persona and empathy map, and performed a card sort to help determine taxonomy. Based on the card sort, I designed a sitemap and then developed user flows.

Persona

To develop the persona, I took characteristics of each participant and combined them into one tangible asset. More interview participants would have likely led to more personas.

The Young and Social Traveler

Empathy Map

I developed an empathy map to get to know the potential user more deeply. At this point I felt like I basically knew this person in real life.

This was my first empathy map, and while I found it useful to relate to the potential user, I did find that it was time-consuming and potentially too thorough, considering that they do not actually exist. In my other UX projects I chose to forego empathy maps for these reasons. That said, in future projects, I’m still open to developing empathy maps, or using any other method that helps me empathize with the user effectively.

Card Sort

To help determine the site’s taxonomy, I performed a hybrid card sort with 4 participants using OptimalSort. Predetermined categories included About, Book a Trip, Explore Trips, and My Account. One participant made all their own categories, but most agreed on some common placements. In the chart below, the leftmost column indicates the name of the webpage, and higher numbers indicate higher agreement of category placement.

Sitemap

Based on this research as well as my own experience with taxonomy, I developed a page hierarchy using octopus.do, an online sitemapping tool.

Task Flow: Main Task

I then developed a main task flow using Whimsical to show the steps involved in finding and booking a trip.

User Flow: Additional Tasks

After the main task flow was made, I developed a more complex/thorough user flow involving multiple user routes.

Moodboard

For this site I wanted colorful, expressive imagery coupled with a dark, intriguing interface to captivate the audience while remaining serious and scientific.

Low-Fidelity Wireframes

I started by designing a clear, intuitive, modern, forgiving interface inspired by design elements used by closest competitors and current design trends. I designed sizes for desktop, tablet, and mobile using Figma.

Logo Design Process

Final design: inspired by time travel, I imagined threads of time folding on themselves to form a “Z”. I made these designs in Adobe Illustrator.

Style Tile

After making the logo, I created a style tile to show UI elements and imagery. I went with purple-pinkish accent colors because they make me think of future design trends as well as gemstones such as rubies, amethyst, and rose quartz. Gemstones are interesting because they can appear almost alien in our daily lives, yet they come from our own planet.

High-Fidelity Wireframes

I developed high-fidelity wireframes based on my low-fidelity ones, incorporating UI elements and imagery. I developed them over several iterations with recommendations from my mentor. My favorite part of this process was designing with the user in mind, and aiming to mitigate any potential user issues through good design practices.

User Testing

At this point it was time to test the design with potential users. I created an interactive prototype using Figma and the high-fidelity wireframes. Four participants aged 27-63 tested the clickable prototype in remote usability tests conducted via Zoom. I had each participant share their screen and recorded the sessions with their permission. I had them perform three task flows: finding the “Australia, Jurassic period” trip, booking the trip, and then finding another trip they were interested in. I took notes on their behaviors and asked them questions about why they did certain things, e.g. “why didn’t you use the search bar?”

Results:

• All users were able to complete the task flows assigned with ease
• All users appreciated the clean design/layout considering the complexity of the product
• Users provided helpful feedback regarding minor design errors, interface improvements, and ideas for new features to enhance the user experience

Affinity Map

With the notes of my observations from the user testing, I created an affinity map using Miro to easily visualize potential issues, positive feedback, and suggestions. I categorized issues based on severity levels that I determined. Click here to see the full Miro board.

Affinity Map: Issues fixed after revision

I then organized all the issues identified during user testing and fixed the most severe/fixable ones. I also incorporated a couple suggestions that I believed could mitigate future issues.

Final Results

After incorporating these suggestions and a few iterations of final polishing, I liked what I ended up with! Click here for the Figma prototype (desktop), which allows you to select and book the Australia trip all the way through checkout.

Potential Next Steps

• Take the prototype to the next level: add more destinations, more destination images, and more interactive pages
• Implement some form of tracking/analytics
• Perform another usability test with a larger group of participants
• Revise the design again
• Prepare the design files for handoff to Engineering

Conclusion

I had a lot of fun designing something that didn’t exist yet, and I was glad I chose the most challenging prompt for my first end-to-end UX project. I learned a ton about the entire UX design process and how to conduct good user interviews, design mockups, and test prototypes.

Challenges included scheduling issues with interviewees, staying on track timewise while learning the material at the same time, and needing to press for information in some interviews. I learned the different ways people currently book trips and realized that some of the pain points mentioned in interviews are experienced by tens of thousands of people per day and are yet to be solved in the real world.

I can use this experience to help me know what to look out for in future designs, and better strategize how to get the most value out of interviews and other user research methods. This project left me excited and energized to do more UX design work!

Prototype Link (Figma)