Case Study: Designing Future Time Travel Portal, the UX way

6 min readFeb 6, 2021

A case study of a new time travel adventure, developed with a responsive website that allows users to seamlessly book a time travel tour, with a sense of wonder and discovery.

Project Background

The human race has been dreaming about time travel for ages. And Time travel is finally here, with the announcement of the International Concordance on Time Travel, Zeit is launching a responsive website to enable users to book travel to a different time and places. With a total of 289 destinations all over the world from prehistoric times through today, travelers will be able to look and do things typical of the time.
Some of the popular packages include: resort outside Vienna in the 18th century and witness Mozart’s first concert; resort in Australia during Jurassic period; get the feeling of the historic day Neli Amstrong landed on the moon and many more. Zeit’s goal is to fulfill potential customers ’ expectations and requirements on booking a time travel trip.

Problem Statment

How might we: Design a responsive website which is easy to use and navigate and allows users to book an online journey without frustrations.

How might we: Design a brand identity that is neutral and modern but retains an ode to the past.

Let’s Get Started

The first thing I want to do is identifying the UX Design process, and defining each stage, then going into more details throughout the case study.

Stage one, Empathize

We start our journey with research where the essential part is understanding our potential users, empathize with their problems and needs, and test some of our assumptions. I conducted several types of research including secondary research, competitive analysis, and user interview.

Here is the summary of findings from secondary research:

Here is the summary of findings from the competitive analysis:

For the primary research, I conducted 1-on 1 interviews over the phone due to a pandemic situation. The interview questionnaire consisted mostly of travel questions and booking travel. I conducted these interviews to better understand users' needs, frustrations, goals, and motivations, regarding travel and booking travel experience. I interviewed 5 friends from different locations and backgrounds. Each interview lasted about 15minutes and I created a detailed transcript of each interview for further reference.

These empathy interviews were crucial in helping determine the shape of Zeit’s website, along with defining the elements that must be included for smooth and easy navigation.

Bellow is the graphic with characteristics of my interviewees:

With gathering all the data of the previous research methods I developed a persona: Someone to share the characteristics of my interviewees. Creating this persona helped in understanding the user’s needs, goals, behavior, experience and generally helped in the whole designing process.

1Designing the empathy map is one step further in developing my persona. Synthesizing the data of the user’s interviews helped in illustrating an ordinary day for the persona with her attitude and behaviors, which allows expanding the knowledge about users and identifying the patterns.

Stage two, Define

This is where I summarized the data from the Emphasize stage and put all the information together which help better understand the framework of Zeit’s website. The insight of the data I collected lead to the next level of defining and creating the project goals and the product roadmaps.

I created a project goals table outlining the business, users, and both goals.

Creating the project goals enabled me to create the feature road map outlining the features of Zeit’s website. I organize the features in their order of importance along with their priority, labeled accordingly as P1, P2, etc.

Information Architecture

So far, I have mostly discussed the way to understand user’s behavior and identifying their patterns. The next step in designing the solution is the general structure of the thing. Information architecture(IA) is a way of organizing a bunch of information and giving them some structure. The structure determines the steps in the user's story.

Therefore I conducted an open card sorting task with 8 participants. They’ve been asked to sort the index cards into categories that make sense for them and label each category themself. Analyzing the sorting pattern helped me learn which ideas or features are most related to the minds of the users and to establish the foundation for the structure of the Zeit site. Based on the findings I created a sitemap as well as task flow and user flow.

Sitemap

Task Flow

User Flow

Stage three, Ideation

This is the stage where we further developed our product. I started sketching my ideas for the Zeit site and I went through several iterations before I choose the final versions for the low-fi wireframes.

Using the work from my sketches I created mid-fidelity wireframes for Zeit. Here I have the homepage, trip listing, and trip details page:

I also have created mid-fidelity responsive wireframes of the Zeit homepage for desktop, tablet, and phone, shown below:

Brand Identity

For the branding of Zeit site, I decided to use a simple logo TIMETRAVEL which perfectly blends with the site's mission and the idea of connecting classic and modern elements. Also, I created UI kit as the design system which is an essential tool in providing standards of reference for typography, color palette, logo, and all the UI elements used in Zeit site

Stage four, Prototype

Developing the wireframes and creating the UI kit naturally lead to the next step of creating high-fidelity wireframes and prototype. I created a journey for the users to search for a trip and view the trip details and make a reservation.

Stage five, Testing

Usability testing was conducted with 6 users. I had one simple task for the user to find more about Zeit’s trips, find specific Renaissance Period trip to Italy, Europe, review the trip details, and attempt to make an online reservation.