︎

Time travel is now available for the general public and Zeit aims to bring time travelers to these destinations through their e-commerce ticket booking platform.


Timeline: 6 weeks, 150+ hours    Role: Lead UX/UI Designer





Introduction

If you could time travel, when and where would you go?


Zeit, a subsidiary of Virgin Galactic, has now made time travel available to the public, launching with 289 destinations from prehistoric to present. I was tasked with creating a brand and responsive e-commerce website for this groundbreaking company.

*This was a speculative project as part of DesignLab’s UX Academy, but the principles of the project could be applied to creating products for companies with innovative technology.

Research

For the average person in the present, physical time travel is both an abstract concept and one we are familiar with.


Unique experiences call for unique research. I had to look outside of the norm when it came to evaluating competitors, including some standards in the present such as Airbnb, but also the more imaginative realms of VR tech and LARPing. Casting this wide net for competitive research informed the design standards of e-commerce travel websites as well as the potential opportunities of Zeit to set itself apart in the travel market.
My assumption was that travel in the present would not necessarily inform what a time travel experience could entail. My user interviews were intended to spark conversation about the delights and potential pain points of time travel. I provoked people to imagine their concept of the world and consider the feasibility of time travel. The interviewees range in age from 27-67. Three were interviewed one-on-one, then a co-discovery conversation was prompted with a pair of friends.



Jacquie Vujcec
UX Designer

“I want to observe my family in Italy a few generations ago, but I wouldn’t want to break the time travel laws by interacting with them.”


Max Hull
Professional Chef & Illustrator

“Maybe I could have a little robot bird that sits on my shoulder and records in secret and feeds me information, like translations.”



Skylar Dunn-Lubin
UX Student

“I would like to be adequately prepared to get information from locals in a non disrespectful way, and other deep things like taboos”



Takeaways

These conversations helped clear up a few of my personal assumptions—where I would have jumped at the chance to see dinosaurs up close and personal, some of my interviewees had reservations. I uncovered that there was a lot of uncertainty around the ability to time travel; when presented with the opportunity some expressed wanting to be able to “blend in,” conduct themselves respectfully by adopting the cultural norms of the time, as well as have as much information as possible before traveling to the destination in an effort to maintain the integrity of the space-time continuum.
Moving forward into defining Zeit, I knew that reassuring potential time travelers that the technology was safe and they would be adequately prepared was a key insight to take into my prototype.

Definition

When thinking about a collection of the past, we could imagine a bookshelf filled with potential genres or experiences.


Understanding that reassurance is a key factor, I developed user and task flows that laid out the experience of visiting Zeit and choosing a destination. A card sort exercise revealed that experiences were not often grouped by geographic location or time period but by genre. These insights informed the architecture of my site. In my sitemap, I focused on building a browsing function that could filter primarily by interest or genre as the main path for users to explore experiences.
With this structure in mind, I sketched several layouts of the Zeit site pages and then built mid-fidelity wireframes for desktop and responsive tablet and mobile formats.



The Brand

Inspired by retro sci-fi art and the ability to immerse visitors in the excitement of a real, tactile time travel experience, Zeit’s branding and UI took shape.



Logo and UI


After exploring the possibilities of connecting modern and classic blackletter forms for the Zeit “Z,” I sketched an isometric, extruded version of a Z based off of the idea of a Penrose diagram, a 2d representation of the causal relations of space time. From there, I looked at other artistic representations of the Penrose diagram.

Then, Zeit’s “Z” logo was born.

Our visual guidelines were inspired by the idea of “old meets new”—classy serif typefaces live amongst smooth neumorphic-inspired UI elements.









Interactive Homepage


I wanted the first impression of Zeit to make it immediately apparent to a user that they were not looking at an archive of events but actual, feasible destinations in space-time. In a future prototype, I would have liked to be able to collect more featured experiences and display them in dynamic, 3d renders. I made the menu more secondary to bring attention to the browsing CTA as the entry point.

Browsing Experiences


Based on my card-sorting exercise I made the main browsing filters by interest and by time period. Experience cards were formatted to seamlessly scale down across responsive sizes.


Experience Page


If a user was already familiar with the experience, they have an option to book a trip right away.
If they scroll they can learn more details about what to expect from the itinerary of the trip, and even options for dressing undercover.



Responsive Designs


I also created tablet and mobile mockups to render how Zeit would translate responsively.



Usability Test

After creating my prototype in Figma, I conducted usability testing. I set out to understand how users would interpret what Zeit was offering from the homepage and how they engaged with the prototyped interactive element, how they interacted with browsing filters, and what they would navigate to when learning and booking their trip. I affinity mapped the results from my remote usability test to discover uncover what I would need to prioritize in my revisions.

The user path I created aligned with the expectations of the participants. The main CTA to browse experiences from the homepage stood out a bit more than the interactive, so I redesigned the homepage interactive to stand out more.

To drive better reassurance from the start of the experience, I also sized up and made “how does Zeit work?” from the homepage more visible. One participant felt as though she wanted a bit more visual information of what to expect from the experience page, so I added an image gallery that would help users get a feel for the experience.




Reflections

A fictional brief is challenging at first, but creating something brand new can be a liberating experience. Because this was my first full UX project, I encountered roadblocks as I took a scrappy and new approach to building my prototype. Yet, this project got me hooked on the UX design process, and showed me how boundless the opportunities of a digital product are when crafted with user-centric design.