Personal Project

ZEIT.COM - Book Time Travel Trips

Responsive Travel Booking Website

My Role: Research, Information Architecture, Interaction Design, UI Design, Visual Design, & Usability Testing

Project Overview

Background

(This is a fictional project)

Virgin Group has been able to make time travel tourism available to all, and its subsidiary, Zeit, will be providing the services. Zeit is looking to create their new brand and set up an e-commerce responsive website in which they can sell travel packages to a total of 289 destinations all over the world, up from prehistoric times through today. Zeit wants to make the selling of the tickets as easy as possible, like today’s travel agency packages. Since it’s quite restricted still in terms of flexibility, people will be able to shop trips like you now shop books or movies: find what interests you, read more about it, and make a purchase decision.

High Level Design Goals

Design a logo

- modern and historical at the same time, reflect a modern technology with a link to the deep past

Design a responsive e-commerce website

- easy to use and allows customers to browse through all different trip categories and details, filtering via interests and classifications

Establish a brand message

- modern and fresh, classic and historical

Challenge

The research for Zeit website development was challenging because it was supposed to be the first time-travel company and there was not much existing data or research done on the specific domain. Therefore, I needed to find out similar products and services, and identify its potential direct and indirect competitors to do the analysis. The empathy research was focused on analyzing Zeit’s potential users’ current behaviors, needs, and pains within the problem space of travel e-commerce, grounded in the fact that human needs and behaviors don’t change very often compared to technology advancement. The challenge of the visual design of this website was that it should blend "modern" and "historical" together, and look unique to the viewers.

Process

Discover

Literature Review, Competitive Analysis, User Interview

Research Goal

  • Identify the characteristics of potential customers

  • Learn about what motivates people to travel to a place and what intrigues them to do a time travel

  • Gain insights into travelers' trip planning and booking process and what their needs and pains are

  • Find out the strengths and weaknesses of Zeit’s potential competitors 

Literature Review Findings

Competitive Analysis Findings

Interview Findings

Pain Points

  • Planning a trip takes a lot of time and effort.

  • Travel booking websites’ is text-heavy and of poor visual hierarchy, so it’s hard to read through.

  • Travel packages usually do not allow customization.

  • It is difficult to compare multiple booking or destination options on a website or across websites.

  • Hard to align information across different websites and resources

Needs​

  • Get personalized suggestions on flights, hotels, destinations, and landmarks.

  • Access to trip reviews from other travelers.

  • Packages that allow customization and savings at the same time.

  • Information on travel booking websites is transparent and accurate.

  • See previews of destinations and activities.

Define

Persona Development, Empathy Map Creation, Storyboard Development, Project Goal Definition, Feature Roadmap Creation, Site Map Creation

Persona Development

I identified patterns in multiple interviews and created a persona as an agent of one important type of our target users. The persona realistically represented the goals, needs, and frustrations of that type of users. (In the real-world situation, I would develop more than one persona to cover different types of users.)

Empathy Map Creation

Based on the interview data, the persona created, and my familiarity with similar people in my life, I created an empathy map showing the target customers’ motivations, behaviors, pains, and needs within the problem space in the context of their real life.

Storyboard Development

With the persona and empathy map in mind, I created a storyboard depicting the possible browsing experience on Zeit’s website, including the initial challenge faced, needs generated throughout the process, and how the product met the typical users’ needs. 

Project Goal Definition

In order to determine the features of the product and the priorities, I reviewed the business goals (mainly from the project brief) and the user goals (from the user research data) and came up with several technical constraints. Then I created a Venn diagram to document both the individual considerations and the common considerations from the business side, user side, and technical side, to help further decision making.

Feature Roadmap Creation

I created a list of features corresponding to user research findings, business needs, persona, and the market, and then prioritized the features based on their importance to the business and the users.

Information Architecture -  Card Sorting

In order to better categorize the provided trips on Zeit’s website to allow for a smooth trip browsing and searching experience, I ran card sorting sessions on recruited participants to learn about their mental models.

Information Architecture - Sitemap Creation

By reviewing the product features and imaging how the primary persona would work through Zeit’s website, I created a sitemap to demonstrate the website’s main content structure. The relationship between different content on the site was mapped out.

Design

Sketches, Task Flow, User Flow, Wireframe, Logo Design, Brand Style Guide, UI Design

Sketches

I created 3 sketched variations for the homepage, exploring the possible design directions I could go with later. Then I decided on the parallel-scrolling design (the 2nd one), which was stylish and held a better balance between immersiveness and easiness to browse and navigate.

Task Flow & User Flow

With the persona goals in mind, I developed a task flow illustrating the ideal workflow for a user to accomplish one critical task on the website: browse through the trips and make a purchase.

Based on the task flow, I created a user flow, taking into considerations of different paths that a user might go through inside the product to complete each task.

Wireframes

Based on the flow charts and earlier sketches, I created a set of wireframes showing the layout and available interactions of a few core pages which allow users to browse and search for trips

Responsive Wireframes

The design is responsive and adapts to tablet and mobile devices.

Visual Design - Logo Design

I started by sketching out a variety of logo ideas. Then I digitalized and developed 3 ideas I liked.
I landed on the rocket/kite logo in the end because it better fit the design requirements that the logo should be modern and historical at the same time and that it should “reflect a modern technology with a link to the deep past”. 

(The logo still needs further polishing.)

Visual Design - Brand Style Tile

I did some research and figured out the visual style I was going with for Zeit’s website. I created a style tile incorporating the logo, color palette, typography, moodboard images, etc. to serve as a guide for later visual and UI design work.

UI Design - Mid-high Fidelity, Responsive

Working from the wireframes and the brand style tile produced earlier, I created a set of high-fidelity responsive UI mockups. The design intention was to create a visual style that matched the brand message and at the same time was unique of its kind. The design should also help form an immersive browsing experience.

Testing

Interactive Prototype, Usability Testing, Affinity Mapping

Usability Testing

I linked the UI design screens together in InVision according to the defined flows accomplished in the interaction design phase to create an interactive prototype. This prototype was then used for usability testing.

A detailed test plan, including test scripts, was created to help guide the recruiting and testing process, and a total of 4 usability testing sessions were conducted. Issues and feedback came out of the sessions were documented.

Testing Results Synthesis - Affinity Mapping

I compiled the notes taken from the testing sessions and did affinity mapping to categorize the findings and generate recommended changes both for the short term and for the long term.

Testing Summary

A testing results report was created to document the main pain points, common wishes, and recommended changes with priority. Below is a screenshot of parts of the report. After testing, I made iterations on my design.

Iterated Design

After testing, I made iterations on my design. Below are some page demos.

Conclusions

Zeit was both a challenging and fun project, especially at the research stage. Time travel was still a fictional service but was grounded in the general travel industry as well, where a lot of insights could be drawn through thoughtful research.  I focused my research more on the current travelers' behavior when booking trips on existing websites or through existing services, given that human behavior was relatively consistent compared to technology advancements. I also quested people's considerations and wishes if time travel was available to them, which inspired a lot of great ideas.

 

For UI and Visual design, I went for a more distinct style compared to the current travel booking websites. This was considering that Zeit was unique of its kind and was rather high-end in its positioning, so I wanted to make it look stylish, mysterious, immersive, and eye-catching

 

It was fun to put others and myself into a future viewport and created things that were rather original. This project was a great practice for innovative thinking and problem-solving for new challenges. I had a lot of fun in this, and so did my research and testing participants, according to them! :D