ZEIT
Responsive Web Design
A brand new e-commerce travel site that offers the ability to book time travel packages to the general public.
View Case study

Case Study Overview

My Role UX/UI Design & Branding | Tools Survey Monkey, Sketch, InVision | Time 4weeks

Client

ZEIT is brand new travel service offering time travel packages to over 280 destinations in the past from prehistoric to modern day.

Challenge

Develop a rsponsive, ecommerce website that can easily sell time travel package to the public and convince its potential users of its trustworthiness as well as design the ZEIT brand.

Solutions

A responsive site that offers users the ability to search, discover and book time travel vacations with ease as well as educational components and reviews to establish trust in the brand and products.

*this was a spec project done while attending design school

Case Study Details

Explore this section to dive deep into my design process and see how this project came together or skip below to the takeaway to see what I learned.

Empathize & Define

Research

Methodologies

  • Market research on travel trends
  • Competitive analysis
  • Survey of 32 participants ages 23-70 across income levels and ethnicities.
  • Interviewed 7 participants from those surveys
Findings: Market research
  • Online travel agencies and search engines are the leading travel planning resources across all generations
  • Laptops and desktops are still the preferred method for travel research and booking across all generations
Findings: Competitive analysis
STRENGTHS
  • Lots of quality imagery
  • Helpful search filter options
  • Ability to search for packages in different ways i.e. by interest or destination
  • Detailed Itineraries
  • Ability to book online
  • Phone/live chat support
  • Reviews
WEAKNESSES
  • Most sites only offered group travel, no solo options
  • Some sites had an overwhelming amount of information for each package that was not easy to digest
  • most packages can’t be customized
Findings: Interview

After synthesizing the interview data the following viewpoints were formed

  • Travel is important in people’s lives
  • When these same people were asked if they would travel back in time, with 0 being no way and 10 being absolutely without a doubt the average rating was 9.
  • Everyone vacations, some often
  • Research and booking is a multi-layered, DIY process
  • Friend recommendations are highly regarded. 
  • All travelers are looking for the best deal
  • Some stress around choosing the best place/package
  • Strong desire to experience local culture when traveling, even time traveling
  • Need for itinerary with flexibility
  • Safety is a concern when time traveling, especially for POC
  • Understanding time travel is imperative to building customer trust
  • Setting expectations is important
  • Participants was to read authentic customer reviews
  • Want to know what their day-to-day will be like
  • Are there any restrictions while traveling they should be made aware of
  • Clear description and images of accommodations and amenities are important, especially to people with kids and affluent people.

Persona

Further analyzing of the research allowed me to spot patterns in behaviors, goals and attitudes of the interviewees. These patterns then helped me to create Véronica, a typical product user of ZEIT. Véronica allows me to keep the user as my focus of the design. 

Empathy Map

I created an empathy map based on Véronica to help me understand my user when designing.

Storyboard

Finally, I created a storyboard also based on Véronica to help me better understand how our users will interact with ZEIT.

Information Architecture

Card Sorting

I performed a card sorting exercise with 6 participants in order to develop an optimal site structure and to help users easily sort through the more than 280 time travel packages ZEIT will offer.

Process

Each participant was given 46 cards contains the name of an event in time, location and year. They were asked to sort the cards into groupings that made the most sense to them. 

Sample cards

Discovery

Most participants were not very familiar with history before the 20th century

The following categories were recurring:
  • Pre-History / Pre-Historic / Ancient History - all referring to the time between dinosaurs and the first humans
  • Eras - Mostly became a dump for all cards not stating specific events and only referenced periods in time
  • Political / Democracy / World Changing Events - referring to all things politics, democracy and war
  • Performing Arts / Music / Art - referring to everything from concerts to art shows to  plays to architecture
Insight
  • While many sorting patterns did exist, not all participants sorted all cards the same way leading me to believe that packages will need to be discoverable in multiple ways since not all people  share the same level of knowledge or relationship to history. 
  • Images will play a crucial part in selling packages since participants will more easily recognize imagery of time periods

Sitemap

After synthesizing the card sorting research I was then able to create the following site map. 

Ideate & Validate

User Flows

After designing the architecture based on my research, I developed the following user flows to understand the ways in which a user might try to complete tasks. 

Task: Creating an account

After having a coffee with a friend who just told her all about ZEIT, Verónica decided to go to the site and create and account

Task: Search to find package, forgets password

After listening to the podcast Scene on Radio Verónica has become extremely interested in African American history. She decides to head over to ZEIT to see if they have any trips focussed on the topic. Since she has used the site before she decides to head straight to the home page and use the search function. After browsing some packages and reading reviews she finds the perfect trip to purchase. As she is checking out she realizes she doesn’t remember her password, rather than checking out as a guest she resets her password then finishes the booking process. 

Interaction Design

Based on the user flows I was then able to create a responsive set of mid-fidelity wireframes.

Branding

New/old. Future/past. Modern/historic. Fresh/classic. These juxtapositions are what fueled the branding design for ZEIT.  The act of traveling back in time is ironically a futuristic idea and there is no color palette more futuristic than the galaxy palette.  The blues of the palette also help signify trust while the purple and fuchsia hues add a fresh, exciting touch. The logo which is clean and modern pairs nicely against these colors and the imagery chosen while historic in content in modern and vibrant in technique. 

UI Design

Once the branding was approved I was then able to create the following UI kit.

I used the approved UI kit to then create a set of responsive pages for the ZEIT homepage and product page. 

Testing

Using a mixture of wireframes with some UI flowed in to key pages, I was then able to make a mid-fidelity prototype using Invision that I could use to conduct usability testing. Each test was done in person with 4 participants, 3 female, 1 male ages 28-48. Each participant was asked to perform 2 tasks. All tests were recorded. 

Task 1 - Find and book package

You are a massive Star Wars fan and friend recently told you about a website that allowed you to travel back in time and attend the making of Star Wars Episode 4, A New Hope. You go directly to the website’s home page and browse until you find the travel package for the Star Wars listing. You review the package and then book your travel. 

Completion rate : 100% with small changes to consider

Task 2 - Explore packages

As an avid traveler you were browsing the internet for new vacation ideas when you came across the ZEIT homepage. Intrigued by the idea of time travel, you decide to explore the site to see what types of trips it has to offer. 

Completion rate : 100% but changes needed to make process smoother and design cleaner

Affinity Map

After reviewing the test recording I was able to make this affinity map to help me process my findings and determine my next steps. 

Overall findings

Overall, when searching for and booking a specific package, the current site iteration seems to perform successfully but could benefit from a few small changes. For exploring the site and discovering packages, the current iteration needs improvement to be more successful. Below are some changes to consider. 

Next steps

  • Update language on main home page CTA to include hint of the quiz coming 
  • Make the main homepage CTA button more pronounced 
  • Make packages cards smaller 
  • Offer new ways to suggest packages on home page 
  • Vary the UI on the Packages page to make search content look less redundant 

Takeaway

What I learned‍‍

  • Designing an innovative product presents challenges when interviewing participants. In this case, time travel is a very obscure idea so rather than focussing my questioning on the actual act of time travel I tried to focus more on understanding my participants normal travel experiences.
  • This was my first card sorting experience and I found it very eye-opening. It's easy to make assumptions about how products should be categorized. Getting the experience of watching others do this activity and getting to understand their process made me realize how important this step was in this project.

What I would do differently

  • If I were to do this all over again, I'd likely do even more interviews with a wider range of participants.

My projects

Let's connect

Want to have coffee, work together, or just say hi? Email me, I'd love to hear from you.