Overview

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 solution would make it easy for users to book a time-travel vacation. This was my first solo end-to-end UX project and was completed in the 6 weeks allotted while also learning the material as I went.

The problem: How do you design an easy-to-use time travel booking solution? Also, how do you design for something that doesn’t yet exist?

Specifications

  • Project duration: 6 weeks
  • Tools used:
    • Figma
    • Adobe Illustrator
    • OptimalSort
    • Octopus
    • Miro
    • Whimsical

Roles

  • UX Researcher
  • UX Designer
  • Interaction Designer
  • UI Designer
  • Visual Designer

Deliverables

  • Competitive research
  • User interviews
  • Persona, empathy map
  • Card sort, sitemap, user flows
  • Moodboard, logo design, style tile
  • Low- and high-fidelity wireframes
  • Usability testing and findings
  • Final mockup/prototype revision

Goals

  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, we can learn from similar companies and users’ experiences with them.

User Research: Planning

When I thought about what I wanted to learn from users, I determined that there are two parts of the traveling experience that I wanted to learn about: booking a trip, and then actually going on the trip.

Research objectives:

  • Understand what travelers want on a vacation, including the booking experience
  • Understand what pain points travelers face during trips/booking
  • Do not let the participants know that this is for a time-travel service as this could confuse/interfere with their organic answers

Research method:

  • Individual interviews, conducted remotely
  • I scheduled interviews with 6 participants between the ages of 28 and 63 who enjoy traveling, have experience booking vacations, and travel 2-6 times per year

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 likely have led to more personas.

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 although they don’t actually exist.

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 knowledge of taxonomy, I developed a page hierarchy using octopus.do.

User 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 task flow involving alternate 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. Figma link to wireframes

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 3 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
  • 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 was glad I chose a 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)