DURATION
August - October 2020
MY ROLE
UX Design, UI Design, Branding, Wireframing, User Research
ZEIT: Time Travel Tourism Booking Experience

For this class project, I was tasked with designing a responsive website for a fictional time travel tourism company. This project posed an interesting challenge, as I was required to think creatively in my research & UX goals in order to design for an unprecedented service.

BACKGROUND

Zeit, a subsidiary of Richard Branson’s Virgin empire, has access to the revolutionary new technology making time travel possible! With safety guidelines in place, Zeit is looking to officially design their brand and launch their first responsive ecommerce website. Through their new site, travelers can filter through and select travel packages to visit significant locations throughout history.

GOALS

Build a captivating brand by developing Zeit’s visual identity & logotype.
Design a quality, responsive website where travelers can purchase Zeit packages.

PROCESS

Market Research
Interviews
Competitive Analysis
User Persona

Card Sort
Feature Roadmap
Site Map
Task & User Flows

Moodboard
Logo Design
Style Tile
UI Kit

High Fidelity Prototype
Usability Testing
Affinity Map
Iteration

USER INTERVIEWS

I Interviewed five participants who regularly travel internationally to discover current travel pain points, values, and booking patterns.

USER INTERVIEWS

I Interviewed five participants who regularly travel internationally to discover current travel pain points, values, and booking patterns.

INTERVIEW FINDINGS

USER PERSONA

The user persona of Mia Song was created to define and summarize the behavioral patterns, views and attitudes discovered through the interviews. She helped me better emphasize and understand who I am designing for.

INTERVIEW FINDINGS

USER PERSONA

The user persona of Mia Song was created to define and summarize the behavioral patterns, views and attitudes discovered through the interviews. She helped me better emphasize and understand who I am designing for.

CARD SORT

10 participants across 3 countries, ages 18 - 49, were presented with 28 cards representing moments throughout history. They were then asked to organize the cards and title each category.

RESULTS

The most common groupings were by time period, or by location, however each participant seemed to have a different method of sorting. The broader categories of chronology and location may be a good starting point, however multiple filters must come into play for easy user navigation of the site.

SITE MAP

After researching and analyzing competitors’ sites and developing a feature roadmap, I created an overarching site map to help guide the design.

CARD SORT

10 participants across 3 countries, ages 18 - 49, were presented with 28 cards representing moments throughout history. They were then asked to organize the cards and title each category.

RESULTS

The most common groupings were by time period, or by location, however each participant seemed to have a different method of sorting. The broader categories of chronology and location may be a good starting point, however multiple filters must come into play for easy user navigation of the site.

SITE MAP

After researching and analyzing competitors’ sites and developing a feature roadmap, I created an overarching site map to help guide the design.

TASK FLOW

I utilized Lucid Chart to map out a typical booking task flow. This step was big help in recognizing which pages and features I would need to design and prototype.

In this example, Ben is looking to purchase a dinosaur adventure package.

SKETCHES TO RESPONSIVE WIREFRAMES

How Might We...

...Make finding/planning trips as easy and accessible as possible?
...Instill user confidence in the technology and process?
...Keep the design modern while also referencing the history?

TASK FLOW

I utilized Lucid Chart to map out a typical booking task flow. This step was big help in recognizing which pages and features I would need to design and prototype.

In this example, Ben is looking to purchase a dinosaur adventure package.

SKETCHES TO
RESPONSIVE WIREFRAMES

How Might We...

...Make finding/planning trips as easy and accessible as possible?
...Instill user confidence in the technology and process?
...Keep the design modern while also referencing the history?

LOGO

The “Z” from “Zeit” forming an hour glass where the sand is falling upwards to represent the reversal of time.

STYLE

The style of the icons, colors, and fonts is a main factor in communicating the site experience. I needed to create a theme which would represent the tone of Zeit:  Exploratory, High-Tech, and Clean.

COLOR

I decided to go with a dark theme to enhance the feeling of exploration.

LOGO

The “Z” from “Zeit” forming an hour glass where the sand is falling upwards to represent the reversal of time.

STYLE

The style of the icons, colors, and fonts is a main factor in communicating the site experience. I needed to create a theme which would represent the tone of Zeit:  Exploratory, High-Tech, and Clean.

COLOR

I decided to go with a dark theme to enhance the feeling of exploration.

USABILITY TESTING

There were five participants total. Three were in person and two were remote over zoom. All must have international travel experience and be over the age of 18. All the users talked me through their thoughts, feelings and processes as they navigated the site. Their task was to find and purchase a travel package to a festival in China.

USABILITY TESTING

There were five participants total. Three were in person and two were remote over zoom. All must have international travel experience and be over the age of 18. All the users talked me through their thoughts, feelings and processes as they navigated the site. Their task was to find and purchase a travel package to a festival in China.

HIGH-FIDELITY WIREFRAMES
Explore Prototype

AFFINITY MAP

After user testing, I created an affinity map to help me sort, prioritize and rank the feedback. From there I developed the design into what it is today!

DESIGN HIGHLIGHTS

The biggest challenge was designing how customers effectively find travel packages they are interested in without being overwhelmed by options. The following highlights showcase navigation and search elements created to support the selection process.

AFFINITY MAP

After user testing, I created an affinity map to help me sort, prioritize and rank the feedback. From there I developed the design into what it is today!

DESIGN HIGHLIGHTS

The biggest challenge was designing how customers effectively find travel packages they are interested in without being overwhelmed by options. The following highlights showcase navigation and search elements created to support the selection process.

NEXT STEPS
NEXT STEPS
Up Next

Let's work together.