Project type: Speculative

My roles: End-to-end product designer

Background

Zeit, a conceptual new brand from Virgin, has requested a responsive eCommerce website to help them sell time travel package vacations. They've also requested original branding and visual design.

Problem

Because time travel technology is so groundbreaking, users don’t trust that it's safe to use. They also worry about changing future timelines and creating havoc with time travel.

Hypothesis

Building a responsive website that demonstraites and emphasizes the company’s commitment to safety could ease user concerns and encourage them to purchase a ticket to the past.

Challenges

I ran into several problems during this project, namely with my user research and some of the choices I made for the site's UI. Each required extra time and research to correct.

Research

Click to view the full-size image of the competitive analysis

Market research

I began the project by researching existing travel sites and companies, paying attention to the COVID-19 pandemic and the ways it's changed travel.

All my findings can be viewed in more detail in my research report.

User interviews

I interviewed four people from diverse backgrounds (ages 18-53) who had varying degrees of travel experience. All four participants worried about time travel messing up the future, and three worried about their personal safety due to their racial or other identities.

• “Well, being gay, I guess my personal safety could be in jeopardy if that came up. I mean, I could be imprisoned or I could be beaten up."
  

• “[Time travel] makes me feel a bit nervous because I know that things weren't great for people like me in many places."

• “I remember thinking if maybe all you did was move this thing here, but then that causes a car accident, you know? That's cause and effect.”

The central problem was user trust. How could we convince users Zeit is safe?

User survey

Gathering more data

Because my interview participants expressed strong opposition to the very idea of time travel, I created a survey to gather more data. From 32 responses I learned:

• 62% worried about the "butterfly effect"
  

• 25% said a detailed explanation of the tech would ease their concerns
  

• 14% worried about danger related to who they are while time traveling
  

Click to view the full-size image of the persona

Persona

Based on the time travel safety concerns of the users I spoke to and surveyed, I created a persona to represent them, their pain points, and their unique needs when to comes to time travel.

Information Architecture

Card sorting

No need to reinvent the wheel

Because travel sites are one of the most well-established design trends, I decided to borrow from their standardized organization rather than create a new one. To validate this decision, I conducted a card sort.

Site map

With my organization validated and in place, I created a site map that included pages highlighting the safety of Zeit's time travel and users' ability to contact support 24/7.

Click to view the full-size image of the sitemap

User and task flows

Safety first

Based on users' expressed concerns about safety, I focused the flow on the safety pages new users were most likely to view first.

The user flow is too large to display on this page, but is available:

Click to view the full-size image of the task flow

Sketches & Wireframes

Click to view the full-size image of the sketches

Initial desktop sketches

I began by creating four sketches with each spotlighting a different feature. I realized that while it was important to highlight safety for new visitors, it would be just as important to make it easy for return users to quickly find and book a trip.

Click to view the full-size image of the wireframes

Responsive wireframes

After combining a few ideas from my sketches, I created wireframes for desktop, tablet, and mobile sizes.

Mid-fidelity prototype

To make sure my designs would work in an interactive context, I created a prototype from the wireframes.

Defining a Brand

Moodboard

Inspired by air travel and the stunning natural color gradients of the sunset, I created a moodboard that also borrowed from existing Virgin brands to create an exciting yet inviting look and feel for Zeit.

Logo & style tile

Time travel suggests adventure and novelty so I wanted something unique and distinct for the logo and style — but I also knew from my research that users had concerns about safety, so I tried to find a balance.

Unfortunately for me, I didn't test the colors together before finalizing them. More on that in the next section.

UI Struggle Bus

Use the slider to see the before and after

Painful palette

The colors I'd initially chosen looked great in a gradient together, but totally clashed on the page.

Filtering fiasco

Creating a package search menu that was visually pleasing and that also had all the functionality users needed was a major challenge.

Rascally reservations

Similar to the package search, finding a design for a reservation system that worked for the pre-set departure dates and times Zeit offers gave me a lot of trouble.

User Testing

Test methodology

To test my design, I created a high-fidelity prototype of the main booking flow to conduct an unmoderated user test on Maze.co, and recruited 15 participants from the student design community.

Key test insights

• 100% completed the primary user flow

• A minority expected traditional search

• A minority preferred a calendar for booking

Revisions

Reworked search

To address user expectations, I implemented a drop down calendar in the package search.

Revamped hero

One user reported thinking they'd landed on a vacation site selling trips to Greece rather than a time travel site.

Breadcrumb states

One participant noticed the checkout breadcrumbs only had two states, which didn't make it clear when they'd completed a previous step.

High-fidelity prototype

If you'd like to test out Zeit's revised main search and reservation flow for yourself, you can check out my prototype (desktop only).

Lessons & Next Steps

What I've learned

This project was a challenge through and through, but I'm grateful for the setbacks because they taught me a ton!

• Make copies of everything

Unfortunately, I accidentally "wrote over" the initial versions of my designs, so I lost quite a bit of the earliest work. I would've loved to have that to refer back to for this case study, but lesson learned!

• Test early & often

As I learned from my mishaps with the site's color palette, that headache could've been avoided if I'd spent a few extra minutes playing around with the colors in combination. Redoing the palette was costly timewise.

• Budget time for research

Finding people to talk to, scheduling them, then conducting and transcribing the interviews took more time than anything else in the project. I also had two participants drop out at the last second.

• Conceptual design is difficult

Conducting research in particular was a challenge, but I’m glad I took it on because it forced me to think outside the box. I also feel like taking on this project has given me the confidence to tackle any future travel project.

Next steps

• Design the rest of the site

Again, because of time constraints, I wasn’t able to build every necessary page, so I’d like to work on the destinations and activities pages.

• Build and test the mobile flow

Also due to the time constraints of the project and the scope, I only made a homepage for mobile. I’d love to build out the rest and test it on mobile.

• Test more flows

I only tested one aspect of this design. I’d love to test the Your Safety pages I made as well, and run a moderated study of my revised prototype.

• Add more interaction design

While my prototype is perfectly functional as is, I’d like to add more animations and interactive elements to make it feel closer to a real product.