ZEIT

Personal Project

ZEIT

The Time Travel Experience

Background

Time travel is becoming possible.

This is an independent project from DesignLab, which is based on a fictional company ZEIT. ZEIT offers the very first Time Travel Service to clients with a variety of tour selections to the past, which departure from their Time Transition Center in Germany.

ZEIT wanted a responsive e-commercial website, where clients could search for specific tours and finish their bookings online.

A high-fidelity prototype for desktop, a responsive homepage and product page were designed as the result.

The Basics

Client

ZEIT Time Travel Agency

Time

08/2018 - 10/2018

My role

UX Researcher, UX Designer

Tool

Photoshop, Illustrator, Invision

Prototype

https://invis.io/BJNXJSJDAPE

Challenges

What made this project challenging is the lack of information. Since Time Travel hasn't been brought into reality, the background of this project isn't clear. I needed to decide my own target audience, and define how the time travel works. Since there was no direct competitors, and the concept for time travel hasn't been fully established in people's mind, the researching process was harder than usual.

Discover

Marketing research

During the discover phase, I conducted marketing research of current tourism industry, including both these common tour booking companies and the unique space travel service. Statistics from both user interview, online survey and tourism industry annual reports were also analyzed.

From marketing research, the major travel population is Generation X (age 39-53 yr) and Y (24-38 yr), who have more time and budget, and are relatively more willing to use travel as their ways to relax. UI trends for travel booking websites have shown more attention to social proof (eg. review, ratings), understandability and transparency (eg. no hidden fees).

User interview

Due to the limitation of time and resource, only 4 participants were recruited from my network, with people of different levels of travel planning experience. The User research found flexibility (eg. last minute cancellation, modify booking), social proof from visual media and reviews, personalized experience and reliable source of information are clients' main painpoints.

Define

Persona --- who are the target

Based on research results, one primary persona was developed: a Generation Y, experienced traveler with tight budget and time, but willing to try new things.

Design

Low-fidelity wireframe

High-fidelity wireframe - Version 1

Due to the limit of time, only the home page and product info page were designed with responsive versions.

The UI uses purple and green as the primary colors, emphasizing the theme of "historical" and "modern". The hero image has an elephant in the jungle surrounded by the desert, corresponding with the concept of "time changing", also reflecting the impression of "longevity". However, the elephant image here is simply an example of possible hero pictures, similar styles can always be used instead.

Look into details - what are some solutions for the pain --- (Mouse over image to see more animated gifs)

Search

Due to the speciality of time travel, how do customers choose their desired travel date is fairly flexible: either enter a keyword of target destination or time period, or selecting a time in the past.

Searching with any time period is allowed when keyword is entered.

A "historic time guide" is available with info of major world time periods.

Hover

Hovered tags are used as a new feature that wasn't found in most U.S. competitors, for sections of different tour themes.

Users can switch between different categories without clicking, giving a faster switching experience, which is important for users who compare different choices repeatedly.

Filter

Filters are collapsed with 6 different categories, switching between each by clicking on icons and are applied after "OK" confirmation.

Hovering isn't used here due to the narrow whitespace between each icons - wrong switches will increase when hover around.

Choose

Availability checking is on top of the product info page. Different time slots are displayed based on departure date and number of travelers.

A waitlist option is available.

Always have chance

Waitlist feature give another chances to users to book when they cannot meet the minimum requirement of participants to start the tour. Solo travelers are the major beneficiary.

It is also helps users who want a specific time slot that isn't available at the time of checking.

Before buying

Besides modifying bookings after they're confirmed, the last chance for users to modify their bookings is provided on the upper corner of the order summary.

↑

Test

Usability testing was conducted with hi-fi prototype made from InVision. Participants were required to carry out 3 tasks based on given scenarios. They were recruited from my network.

See detailed report on ZEIT Usability findings

Refinement 1: more direct indication of "time travel"

One common problem that all participants had was the uncertainty of the identity of ZEIT website.

Therefore, the hero line was changed to directly relate to "time" and "travel". A graphic explaining time travel mechanism was also added for clarifications.

Refinement 2: visual aids for navigating

Some participants didn't notice the sections below hero image. Therefore a pointing arrow was added to guide visual browsing.

Refinement 3: inline help with more explanation

Participants were concerned about the breakdown/transparency of price.

Therefore the inline help was added to show detailed explanations when mouse hover.

Next Step

If more time is allowed, recruiting more participants for the testing would be conducted. And responsive versions could be fully developed for all screens.