Zeit Overview Banner

Time travel is no longer fiction.

Imagine: You get to re-live specific points in time, without worrying about any of those butterfly effects that cause irreplaceable damage to the very fabric of time. That sounds great, doesn't it?

Well lucky for you! It now exists... almost.

Zeit, a subsidiary of Virgin, has the technology to now provide time travel to the general public. Not only do you get to choose a point in time, but you also get to choose a place in the world. With 289 trip packages planned, they are now looking to set up their online presence and booking process in order to entice travelers to book a future trip (to the past) with them.

The Challenge

How do we provide a functional booking experience for these trips?

The Needs

From user research, I defined the following needs that users had when it came to traveling and booking experiences:

Planning Should Not be Rocket Science

Much of the inconveniences surrounding booking trips is what comes after: Figuring out what to do. With all the planning needed, from having to manually look up places to go to (along with images), activities to do, the weather, what to bring, mapping out points of interests on a map and trying to maximize efficiency... planning gets long-winded. Users need to be able to plan everything easily through Zeit in order to have a less-stressed time beforehand.

Itinerary Details All There

And with so many details to consider, users need to be able to easily access this information in order to reduce the amount of frustration they have with feeling unprepared going into a trip.

Pick and Choose Your Vacation

Having a flexible itinerary in the context of buying a travel package is a necessity because it helps save time with researching and allows users to pick and choose what they want to get out of activities.

The Features

The features that Zeit offered boiled down to shaping Zeit's business model to cater to user's needs and to offering these services in a user-friendly way on the website throughout the booking process. The interface was achieved by utilizing existing design patterns.

Visuals and Guides

Picture of Zeit's Pages for Easier Trip Planning

Transparent Trip Details

Picture of Zeit's Features for Transparent Trip Details

Your Trip, Your Choice

Picture of Spotify's Screens for Mixtape Gifting

Background

The Problem

Time travel is here. Zeit, a subsidiary of Virgin, has the technology to now provide time travel to the general public. I was tasked to create a brand identity and set up a responsive e-commerce website for Zeit to sell their 289 available trip packages.

Disclaimer: This is a speculative project. Zeit is a fictional company.

The Challenge

How do we provide a functional booking experience for these trips?

Logistics

Team

Role

Duration

Tools

Self-directed, with feedback given from mentor and peers

UI/UX Designer

12 weeks
March - June 2019

Figma, Adobe Illustrator, InVision, Maze, Whimsical

The End Product

View Final Prototype

Design Process

01. Research & Analysis

02. Ideate & Define

03. Design

04. Usability Testing

Researched the current market and potential users

Explored how to best approach site architecture and user navigation

Created a brand identity and applied it create a high fidelity prototype

Evaluated viability of product's features through testing and feedback

01. Research & Analysis

Purpose: Scoping out the current market and potential users

Process: Market Research, Competitive Analysis, User Interviews, Persona, Empathy Map

Since Spotify's app and service is already at the forefront of its industry, uncovering statistics and users' experiences would help determine what area I could improve with a new feature.

Market Research

I researched the travel market to locate trends and demographics. Learning more about these two aspects gave me a sense of who Zeit's audience might be and their needs.

Booking Trends

Gone are the in-person travel agencies of yesteryear. With Internet becoming so prevalent in our every day lives, digital travel sales were accounted for 50% of total travel sales in 2018 and direct booking via a company being the #1 trend in sales. Why is this the case?

Conveniency

With information, travel agents, and pictures all available online, it is easier to make a judgment from the comfort of one's own home.

Trust in Payment Methods

Online payment methods have become more secure, making consumers feel secure in making these large purchases.

Quick Comparison

Being able to pick-and-choose different travel packages across different companies supports the conveniency factor of digital booking.

Demographics

Key age groups that travel are 22-56 (although certainly everyone travels!). Generations within this range each have slightly different driving factors as to why they travel, so I took a look at these.

Gen Z

- Motivated by immersive experiences that lets them live life as locals in unique destinations

- Influencer culture drives Gen Z's consumption of travel trends and where to go

Millennials

- Motivated by adventure, food, and "bleisure" (business and leisure)

- Due to their extensive use of technology and social media, they are huge drivers of the travel market growth

Gen X

- Motivated by exploration, family-oriented activities, price sensitivity, and cultural interest

- Reviews and informative content heavily influence their decision-making

Baby Boomers

- Motivated by "bucket list" trips, activities, and feeling pampered

-Tend to take the longest trips (10.5 days on average)

Competitive Analysis

Comparing strengths and weaknesses of Zeit’s competitors allowed me to get a better understanding of available features and offerings on the market.  This would later guide decisions on Zeit’s product strategy and user interface.

User Interviews

I reached out to ten participants who traveled within the last year to understand their pain points and preferences that they have when booking and traveling. The interviews were conducted with open-ended questions.

Some key findings were:

  1. All ten participants wanted to ensure that their destination was safe and tourist-friendly
  2. Four participants appreciated booking through travel websites that had simple site navigation, with visual cues and a short booking process
  3. Seven participants liked being able to having a “local” experience when traveling
  4. Manually researching points of interest was the biggest frustration/inconvenience for users when planning trips
  5. Four participants expressed interest in using visual maps to help guide their travel decisions

I think for me, it's plotting out where we want to go. And really figuring out everything we want to do, and plotting it out and see how far everything is.

Participant #3, Athena, when asked about inconveniences of planning trips

Aha! How to attract users to booking with Zeit:

• Simplify the complexities of researching for a trip
• Provide assurance that the destination is safe
• Entice users with local experiences

Persona

Utilizing the findings from research, I created a persona under the name of Markus. Through Markus, I could build empathy and understand user needs, behavior, and pain points when it came to traveling and booking.

Empathy Map

Next, I developed an empathy map to get a full scope of Markus' behaviors and attitudes. By building more empathy through Markus, I could identify what Zeit would need to offer.

Both the persona and empathy map defined overarching needs to accomplish:

  1. Have access to relevant trip details
  2. Reduce the time and amount of effort it takes to research for a trip
  3. Flexible trip package options for customization

02. Ideate & Define

Purpose: Explored how to best approach site architecture and user navigation

Process: Card Sorting, Site Map, User Flow

Card Sorting

With a catalogue of 289 trips that Zeit offers, being able to sort and filter through them would streamline user experience. Using an in-person card sorting with four participants, I could see how users would categorize different trip packages.

Recurring categories were time period, location, and activities. These were indicative of users' filtering mindset and were thus implemented in categorizing the available trips.

Site Map

Synthesizing information from the competitive analysis research and card sorting, I generated a site map for Zeit’s website. The map helped me visualize the relationship between screens and the overall flow of the site.

User Flow

A user flow was created to simulate how a user would navigate through the site to book a trip through Zeit, while considering how to meet their needs through Zeit's various features. This would later provide a usability testing task for site functionality.

03. Design

Purpose: Created a brand identity and applied it create a high fidelity prototype

Process: Mid-Fidelity Wireframes, Style Guide, UI Kit, High Fidelity Responsive Mockups

Mid-Fidelity Wireframes

To build Zeit’s website, I first sketched designs, then created mid-fidelity wireframes to visualize information architecture and better understand the flow between screens. Below is a sample of several wireframes.

Style Guide

I created a style guide to build a framework for Zeit’s visual design.  Keeping in mind that Zeit’s debrief wanted a brand identity that was both futuristic and historical, the choices for the logo, colors, typography, and photo treatment exaggerated a retro and modern feel.

UI Kit

I created a UI kit to use for reference for various UI elements on the website.  The treatment of all elements were done to align with the look and feel of the brand identity.

High Fidelity & Responsive Mockups

Utilizing the wireframes, style tile, and UI kit, I built a high fidelity version of the landing page and experiences page, along with tablet and mobile versions.

The interactive map originally found on the landing page wireframe was moved to the “Modern History” page to better streamline the user experience on the landing page.

The remaining pages were built as desktop pages only for usability testing.

04. Usability Testing

Purpose: Test the viability of implemented features through usability and feedback

Process: Usability Tasks, Affinity Map, Final Prototype with Priority Revisions

I conducted usability testing with eight participants using Maze in order to test the functionality of the website and observe user interaction. Through this, I could identify pain points or areas of confusion on the pages that could be improved.

Usability Tasks

I provided three tasks flows for participants to complete:

  • User Tasks
  1. Navigate from the landing page to the trip page through filtering out to find the “Marie Antoinette” trip via the “Modern History” page
  2. Read about the trip
  3. Book a trip for the Marie Antoinette package

Affinity Map

To identify what worked, consistent user actions, and what to improve upon, I created an affinity map based on my usability findings.

Final Prototype with Priority Revisions

Using the affinity map, priority revisions were completed to continue to ensure that Zeit's website was functional and user-friendly.

  • Key Findings
  1. All users were able to successfully complete the tasks
  2. Four participants had positive comments regarding the visual design
  3. Four participants stated they were unclear as to what the itinerary map icons stood for
  4. Four participants had positive comments regarding the interactive maps found on the “Modern History” page and the specific trip page

Conclusion

Zeit’s project provided a challenge in that it was the full scope of what goes into building a digital product—from researching all the way to implementation.

As some drafted UI elements were changed in the finalized prototype, I discovered how these patterns might be better improved upon by either simplifying them or adjusting them to fit on another page. Looking at these patterns in a different perspective helped me understand what sort of design patterns users and I should expect when looking at e-commerce websites.

Next Steps

Tighten Up Visual Design
To ensure a smooth and proper handoff, I would inspect the visual design to ensure that all elements are consistent with one another.

Build Out Additional Pages
As the website was not fully fleshed out, the remainder of the pages can be built out to make a complete prototype.

Re-test Components and Iterate
With many potential features to test (such as the interactive maps, specific trip pages), I would continue to delve into any specific pain points users may have with these features.

^
Back to the top
Culture CookSpotifyJaunt Coffee RoastersZeit