top of page
Zeit mock up6.png

ZEIT 

Time Travel Agency

End-to-End a first of its kind time traveling agency responsive website. 

UX/UI Design

Project Overview

Challenge

ZEIT is a time travel agency that made time travel possible for anyone to experience historical events.

Being the first of its kind to have time travel vacations, ZEIT needed help establishing itself in the travel industry. My challenge was to design an e-commerce platform for this evolved and new technology.

Objective
  • Design a logo for the company that can be historic and futuristic at the same time.

  • Design a responsive e-commerce website that is easy to use and that allows customers to browse through all different trips and time periods.

Scope

- Responsive Website

- Branding

Tools

- Figma

- FigJam

- Photo shop

- Optimal Workshop

Team

Self Directed, with feedback from a mentor and peers

Duration

- 80 hours

What was my process?

Want to go directly to a certian process? Just click to where you want to go.

1. Empathize

2. Define

3. Ideate

4. Design

5. Usability Test

Empathize
Desktop - 3.png

Let the Research Begin!

EMPATHIZE

To help me stay focused, I started by making a research plan, I found that the target audience is people in their mid. 20s to mid 30s who are looking to get away from the norm and spend time with their family at affordable prices.

Goals

  • What sources are consumers using to book their trip

  • What problems and enjoyment do travelers run into when booking their trip

  • What is the most important to users when planning a trip

  • What type of deals and offers do they look for when it comes to traveling

Methodologies

​Following up with my goals in mind I broke down search into:

  • Secondary Research - Market Research and Competitive Analysis

  • Primary Research - Interview Users

Market Research & Competitive Analysis

Most competitors give a wide variety of locations, but do not give any packages or offers. Users can share their own trip experiences and give others tips and pictures of their travels. Travel sites have a hard time keeping users updated on safety and hidden fees. With this I was able to identify any gaps in the features that ZEIT might address in their website.

STRENGTHS

  • Offers a varity of options 

  • End-to-end booking service

  • Profile to track travel history

WEAKNESSESS

  • Information is not always updated or correct

  • Hidden fees may apply

  • Site controls reviews and can edit without informing users

Tripadvisor-Logo.png
580b57fcd9996e24bc43c513.png

WEAKNESSESS

  • Only offers lodging

  • Company does not protect customers

  • Limited options

STRENGTHS

  • Unique accommodations 

  • Affordable prices

  • Simple UI design 

  • Variety of locations 

2560px-Expedia_2012_logo.svg.png

STRENGTHS

  • Cancellation flexibility

  • Mapped locations

  • Members can use points 

  • Variety of locations 

WEAKNESSESS

  • Expensive

  • No special offers

  • Does not keep user informed of any changes

Booking.Com-logo.png

STRENGTHS

  • Customer Reviews

  • Favorite button to save

  • Multiple categories and filter options

WEAKNESSESS

  • Limited information on location

  • Website overwhelming & busy

  • No cancellation option

HonorsLogo_Black.png

STRENGTHS

  • Offers a varity of options

  • Members can use points 

  • Beautiful Interface

WEAKNESSESS

  • Package deals only for members

  • Using points is confusing

  • Not affordable for bigger families

Participant Interviews

I conducted 1-on-1 user interviews, using an interview guide. I invited the participants to share their stories. The 7 participants, 5 females and 2 male, ranged in age from 19 to 61. The interviews lasted from 20 minutes to an hour.​ 

That's what they said

"If I can find a place that both my husband and I agree on and know it's safe, we just pack up and go."

Desktop - 3.png

"Anything involving a beach and food that my family can enjoy, we are there."

Desktop - 4.png

Clarifying User Goals & Needs

After grouping similar insights together, I synthesized common categories users shared. 
From these categories, I narrowed down to three most common insights and corresponding needs.

User's Goal

Desktop - 9.png

Special Deals & Packages

6/7 participants

are more likely to book a trip when offered deals and  packages.

Desktop - 10.png

Activities Offered

6/7  participants  

look for activities to do near the location they plan to book .

Looks & Reviews

5/7 participants

rely on images and reviews from former travelers.

Desktop - 7.png

User's Frustrations 

Desktop - 6.png

Affordability

7/7 of the participants

cancel vacation plans due to high cost.

Desktop - 5.png

Safety

5/7 participants

experience frustration when they are not informed of safety issues or if there is no safety information provided.

Desktop - 8.png

Availability Dates

5/7 participants get disappointed when dates are not available for the location they want.

Now Introducing Our User:  Brooke

With all the information gathered so far, I was able to create ZEIT's target customer persona, Brooke.

Brooke persona update.png

Brooke, a 32 year old married chief who has two lovely girls. They love to try new foods and travel. She needs a site that is full of information about safety, adventures and deals that her family can afford in the time of their choosing. ZEIT can help Brooke find that perfect vacation for her family.

Desktop - 3.png

DEFINE

Time to Strategize the Project

Using the Venn diagram put me in the shoes of the company, consumer, and IT. I determined the best way to categorize the vital information that would contribute to the best experience for Brooke. 

ZEIT Reseach goals.png

Feature Road Map

Analyzing data collected from the primary and secondary research, I built a list of most important features that Brooke would need to be able to browse and book her family's trip. To accomplish this I put together a product feature roadmap of any features that might be needed in order for ZEIT's site to work efficiently.

Card Sorting

To help keep the content of ZEIT's website organized, I conducted an open, individual, remote card sorting to understand how users go about finding their next travel experience. 

Ancient Rome 753 BC - 476 AD

The Fall of the Berlin Wall, Germany 1989

Couple of Card Examples:

Age of the  Samurai Japan 1500s

Opening of Disneyland, USA 1955

Man Landing on the Moon, 1969

Building the great pyramids Egypt 50 BC

First Olympics Greece 776 BC

Jurassic Period

BTS's First Concert Korea 2013

Completion of the Great Wall of China 1644

Participants categorized selections by​:

  • Continent/country

  • Culture

  • Events

  • History (ancient history & wonders)

  • Exploration

  • Time periods

Findings include:

Site Map

Users are most likely to search by time period, content, and attraction, which will mainly be found in exploration. With that finding I was able to define the overall structure of the content on ZEIT's website in a way that would be easy for Brooke to navigate. The goal was keeping navigation of the website as simple as possible.

Desktop - 2.png
Define
Desktop - 3.png

IDEATE

Mapping Out Brooke's Experience

Because Brooke is looking for a new and affordable adventure, I made the task and user flow to show how she would use ZEIT's site. Having access to packages offered to her throughout her booking process made it easier for Brooke to narrow her travel plans to what works best for her and her family.

Task/User  Flow

From Ideation to Wireframing

Following both of Brooke's task and user flow charts, I made decisions on how the content of ZEIT's website would be organized and started sketching low-fidelity wireframing. 

Wireframing 1

Sketch 1.png

Wireframing 2

Sketch 2.png

Wireframing 3

Sketch 3.png

Low-Fid and Responsive Wireframing

Taking a couple of sketches, I went out and asked participants who were around Brooke's age what would make their travel experience better and more enjoyable. The participants decided that being able to see a map and select a year was the most desirable out of all the sketches.

Desktop

Tablet

Phone

Ideat
Design
Desktop - 3.png

Simple & Approachable UI Design

DESIGN

Once the low-fidelity wireframes were finalized, it was time for the fun UI design! Keeping in mind ZEIT's aesthetic and what Brooke would like, I concluded the brand's image should be simple, futuristic, and approachable. 

MacBook Pro - 3.png

Responsive UI Design

In order to make her experience informative and easy, I made sure she could look around the home page for descriptions and time periods, while also providing safety guidelines for time travel.

Style Tile

To further develop my design style for ZEIT, I designed a style tile. It served to document my brand ideas and inspirations gathered, incorporate logo design, color palette, typography, and imagery that guides UI design.

ZEIT Style tile.png
Desktop - 3.png

PROTOTYPE & TEST

Time to Test the Site without Users

6 participants close to the same age as Brooke were given the task of booking a trip and to see what ZEIT has to offer.

Zeit time travel_edited.png

Test ZEIT Prototype

Come and travel in time to the destination of your choice and experience history in the making with ZEIT.

Test

The Results are in!

6/6 Participants

found their overall experience enjoyable with the design and easy layout of the website.

5/6 Participants

found tabs on the search bar and the spacing of the sliding cards distracting and would like more space and everything on the search bar.

4/6 Participants

liked being able to find package deals on almost every page, including being offered a package that relates to their trip at check-out.

Desktop - 3.png

Final Takeaways

1. Users do not need a button to find everything they are looking for.
2. Participants enjoyed having all the information available on one site and without the need to use a third party source to plan a full trip. This made users want to explore more of what the site has to offer and want to come back.
3. Breaking down the checkout helps users fill out their information without feeling overwhelmed.

If I can continue working on this product, I would love to expand more on the AR feature and understand its concepts better.

bottom of page