Personal Project


The Time Travel Experience

  • Background
                • The Basics
                              • Challenges
                                            • Discover
                                                          • Define
                                                                        • Design
                                                                                      • Test
                                                                                                    • Next Step


                                                                                                                  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


                                                                                                                  ZEIT Time Travel Agency


                                                                                                                  08/2018 - 10/2018

                                                                                                                  My role

                                                                                                                  UX Researcher, UX Designer


                                                                                                                  Photoshop, Illustrator, Invision




                                                                                                                  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.


                                                                                                                  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.


                                                                                                                  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.


                                                                                                                  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)


                                                                                                                  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.


                                                                                                                  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.


                                                                                                                  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.


                                                                                                                  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.


                                                                                                                  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.

                                                                                                                  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.

                                                                                                                  View the Prototype