Zeit

The website and booking platform for the first ever time travel tourism company.
Designed for the curious and adventurous.

Case Study: Zeit

Project Background

The human race has been dreaming about time travel for ages. Now it’s finally possible! After years of discussions and deliberation, officials in Brussels last month announced the International Concordance on Time Travel, giving Zeit a set of standards to under which they can democratize the experience of time travel. 

  • A total of 289 destinations all over the world, up from prehistoric times through today, have been approved and finalized to receive people any moment.

  • These destinations are selected because of their safety: separate from critical historical turning points, and relatively isolated from populated areas.

Project Challenges

  • Research potential users and design a product that meets user and stakeholder needs.

  • Design an aesthetic that feels both futuristic and historical at the same time.

  • Design the Zeit website so that we can make booking time travel easy and seamless.

Research
Case Study: Zeit

Secondary Research, Competitive Analysis, and Provisional Personas

Empathy Interviews

After developing a persona, I sought out interviewees who identified closely with the Avid-Traveller persona. I created questions that focused on stakeholders primary goals.

Four participants, ages 24-67 were interviewed who had previous travel booking website experience.

Case Study: Zeit

Key Findings from Interviews

Key usability findings from interviews:

  • All participants prefer a simple website that’s clutter-free and easy to navigate

  • All participants preferred familiarity from websites they already use

  • All had issues with the cost of travel, even those who are well-off

  • All like to travel with or to friends and family

  • All book from a desktop - in part because it’s easier to view and also in part for security reasons

  • All were worried about how people could alter history by going back in time

  • 3 of 4 voiced safety concerns about how something we’ve never done before could work

  • 3 of 4 preferred having costs spelled out up front without added fees

Key Branding visuals from interviews:

  • Time Travel: Fast, light, bright colors, spaceships, timelines, aging and youth, black holes, Dr. Who, Back to the Future, Interstellar

  • History: Castles, pyramids, script text, serif text, books, lessons, heroes, change, browns, yellows

  • Modern: Clean lines, minimalism neutral pallets, whites, light, technology, phones, computers, apps, medicine, New buildings, cool architecture, glass, clean fonts

  • Travel: planes, trains, cars, oceans, mountains, dawn light, Culture, freedom, learnings, new foods, new sites, new people, happy people.

Case Study: Zeit

Key Persona

Persona

Based on the interviews/workshop I set up a key persona called the "Avid-Traveller" which represents the majority of the Zeit customers.

  • Design features based on the Avid-Traveller persona:

    • Keying off of influential brand's website design patterns

    • Simplifying design for the extremely busy executive-level consumer

    • Design the product so the price is always clear from the beginning of the booking process to the end

Case Study: Zeit

Empathy Map

An Empathy Map was created to divide and classify the feelings and actions that interviewees had when thinking about travel websites. Clarifying these insights helped me understand how to design a website that empathizes with key user wants and needs.

Case Study: Zeit

Project Goals

I prioritized project goals that that were common among multiple stakeholders.

  • By recognizing and evaluating these common goals, as I moved through the project timeline, it helped keep all stakeholders on the same page

  • Having the goals of each stakeholder makes it clear for all stakeholders on the project to understand and respect one another's priorities

  • This analysis of goals helps the project manager symbiotically drive and direct the project forward

Information Architecture
Case Study: Zeit

Card Sorting Observations

Method:

  • I used the online card sorting platform from Optimal Sort to give participants an easy way to sort their cards on their own time and from any location

  • I randomly selected items from the provided list of historical events

  • I was able to collect data from 8 different participants

Observations:

  • Overall, most participants either grouped events into either chronological categories or by location of where the event happened.

  • One user made one single category and ordered the cards chronologically.

  • All participants were American, so there was a trend towards grouping things that happened in America together and everything else separately.

  • Some participants looked at the actual experiences themself and grouped music or artistic experiences together.

  • Ideally, there would be more participants for this study to confirm some of these noted trends.

Zeit Sitemap

Based on a synthesis of research, a study of consumer feelings in competing markets, and a card sorting exercise of various destinations in time, a sitemap was developed.

This sitemap reflects:

  • Various ways that users would sort historical destinations

  • A sign in page

  • A safety page

  • Language selection

  • An about section

Case Study: Zeit
Task Flow and Wireframes

Primary Task Flow Purpose

By identifying the primary task flow on the Zeit website, I was able to identify the required pages and actions to complete a booking on the Zeit website. Those primary pages are:

  • Homepage

  • Search Page

  • Destination Page

  • Checkout Page

Case Study: Zeit

Wireframes

At the beginning of the design process I created a handful of sketches that I presented to a panel of my peers. Based on their feedback I created a lofi wireframe in order to build the bones of the Zeit website. From there I developed those lofi wireframes into hifi wireframes fit for prototype testing purposes.

Below are examples of my homepage and destination page developments from sketches to lofi digital wireframes to hifi digital wireframes.

UI Design
Case Study: Zeit

UI Kit

Once the HiFi Wireframes were developed, I created a UI Kit within Figma that includes all of the necessary elements for the Zeit website. By having all of these elements in one place it's helps the developer quickly create and stylize the website to my specifications.

  • These elements were at the forefront of my design as I worked through the entire design process, beginning with wireframes

  • Visual style: Based on interview feedback, every user envision light, futuristic images, and space. The website elements, logo, and typography were designed with these visuals in mind.

  • I created a clean interface that is easy to digest and interact with. The primary persona for Zeit has a busy lifestyle and prefers an interface that doesn't require much energy to understand and navigate.

  • This design also meets the stakeholder goals of delivering an exclusive and never-before offered experience while sticking to design patterns that are common within the travel industry.

Prototype Testing

Usability Testing

Test Objectives:

  1. Test the usability of the Zeit website for everyday users

  2. Understand how users prefer to search for their next travel destination

  3. Test the ease of booking a room on a Destination page

  4. Test the ease of adding on an experience to a trip

  5. Test the checkout process

Participants:

5 individuals that travel and use travel websites frequently from age 24-58.

Tasks:

Task 1: Create an account.

Task 2: Starting on the homepage, book a trip for two guests to see the Great Pyramids in Egypt on October 8-14th of 2022. You will need to select Early AD for the correct time period. Once on the destination page you will want to stay in the Queen Suite with Pyramid View room. From the destination page, add a camel excursion to your trip. Take yourself to the checkout page.

Test Goals:

  1. Users are able to navigate the website without issue to complete their assigned task

  2. Identify pain points or moments of hesitation as users navigate through the website

  3. Ensure the user is given all the information required to make a purchasing decision

Case Study: Zeit

Usability Testing Findings and Resulting Iterations

Test Completion Rate: 100%

Error-free Rate: 90%

The users were all able to complete the account creation task flow with ease. All users preferred to create an account with their email or Gmail.

The prototype was designed so that there were multiple ways a user could complete the main task flow. To summarize the most notable findings:

  • 4/5 users didn’t realize they needed to scroll further to get to the bottom of the page to book a room

  • 2/5 users were confused by the icons.

  • 5/5 really liked overall aesthetics and heavy use of images

  • Users remarked that they like how the website kept information concise and only where it was needed

  • One user caught a contextual error. Specifically, there was an added experience on the checkout page that they did not book.

  • One user would have started at the search bar at the top

Solutions for moving forward after initial usability testing:

  • Created a button at the top of the page that brings users to the bottom of the page to book their room

  • Add text below the icons in the top navigator

  • Fix extra experience in the checkout flow

Summary
Case Study: Zeit

By going through the entire design process I was able to:

  1. Identify the target market.

  2. Identify customer needs and pain points.

  3. Develop a brand identity that speaks to the target market.

  4. Identify the primary user and task flow from information architecture research.

  5. Develop a UI that speaks to the target market and simplifies the primary task.

  6. Create a wireframe and prototype to test on target users.

  7. Test users and look for points of hesitation while conducting usability testing.

  8. Make iterations to solve these usability issues.

  9. Help the Zeit team move to the next stages of a completely designing the prototype.