Zeit Travel Site

Role: Research, UX Design, UI Design, Prototyping
Timeline: 8 weeks
Background
Zeit is a fictional time travel company based in Germany. After years of working with governments and organizations around regulations, they now offer time travel to the public. Starting with 289 worldwide destinations, Zeit offers a novel experience to travelers.
Problem
Time travel is now available to the general public but there's no way to book a trip online.

Discover

📑

Research Plan

Zeit's product is new technology. Think back to when you’ve done something new. You’re scared yet excited about the unknown. Users will have these same emotions before booking a trip. They want to feel safe and have an understanding of time travel. My goal from research is to decide what level of information needs to be provided to help a user understand the process of time travel and therefore uncover topics of concern and hesitancy among potential users.
Research Questions
  1. Who are our potential users and decision makers?
  2. What are our users’ biggest concerns?
  3. What verbiage do we use regarding the technology and process involved to help user’s understand what will happen when they travel?
  4. How do our closest, unrelated, competitors handle relaying new, complex information?
  5. How do we get users excited to experience something new to them?
🔍

Competitive Analysis

I looked at four companies to research how each displays new technology to educate their users. I observed how each handles the booking process, showcases destinations, and what features they include. What do they do well, what can be made better?
Competitive Analysis for Zeit
competitive analysis
🙂

User Interviews

Next, I interviewed 5 females, ages 34-64, who travel at least once per year. I wanted to understand why and how users decide on a vacation destination and book a trip. What are the goals and frustrations they encounter?
Key Findings
  • Price is a driving factor for decision making
  • Convenience is important
  • Too many choices is overwhelming
  • New experiences are attractive
😎

Design Decisions

  1. Video on homepage & about page explaining time travel
  2. Photo gallery of resort & destination with user submissions
  3. Section to read and submit user reviews for destinations
  4. Include last minute deal section & deals page listing featured deals
  5. Search filters and sort by options to narrow number of results

Define

🃏

Card Sort

I conducted an open card sort of 20 time travel destinations with 10 participants who created a total of 51 categories. While this seems like a large number of categories, once I looked at the dendrogram I was able to narrow down 6 main categories that will be used in the navigation and search options/filters.

Dendrogram Results from Card Sort
dendrogram results for card sort
  • Arts & Entertainment
  • Ancient History
  • American History
  • Major Historical Events
  • Native Civilizations
  • Manmade Wonders
🗺️

Site Map

Once I had an idea how the content needed to be organized I created the sitemap. This proved to be a huge asset going forward to help to organize thoughts, flows, layouts, features, you name it! It also saved time knowing what needed to be integrated on each page.
Site Map for Zeit
zeit site map

Develop

Branding

Before moving onto the UI I created a logo for Zeit that had a modern feel with the letters. The graphic element of the logo I wanted to look futuristic like you were stepping into a portal, just like in the movies.
Logo
zeit Logo

UI Kit

Next I created a UI kit for all key elements on the site, maintaining the color palette for each element, and also incorporating part of the logo for the preloader.
UI Kit Elements
zeit UI kit
🎨

UI Mockup

At this point I combined the UI kit and graphical elements I created with the design from the wireframes to create the mockup.
‍‍
Zeit UI Mockup
UI mockup v1

Deliver

🤔

Usability Tests

Once I had the mockups completed I tested participants with multiple scenarios to discover any areas of hesitancy and questions they may have while navigating the website, along with what errors users made.
‍‍
Scenarios
  • You just heard about a website which allows you to book a time travel trip. What sort of information do you are looking for when you go to the site?
  • Imagine you want to book a unique time travel trip; how would you go about doing this?
  • On the search result page, using just the filters, find the Cleopatra’s Egypt destination.
  • From here complete the checkout process. Tell me what you think about this process.


Design Decisions

  • Search Results – Add more filters relating to the destinations and time, not resort features
  • Destination Page – Add a few extra details about the resort, modify map section to be more noticeable
  • Checkout - Reorganize Trip Overview section to clear up what “modify reservation” refers to
🖌️

Iterations

Taking the information learned from the usability test I created an affinity map to indicate the problems each user encountered and then iterated on the designs for these elements and sections below.

Before and after Iterations
iterations
📽️

Prototype

zeit prototype

Learnings

🤩

Conclusion

While this was a challenging experience, I enjoyed seeing all the work come together to create a great looking design the user will appreciate. I've learned an entirely new, more successful, approach to creating a product that works for the user.

Back to top arrow