Zeit MacBook Mockup-1 copy2

ZEIT

E-COMMERCE WEB DESIGN

Client: Zeit, a fictional time travel agency

Role: UX/UI Designer

Framework: DesignLab's UX Academy

Tools Used: Sketch, Illustrator, InVision, Zeplin

Background

Zeit, a fictional time travel tourism company, is a subsidiary of Richard Branson’s Virgin Group empire. After years of discussions, the International Concordance on Time Travel has finally given Zeit the green light to begin developing the time travel tourism space. With a total of 289 approved destinations around the world ranging from prehistoric times through present day, Zeit is giving people the opportunity to travel into the past to experience history.

Challenge

Zeit was looking to design an e-commerce website that allows customers to book travel packages to different times and places.

Solution

I created a time travel booking website that uses familiar online booking design patterns in order to create an intuitive and familiar experience for Zeit users.

Research

I chose this assignment because I've always had an interest in books and TV shows about time travel so I thought it would be a fun project. That being said, it was difficult to research (and test) not only a product, but also a concept, that doesn't exist. Therefore I focused on real travel booking websites and aimed to better understand how users book travel online. Additionally, I was interested in seeing if there was any interest in traveling back in time and if so, where and when would they be interested in visiting.

Competitive Analysis

I researched the most popular travel booking websites and looked at their strengths and weaknesses to get a better understanding of what is currently available and expected. I also created provisional personas to understand who Zeit's potential users might be.

Zeit Competitive Analysis and Provisional Personas

Interviews, Survey, and Observation

With this broad understanding of the market trends and competitors, I then interviewed five participants about their personal experiences with travel booking. Each participant represented one of my provisional personas; The History + Sci-Fi Buff, The Adventure Seeker, The Wealthy Traveler, The Social Media Influencer, and The Weekend Getaway Seeker. I created an interview script with open-ended questions and recorded the interviews on my phone to make sure I didn't miss anything. I also created and distributed a survey and received 29 responses.  

Additionally, I conducted a user observation where I watched as the user searched for flights, hotels, and activities online. I had already received a lot of data from my interviews and survey and didn't expect to learn anything new so I was surprised at how helpful the observation was in the end. The user became frustrated with certain aspects of the sites she was searching but didn't even realize that they were bothering her and would never have thought to mention it during an interview. 

Zeit Observation

Here are a few key insights from this research:

  • Ease and efficiency: a majority of participants said that they like the site(s) they use because they are easy and simple.
  • Helpful filters and search options: an overwhelming majority of participants filter their search results by price, number of stops, and duration of flight. 
  • Understand time travel safety: Even those who said that they would be interested in trying it are concerned about safety and repercussions and need to be reassured.

Define

Persona

Using all the gathered data, I developed a user persona based on a friend who I had interviewed/observed. Yale recently returned from traveling in Nepal and is starting to plan her next adventure. 

Zeit Persona

Ideate

Card Sorting

Using OptimalSort, I had four participants categorize and label 30 cards (listing historical events and places) to see how potential users would sort and title the categories. Overall, the cards were sorted into similar groupings but the category titles were all over the place. 

I did an additional round of testing where I had seven participants title pre-made categories. This helped me focus on finding the proper wording for the category titles. Some cards were repeated in multiple categories because many participants felt that some cards could fit in a few places.

Site Map

Next, I created a detailed site map based on existing design patterns for travel booking sites and the findings from the card sorting activity.

Zeit Site Map-final2

Task Flow

I wasn't able to create every page listed on the site map due to course time constraints so I created a task flow laying out all the pages I would design. The task is for a user browsing the site and booking a trip.

Zeit Task Flow

Design

Low Fidelity Wireframes

After sketching different variations, I designed low fidelity wireframes of the key screens for the user task, which was to book a trip to Woodstock. I took a lot of inspiration from various travel booking sites and wanted to keep the site clear and easy to use.

Homepage

Zeit Wireframe – Homepage

Interests Page

Zeit Wireframe – Interests

Art and Culture Page

Zeit Wireframe – Art and Culture

Woodstock Trip Page

Zeit Wireframe – Woodstock

UI Kit

It was then time to add the UI and visual design to my wireframes. I searched for inspiration on Pinterest and created a mood board as a reference. A UI Kit was created combining all elements used across my high fidelity wireframes.

Zeit UI Kit

Prototype and Test

High Fidelity Prototype

Applying the UI kit and images to the wireframes, I designed high fidelity mockups for the key screens in Sketch and created a prototype using Invision.

Homepage

Homepage 2x

Interests Page

Interests 2x

Art and Culture Page

Art and Culture 2x

Woodstock Trip Page

Page 4 (Woodstock)-final 2

Usability Testing

Overview

As I prepared for testing, I created a test plan outlining goals, tasks involved, and a script. Using Invision App, I tested my prototype on four users. Testing occurred during the Hanukkah holiday so I offered all my testers a delicious sufganiya (donut) as a thank you!

Test Goals

  • Evaluate and understand how users interact with the Zeit website.
  • Identify areas of success or failure in the navigation, layout, and flow.
  • Test the overall quality and ease of use regarding the navigation and flow of the design.
  • Test if the purpose of the site (time travel) is clear.
Zeit Usability Testing Photo

Key Findings and Iteration

Once testing was complete, I created an affinity map to highlight my findings and clearly see what iterations needed to be made. The biggest issue I had during testing was that every single tester thought that Zeit was virtual reality. Although they knew that the website was only a prototype and not a real site, they never would have thought that it was for something fictional like time travel. The great thing about testing is that it is always helpful to get another perspective and I would never have realized that the site could be mistaken for VR without it. After testing, I went back and iterated the prototype by adding additional copy to make it clear that Zeit is a time travel tourism site.

Final Thoughts

This was my first UX design project and I really enjoyed it! I learned many techniques from interview tips, to UI design (which was very new for me), to prototyping and testing. The most challenging aspect of this project was designing for a concept that doesn't exist (time travel) but I sharpened my problem-solving skills and was able to work through it. It was definitely a unique project and I'm very proud of the first site I ever designed!

View More Work

TwitterIntegrating an online feature into the iOS app (fictional)

Happy TailsDeveloping a live streaming platform for animal shelters (fictional)

HomeScanCreating an at-home photo digitizing service (fictional)

Tel: 058-621-0255 (Israel) / 646-299-8373 (NY)

Tel: 058-621-0255 (Israel) / 646-299-8373 (NY)