Zeit

Zeit is a fictional company providing the world's first commercial time travel. In this project, I created Zeit's branding strategy and a responsive website that focuses on the trip search and booking process.

ROLE

UX/UI Designer, Branding

Project duration

4 weeks

View prototype

Background

In this case study, time travel has been discovered and deemed safe enough for commercial use. Zeit, a fictitious subsidiary of Virgin, is the first to provide this time travel booking service. Zeit allows its customers to time travel to any of their 289 all-inclusive resorts located throughout the past. The objective of Zeit is to take away the intimidation of time travel and make commercial time travel accessible, safe, and enjoyable.

project scope

‍In this project, I was tasked with creating a brand strategy, logo, and  responsive e-commerce website that allows the user to browse through different trip categories and book a trip

CHALLENGES

Because time travel isn’t currently available (to my knowledge), research will be limited as there are no direct competitors and users have no experience with time travel.

Conducting research

Because I could not research time travel specifically, I decided to research on travel as a whole and how it could translate to time travel. Below are some research goals that guided my research process.

Research goals

1

Understand the motivations for traveling and see if it translates to time travel

2

Understand how travelers plan their trip, what tools they use, and how they prioritize their itinerary

3

Determine their expectations and criteria for a successful time travel experience

Industry analysis

I chose to focus on travel resource and booking sites that included travel, accommodations, and excursions. I analyzed their websites for common industry trends and UI patterns for the search, booking, and browsing process. Through my industry analysis I learned that millennials are among the top travelers. Because of this, I decided to center my research around millennials as the target demographic.

Industry analysis of exclusive vacation services and other travel services. Click to enlarge.

User Interviews

During my competitive and industry research, I learned that millennials are the highest traveling demographic. Because of that, I interviewed three participants between the ages 26-29 with an interest in travel. My objective with speaking with users personally was to understand how they choose and book their trips. This would help guide what information should be included in the final design.

Example of my process after conducting user interviews

Research takeaways

My goals of research was to understand how a user typically chooses and books their trip. Through analyzing the industry and conducting user interviews, I was able to deduce the following main points:

Persona

Below is a persona created with the research takeaways in mind. In addition to the takeaways listed in the previous section, Adrian is looking for a way to learn about other cultures but current methods like museums were lacking.

Example of my process after conducting user interviews

Organizing Zeit's trips

I wanted to understand how a user categorizes historical events, potential Zeit time travel destinations. The takeaways of this activity would influence how a user would best browse and locate a trip within Zeit's information architecture. For this activity, I first conducted an open sort with 5 users. Afterwards, I conducted a hybrid sort using 6 categories formed from the open sort findings.

CARD SORTING TAKEAWAYS

1

Users should browse trips based on geological location as this is the most familiar to them

2

There should be pre-determined categories based on interests for the user to filter through

3

Users should not browse based on a chronological timeline as this is what caused the most confusion

Task & user flows

For the project scope, I focused on the task flow of booking a trip as Zeit is ultimately looking to book trips. Within this task flow, the user should be allowed to customize their itinerary as we learned during our competitive research that travelers prefer being able to have control over their travel details. Additionally, the user should have a clear understanding of the pricing at each step as establishing trust from the customer, especially with respect to cost, is the most important to them.

I expanded on the task flow and created a user flow that included browsing and searching through trips.

First stage of wireframes

I used my site map to sketch out multiple options for the landing page using the persona to guide what elements to include. After I finalized the content I wanted to include, I created  low-fidelity wireframes in Figma.

On the landing page, I decided to include a popular trips section. I learned through my user research that travelers choose their trips by browsing through what trips others are taking.

The trip cards include a testimonial from the user reviews, as we learned this is an important feature users look for. Underneath the popular trips section is a deals section as my persona is looking for the best deal in a trip.

During user interviews, I also learned that the user was most interested in socializing with the locals during their trips. Because of that, the trip description has a locals showcase to gain the intrigue of the viewer. Being able to meet locals from different time periods is a unique selling point that only Zeit can provide.

Another thing I learned in my interviews was that users heavily rely on user reviews when booking their trips and excursions. That said, the design includes a robust review system with a "helpful" button that lets the readers know what reviews others found helpful.

Branding

Next I was tasked with creating the branding direction for Zeit. I created two mood boards to explore two different ways Zeit could be branded. The first is inspired by Back to the Future and how old science fiction movies would depict the future. The second is inspired by SpaceX and aligns more with what is presently considered futuristic.

Left: Moodboard design with a nostalgic mood and the chosen style tile.
Right: Moodboard design focused on a futuristic mood.



During my user interviews, I learned that while the users would be interested in time travel, they still found it daunting and potentially dangerous. Because of this, I decided to go with the first mood board as the retro design is more familiar and nostalgic. The design is more approachable and will attract a larger customer base.

Logo design

For the logo design, I wanted to incorporate the idea of time. After multiple sketches and variations, I settled on the design on the right. This design is a backwards arrow integrated into the E and zooming through the Z. This is alluding to how you go back in time with Zeit's time travel experience. I also went with a retro-futuristic italicized font to give the impression of movement.

Defining the brand's style

Relying heavily on the moodboard, I created a style tile that included the logo in multiple formats, the fonts expected to be used on the sites, and the colors. The style tile is still focusing on a retro feeling while providing a sense of nostalgia.

Finalized brand style tile

UI Kit

With my style tile, I created a UI kit (see below) including each of the elements from my low-fidelity wireframes. Next, I was able to create the high-fidelity prototype to use for user testing.

Finalized brand UI kit. Click to enlarge.

Usability Testing

With the scenario and tasks in mind, I created an observation sheet that I could use during testing. The test procedure was to ask the participant to say what they would do to complete a task and then explain what they expect to happen next. At each new page, they would explain what they were seeing to me. Ultimately, my test objectives were the following:

Test Objectives

1

Test the ease of navigation and flow of the design

2

Test how users prefer to browse and find a trip (ie. through navigation menu or search)

3

Test if the design provides enough information for the user to book a trip without concern

Affinity Map

After conducting the usability tests, I created an affinity map in order to understand how to prioritize changes based on user feedback. Below is an example of my affinity map. If more users agreed with a certain comment, that comment would be higher up in the priority list.

Section of the affinity map derived from usability testing

Testing Results & Next Steps


My goals with testing were to test the ease of navigation of the site and that it provided enough information for the customer to complete a booking. The test results confirmed that the user flow is intuitive and easy to use. User feedback was that the casual design of the website made the user more comfortable when purchasing a time travel experience, which was the goal of the branding. The changes that could be made were clarifications in the content so that it would be clear on how the traveler will be interacting at each step of the trip.

HIGH PRIORITY REVISIONS

1

Change the words used in the navigation menu to be more clear

2

Edit the description under "The Zeit Experience" to reference the video

3

Make it more clear how the user interacts with the locals

Conclusions

In this project, I was tasked with creating a branding strategy and responsive website for a hypothetical travel company. The challenge with this project was researching competitors in a field that does not yet exist. In order to overcome this challenge, I had to focus on the intent of the company, which was to provide a travel service.

This challenged my problem solving skills to take what the interview participant was saying about normal travel and apply it to Zeit. During my career, I may work with innovative products that have not existed before, so it is important to be able to research the "un-researchable". Ultimately I believe I was successful in applying my research of the travel industry to design an approachable time travel booking website that would entice the viewer to book a trip.