Zeit Time Travel

A responsive e-commerce website for a history-centered time travel tourism company.

ROLE

UX Research
UI Design
Responsive Design
Branding Design

Project Duration

November 2020 - February 2021

Tools Used

Figma
Adobe Photoshop

TEAM

Solo Project with feedback from mentor and peers

PROJECT CONTEXT

Wibbly Wobbly, Timey Wimey!

From Doctor Who to Back to the Future to Avengers: Endgame, who doesn’t love a solid time travel story? While the premise of time travel has always been purely fictional for storytelling’s stake — what if it were now possible? How could a company capitalize on this technology to create a time travel tourism enterprise?

While my days in quarantine felt more and more indefinite and potential for travel in the future grew more and more distant, fictitious time travel tourism didn’t seem like a bad alternative to sustain my wanderlust.

The Challenge ⚡️

How could we explore this new form of travel with the added dimension of time?

DIVING INTO RESEARCH

Initial Burning Questions

How do you begin designing for an experience that's never been made before? How do we even know if people want to time travel in the first place? These were some of the questions that initially sprung to mind to explore in research:
These questions were ultimately condensed to fuel my main 3 research goals I sought to uncover:

01.

Automation

02.

What are some user expectations when it comes to time travel? What are some their fears and motivations they may have in a time traveling experience?

03.

Discover how to build public trust and confidence in this completely new service to create the most safe and effective booking experience for a user.

SECONDARY RESEARCH FINDINGS

Trust & Exploration at the Forefront of Travel

While there are no direct competitors in the time travel space, secondary research helped me unearth new insights regarding current patterns and trends in the travel industry. Competitors like Space X and Oculus helped me understand how to better present new and exciting experiences to inexperienced users, while competitors like Airbnb and Trip Advisor helped me understand the industry standard of general travel booking.

Findings ✍️

Insights 💡

Market Research
  • Brand trust and flexible booking have moved to the forefront of a purchasing decision — they help users feel safer making purchases.
  • Price, user reviews and brand loyalty are the top reasons a user may decide to book a trip.
Brand Loyalty
  • Zeit should be heavily transparent on the entire time travel process to ensure users feel confident.
  • Emphasize safety and flexibility in booking and all services.
Competitive Analysis
  • All sites began with a prominent search function.
  • Strong sense of exploration with “Discover” or “Recommended” sections.
Discoverability
  • Zeit should promote curiosity and explorability, with a vast selection of historical destinations and curated recommendations fit for all sorts of travelers.

USER INTERVIEW INSIGHTS

"Can I even experience time traveling safely being a woman and person of color?"

I went into user interviews excited to discuss perceptions of time travel, without realizing how such a seemingly innocent prospect was not so simple to navigate. My participants expressed that while they would love to experience history in the moment, they were also concerned about how they would be accepted in the past. Some participants didn’t know what time travel would look like being female, or being people of color if they were to travel to spaces where they were excluded or discriminated from.

My participants' concerns and insights on time travel tourism were a thoughtful reflection of the world we live in, and it was important that these views be reflected in the design solution. These findings reiterated to me that my design solutions needed to be safe, empathetic, and inclusive for my users. Thus, I began to focus in on how Zeit could be a brand that promotes authenticity, prioritizes teaching about history and its impact on our modern day, and champions equity and inclusion within each travel experience.

USER PERSONA

Time Traveling Taryn!

After synthesizing my all research insights, Taryn was born as an ideal Zeit traveler. Her persona was created as a reference for key decision making moments, building user empathy, and ensuring all design decisions were research-backed and aligned with our user needs.

EXPLORATION

Setting the Site Foundation

1. Site Map

A site map was created as a barebones overview of the website’s overall features and pages so we can examine the hierarchy of all the content and identify the main flows and interactions between key screens.

2. User Flow

To better understand the overall user flow, I created this main flow to encapsulate all the possible user journeys that could be taken to go through the site’s main end goal — booking a trip. With the addition of secondary persona, Christian, I was able to explore the various possible paths each user could take, and better understand which pages were necessary to task completion.

View the full user flow here.

IDEATE

IDEATION

Sketching It Out

It was finally time to ideating potential solutions! I created 3 homepage variation sketches to explore different visual representations of the content and features I felt was most necessary to include. View all sketches here

Digitizing the Design

Jumping into mid-fi on Figma ensured a focus on visual hierarchy, and the correct placement of elements — all while not getting too lost in the little details.

ITERATIONS

One Big Map of Human History

Even within mid-fi, it was important to begin exploring different variations of highlighted features. This map feature was constructed as a focal point on the landing page to allow users to enjoy immersive exploration in searching for the different experiences they could take. Here’s a peek into the various iterations made on the feature.

Version 1

👎 Timeline navigation years are too specific for the average user to be able to explore
👎 Experience name labels are illegible and difficult to resize responsively

Version 2

👎 Timeline navigation is text heavy and may be difficult for users without knowledge of the events of each historical era
👍 Fewer time categories with 7 total labeled historical eras and their respective years

Version 3

👎 Iconography alone to represent time periods was too confusing; doesn't look cohesive and interactive
👍 Era that is selected is clearly emphasized

Version 4 (Final!)

👍 Category Filter allows users to narrow down their search
👍 Adding titles to icons in each time period provides more information for users

DEVELOPING UI + BRANDING

Bringing History Back to Life

Logo Exploration

By using a word mind map, I narrowed down Zeit’s overall brand attributes to authentic, vintage, historical, immersive, and modern and began mocking up ideas from those attributes.
Sketches
Logo Exploration

UI Kit

The UI Kit became a master document for all aspects of branding - containing all UI elements for the site to help organize all design elements for potential future team collaboration. This kit included, but wasn’t limited to logo variations, typography, color palette, buttons, filter Icons, cards, and more.

Logo Exploration

I wanted the look and feel of the Logo to represent both the modernity of the time travel technology, with vintage inspiration to reflect Zeit's emphasis on history & education within time traveling.
Sketches
Logo Exploration

UI Kit

The UI Kit became a master document for all aspects of branding - containing all UI elements for the site to help organize all design elements for potential future team collaboration. This kit included, but wasn’t limited to logo variations, typography, color palette, buttons, filter Icons, cards, and more.

PROTOTYPE AND TEST

Piecing It All Together

Branding was implemented to create cohesive screens that encapsulated the essence of Zeit. These high fidelity screens were then prototyped to test the overall fluidity of the site navigation and effectiveness of the visual design.

USABILITY TESTING

I tested 5 participants to focus on completing two tasks.

Participants were assigned to:
1) Find the “MLK Jr. March on Washington” destination page, and book the experience for 2 guests, and
2) Find the FAQ section and leave a message form for Zeit.

I gathered my feedback into an affinity diagram to better visualize user patterns and help discover reoccurring user behaviors.
The major insights were as follows:      
Successes 👍
  • No task failures !
  • Felt the process of arriving to the Destination page was simple and easy, and liked having multiple pathways to the same page.
  • Enjoyed overall branding, aesthetic, choices, typography, and layout choices.
Suggestions & Opportunities 🤔
  • Participants wanted to type in the main homepage search bar to find the MLK trip, but were disappointed with no interaction to a search results page.
  • Wanted further labeling in “Explore New Worlds” filters.
Pain Points & Confusions 👎
  • Participants experienced confusion in the filter sections with unclear drop-downs and unfamiliar category names.
  • Some participants confused by “Candidate Screening” section, as well as how overall time travel experience will work.

Successes 👍

• No task failures
• Felt the process of arriving to the Destination page was simple and easy
• Enjoyed overall branding, aesthetic, choices, typography, and layout choices

Pain Points/Confusions 👎

•“Sort By” filter dropdown was unclear
• “Candidate Screening” section in checkout screens felt confusing
• Naming conventions on some “by Experience” filter categories: ie. “Remarkable Moments In Time” and “Historical Day in the Life” were confusing

Suggestions/Opportunities 🤔

• Wanted to type in search query within homepage’s search bar
• Wanted ability to save/print the final confirmation page and full itinerary as a receipt
• Wanted further labeling in “Explore New Worlds” filters

PRIORITY REVISIONS

Implementing insights to improve navigation and eliminate confusion

Insight 1: How Does Time Traveling Work Exactly?

"What is Candidate Screening? If time travel is completely observational anyways, then what is the purpose of more screening and background checks for users?"
- Participant 2

"So how exactly will I get sent back in time? Can I do it from home or do I need to go somewhere first?"
- Participant 3

Homepage - Version 1

👎 How It Works section does not clearly explicitly state how the user must first travel to Zeit headquarters in order to time travel.
👎 Candidate screening that started as a secondary safety precaution seems unnecessary when users must comply with terms and conditions and already cannot tamper with the past given the hypothetical time travel rules that Zeit has established.

Homepage - Version 2

👍 Circular “How It Works” Graphic is both consistent with the theme of time travel portals, and clearly explains how the time traveling with Zeit works from start to finish.
👍 Featured publications in the "As Featured In" section creates a reputable and trustworthy brand identity for Zeit

Insight 2: Using the Search Bar for Discoverability

"My first assumption would be to type in the MLK Destination into the search bar!"
- All Participants

Destination Page - Version 1

👎 Confusing and unnecessary to have to two areas to input travel dates.
👎 Somewhat of a dark UX pattern, having the Deluxe Plan already pre-selected for the user, and not having it in the quick book module at the top right

Destination Page - Version 2

👍 Travel dates and package type all readily available for selection in the top right booking module
👍 Added section on Historical Importance reveals to travelers why Zeit has specifically chosen to allow travelers to visit this event, emphasizing Zeit’s values of education and learning about the impact of history

Insight 3: Using the Search Bar for Discoverability

"My first assumption to find the MLK page would be to type it directly into the search bar!"
- All Participants

FINAL SCREENS

Your Journey Back Starts Here

After some tinkering and revisions, Zeit is here! You can click through the web prototype or continue to scroll to see some specific design decisions made based on user insights as well as how some elements responsively translated over to mobile.

View Full Prototype

HIGHLIGHTED FEATURES

Introducing the World's First Educational Time Travel Experience

User Insight: Concerns about safety and brand reliability

Solution: Emphasize transparency of services, how it works, and the safety of the technology. Included External recognition from “As Featured In” section.

An additional About Zeit page was designed to give more background about the company’s mission so users can feel more confident in their services.

User Insight: Appreciated curated recommendation lists

This interactive world map was created to promote immersive exploration while emphasizing a focus on culture and history.

User Insight: Appreciated curated recommendation lists

This interactive world map was created to promote immersive exploration while emphasizing a focus on culture and history.

REFLECTION

Thoughts &
 Lessons Learned

IF I DID IT ALL OVER AGAIN I WOULD WANT TO...

Collaborate with a developer throughout the process. Although this was a fictional project, it would've been great practice to consider the potential development constraints and technical limitations within some of my proposed features. Keeping in mind these boundaries would've simulated a more realistic real-world working experience, practicing creating more features that were more feasible to implement.

TAKEAWAY #1 - OPENMINDEDNESS TO SHIFTING YOUR BRIEF

As this was my very first end to end UX project, I definitely learned how much a design challenge can shift over time as you conduct research. Talking to my users taught me the importance of keeping an open mind to allow my initial design challenge to evolve to better cater to user needs and areas of friction with the whole concept of time travel. This was not only beneficial in terms of creating a more positive and trustworthy overall experience, but also worked well in business sense. I was able to develop a brand identity and business model consistent and proactive to both current events of the world and how that affects users’ mentalities.

FUTURE ROADMAP

Next Steps

Thinking about responsiveness in this project was very challenging, especially when thinking about how to translate an interactive map into mobile. I would love to continue iterating on that concept and seeing what this feature would look like responsively.
Next Project:

Clean Collective