responsive suite.jpg

Zeit


 

TL;DR (Summary): With some free time, I decided to flex my design muscles with a totally off-the-wall challenge. Inspired by my day job of working with NASA and rockets (ok from a very significant distance),  I set out to uncover what the world's first time travel website might look like. Why not? I was excited to challenge my biases as a designer and as an professional in the travel and tourism and eCommerce space. Following a user-centered design process,  I crafted an online experience whose ultimate purpose was to offer its users an impactful mechanism for human empathy - whether observing defining moments in mankind's history, or just experiencing what it was like to live in someone else's shoes.

 
 

laptop - aqua.jpg

 

Project Details

Challenge | Design a time travel tourism website.

Client | Zeit (a fictitious company)

Role | Lead Designer: Design Researcher, IxDesigner, Visual Designer

Duration | 2 weeks

Design Process

Iterative design process consisting of research and empathy, persona development, ideation, paper and digital wireframing and prototyping, usability testing, and final visual design.

See more about my process as a designer >

Tools Used

  • Pen and Paper
  • Whiteboard
  • OptimalSort
  • Sketch
  • Photoshop
  • Illustrator
  • InVision

Design Goals

  • Ensure web experience is responsive across platforms (in its design and its functionality)
  • Leverage existing design patterns and user expectations to create an easy-to-use and intuitive experience

Constraints

  • Time travel is possible (but only back in time and to the present), safe and legal
  • Traveler has no impact on past events, nor will their involvement have any impact on the future
  • Time travel is financially feasible (Cost of travel is on par with travel to Europe)
  • There is no monopoly on time travel experiences, and thus competitive advantage should be a consideration
 

Mobile Key Frames: Homepage, Product Results Page, and Trip Detail Page

Mobile Key Frames: Homepage, Product Results Page, and Trip Detail Page


 

Research and Discovery

Tools used: research plan, trend research, competitive research, user interviews, contextual inquiry

 

During research, I  relied heavily on analogous data  and user interviews focused on discovering existing user expectations in the travel space, but also in the time travel arena. What mental models did people harbor around the way they perceived time travel to work? How did this inform their expectations, and more importantly goals in time traveling? Did it at all?

 
 

Thinking about Zeit's Competitors

Knowing full well that time travel is impossible currently, I used potential competitors as an additional tool to breathe life into the brand and the time travel industry in general - from potential direct competitors to analogous ones.

I had an assumption that books and movies would strongly influence user's perception of time travel and perhaps their "location" preference in history. I also assumed that traditional tourism players would strongly determine the user's expectations during the searching and booking process, from content to interaction. 

Competitive Considerations.jpg
 

User Interview + Task Inquiry Strategy

Armed with some initial info and direction, I developed a interview plan and questionnaire to test some of my working assumptions and to learn more about my target user's perceptions, motivations, habits, etc. I was curious to see how easily and freely user's could think in this imaginary space and hoped the design constraints outlined would be just constricting enough to bread creativity.

I conducted 6 interviews and 2 contextual inquiries with an even mix of males and females between the age of 25 and 37.  During contextual inquiries, the user was asked to book a trip to an international location of their choice. I set this task assuming that the information requirements, sources, and level of research would be the most on par with booking a time travel experience, and felt that 2 would provide a strong enough body of information, given that it would need to be supplemented heavily with the qualitative info from the user interviews around the subject of time travel.

Questions were roughly ordered and grouped together based on the initial flow of 2 practice interviews. Questions served as a guide to the discussion, not a mandate

Questions were roughly ordered and grouped together based on the initial flow of 2 practice interviews. Questions served as a guide to the discussion, not a mandate

 

Discovery Takeaways

Points of Tension

  • Users expressed hesitancy to interact with "locals" back in time for fear of ripple effects. This was at odds with contextual analysis findings, in which users described (positive) interactions with locals as one of the best parts of a cultural vacation 
  • "Immersion" was a frequently used word and communicated sentiment, although its definition varied from user to user

Strong Trends 

  • Independence and flexibility were values relevant in several facets of the trip experience
  • Interviewees overwhelmingly preferred self-made itineraries over all-inclusive offerings
  • Trip search and planning starts online, but ideas are almost immediately validated by the user's network, either on Facebook or in person (i.e. "Who's been to Berlin? Any recos?)

 

What surprised me

  • Half of those interviewed mentioned visiting their ancestors or family members as a main reason for wanting to time travel, something I hadn’t considered

 

 


 
Desktop homepage 

Desktop homepage 


 

Synthesizing and Defining the Scope

Tools used: variable mapping, storyboard, empathy mapping, persona creation

 
 

Analyzing all the information from the discovery phase was certainly going to be a doozy. I wanted to take advantage of the nuggets that bubbled up (as noted in the previous section), and dig deep into their roots and implications. Without too much effort,  strong patterns emerged, so I used various defining techniques to better understand their level of importance and relationship to one another. 

 

 
 

Key Insight

 

While there was a common thread of immersion as a central need for a positive travel experience, it manifested in different ways and to different degrees, revealing a composite user who was desiring various degrees of authenticity across several millennia and different types of experiences, while at the same time expressing option fatigue as a major pain point.

This was a huge point of tension- wanting dozens of options but expressing concern at having to actually browse them - and thus the focus of my design. I reformated it into a "How Might We" statement to guide my design:

 
 

Tablet views of search results page and product detail page

Tablet views of search results page and product detail page


 

Product Strategy

Before moving into interaction design, I needed to ruminate around solutions to both the user and the business's needs. Business and user goal alignment helped to inform feature prioritization, while a card sorting exercise provided insight into the user's expectations for her on-site browsing experience. 

 

Comparing Business and User Goals 

Understanding the overlap and alignment of Marie's and Zeit's goals was integral to the product strategy, not only the features that the site would include, but the overall brand experience as communicated by the tone, imagery, and content of the site. 

 
 

Exploring Zeit's Features

Keeping Marie's needs at the center of the exercise, all feature ideas generated were accompanied by a feature description to help demonstrate the implications of the feature. Additionally, where relevant, I looked at why exactly this feature would be important to the user and the business, which allowed me to further prioritize.

 

 

Information Architecture and Task Flow

Informed by an open remote and in-person card sort exercise, I developed Zeit's Sitemap to better understand the site architecture. It demonstrated that user's expectations were strongly informed by existing travel site patterns, specifically newer experiences like Airbnb. 

While this was a good framework to build my product upon, it didn't provide much insight into the site's categorization and labelling. How would products be filtered and organized? I whipped up a site flow to inform my initial wireframes and prototypes so I could test my assumptions.

The task I set out to design and validate was the process of booking a time travel trip online. 

 

 

Responsive View of Product Results Page 

Responsive View of Product Results Page 


 

Interaction Design and Validation

 

Assumptions 

Based on research findings, I wanted to (in)validate some key assumptions with this initial prototype

  • user wants to have information about trending trips
  • user wants to see what kind of trips their friends are taking
  • user wants to filter trips by their era, by their location, and/or by their type (eg. food, political moments, movements, etc.)
  • user takes an inductive reasoning approach and prefers to get a sense of what Zeit does based on its offerings. imagery, etc. with more explicit "about" information within reach, rather than being told within their primary task flow
  • user wants a way to build and manage her trip and itinerary within Zeit's website

Goals:

  1. Determine validity of assumed user key path and discover points of friction
  2. (In)validate key assumptions
  3. Assess the validity of 2 features tied to Marie's secondary needs:
    1. The Trip Dashboard, which aimed to satisfy the user’s need of a collaborative planning and itinerary tool, even while on trip
    2. The inclusion of ‘Featured Trips’ and ‘Trending Trips in her Network’ highlighted throughout the site at key decision points, which aimed to satisfy the user’s need to have recommendations from her most trusted sources close by to avoid feeling overwhelmed and to feel satisfied that a trip comes with an extra layer of credibility.
 

Starting off with Sketching

Before moving to digital wireframes, I spent some time at the whiteboard and in my notebook concepting and laying out some key frames.  I wanted to be sure that I was able to visually communicate, even without much detail, the hierarchy and organization of information.

 

V1 Prototype: Informal Testing Takeaways

Points of Friction

"Era" vs. Travel Dates: users confused by the global trip search field, unsure as to whether it was asking for travel dates (i.e. May 5th through May 12th 2017) or “experience dates” (the dates that the trip would take place in history)

Pricing Information: user confused by the "Total Price", not sure what it included; perceived large price tag as an "all-inclusive trip" experience

Trip Dashboard Feature: Though this feature was designed as a result of user interviews and research, during the testing, it became obvious that this feature sought to accomplish a different goal entirely from the one that this prototype was designed to test: booking a trip to witness the liberation of Milan

What I got right

  • Trending Trips and "In Booked in Your Network":
  • Image-Driven Content (for the most part):
  • Persona's preference for an open, flexible itinerary:

 

 

 

V2 Prototype: Formal Testing Takeaways

Priority Task: Book a trip to witness the Liberation of Milan after WWII for 3 travelers for under $600 a day.

Major insight: while users vocalized their time travel preferences during research based on locations and eras in history, testing found that they were much more concerned with viewing trips based on the type of immersion- specifically whether it was just a "day in the life" or if it was a defining historic moment. They actually preferred to see this categorization explicitly, rather than implying it from the experience description. After making this larger distinction, they relied on era and location filtering.

 

Zeit Main Mockup.jpg

 

Visual Design

For Zeit’s visual design, I wanted to pull inspiration from the mid-century, whose pop culture around time travel (Star Trek, Dr. Who, etc) was the basis for my users’ perceptions of time travel during qualitative research. I found aesthetic inspiration in the colors, forms and contrast of travel and tourism posters from the era.

 

Brand Attributes

  • Retro but not dated
  • Trustworthy but not boring
  • Adventurous but not reckless
  • Minimal but not sterile
  • Fun but not silly
 
 

Style Guide and UI Kit

After completing an initial brand style exploration, the look and feel communicated a brand that felt too muted and dated. Moving away from the more earthy/neutral tones of the early 1960s, I brightened up the palette. Opting for the kitsch of the late 1950s, I settled on a complementary color scheme with various shades and tints of coral, teal and grey because of their effectiveness for drawing the eye to important actions and areas.

I also moved away from the rounded curves to incorporate sharp edges throughout the design, keeping crisp lines to organize content in a clean, uncluttered way, allowing images to be the focal point.

After Visual Design 2x.png
 

Final Hi-Fidelity Key Frames


 
 

Design Takeaways

Breaking out trip offerings into 3 distinct categories: “Family History”, “A Day in the Life”, and “Defining Moments” ultimately proved to be the most effective way to connect Marie to the right experience depending on her goals.

At a basic level, the design met Marie’s goal of booking a trip. But the design went beyond this level to help Marie achieve her goals at a visceral and reflective level. Utilizing existing travel site design patterns and flows with a creative solution to trip categorization, the design satisfied user's existing booking expectations while outlining a creative solution to how we might think about these types of experiences, should they ever become possible.

 
 

 

Next Steps+ Considerations

Develop a Trip Search Helper Tool

I would like to explore additional functionality around a trip planning tool (ie a decision tree of sorts) to orient the user down an ever-refining path of experience options. This feature is found on much larger and similarly “experiential” trip providers’ websites, such as Disney, which allow for the customization of trip results (“beach or city?”, “relaxed or active?”). I am foregoing the buildout of this feature, however, due to time constraints and its functionality being secondary to persona’s user flow and booking behavior. I also believe initial site rollout and early booking behavior would better help to illuminate what options and refinements this “trip search helper” would provide.

Build out the “Family History” Browsing Experience

A key component of Zeit’s offerings as a result of initial user interviews and research, the design of the Family History experience flow will be omitted from the hi-fidelity prototype. The design of this user flow will differ significantly from the tested flow as it will require additional information and user input that would allow for the identification of the user’s lineage.