Zeit Responsive Web Portal

Client:
Role:
Duration:

Student Project
Product Designer
Four weeks (full-time)

Background

This project was an assignment for Designlab’s UX Academy. The brief was to design a booking portal and branding for a fictitious time travel company named Zeit. The company aspires to use new technology to connect adventurous travelers to powerful historical experiences.

Clickable Prototype

You can access the clickable prototype by clicking the link at the left. It's designed to test the following tasks, so not every affordance is clickable:

  • Find a trip to a location during an ancient time period
  • Book the trip that you located

Process

Research

Get up to speed on the product landscape and understand potential users.

Define

Based on insights in research data, get clear on the problems to solve and who to solve for.

Prototype

Quickly build a prototype to test whether users can accomplish core tasks. Visual design fidelity relates to project needs.

Test

Test prototype with users representing target demographic. Come up with insights from this data to spotlight usability issues and reframe design questions.

Background

This project was an assignment for Designlab’s UX Academy. The brief was to design a booking portal and branding for a fictitious time travel company named Zeit. The company aspires to use new technology to connect adventurous travelers to powerful historical experiences.

Process

Research

Get up to speed on the product landscape and understand potential users.

Define

Based on insights in research data, get clear on the problems to solve and who to solve for.

Prototype

Quickly build a prototype to test whether users can accomplish core tasks. Visual design fidelity relates to project needs.

Test

Test prototype with users representing target demographic. Come up with insights from this data to spotlight usability issues and reframe design questions.

Research

Zeit's fictitious product is the first of its kind, meaning that research has to start with analogous experiences. I looked at the adventure and heritage tourism markets to discover user motivations and needs for these existing services.

Market Research

Activities and culture

Although currently restricted by COVID, leisure travel is a sizable industry, accounting for $718 billion in sales annually pre-pandemic. A report from 2017 describes adventure travelers as active social media consumers. It finds that most see themselves as explorers and many (especially over the age of 55) also travel to learn.

82%

82% of bookings in 2018 were completed digitally and without human interaction

67%

67% of high-income travelers said they would rather spend money on activities than a nicer hotel room

User Interviews

With an idea of target users and the product market in mind, I conducted interviews to get a more granular idea of users’ motivations and patterns of behavior. The qualification was that they had traveled internationally within the last five years.

Who will the users for the Zeit web portal be?
What’s important to them in their travel experiences?
How do they plan and book their trips?
What motivates them to travel?
Can we identify existing pain points with how people book travel?

Define

The rich qualitative data from the interview process helped add specificity to the available data on adventure travelers, revealing behavior patterns, processes, and higher-level motivations.

Persona

Connecting to new places

Interviewees discussed the value of travel as a kind of self-development, as a type of experiential entertainment, and as a way to strengthen relationships. Being able to see or experience examples of everyday life was a common goal that helped them get perspective on their own routines. They valued authenticity and self-directed discovery, although they appreciated resources to help them simplify the work of finding activities.

From the interviews, I understood that a historical frame would be valuable in presenting Zeit's many trips. The data also suggested that giving users a choice in activities was important.

User Journey

Accommodating deliberation

Interviews provided guidance on how to present information. They also suggested that the site would need to allow sharing and bookmarking trips for later. This user flow illustrates two scenarios within a larger purchase journey.

Card Sorting

Discovering users' historical groupings

Organizing Zeit's extensive list of trips was a challenge. Like many other travel sites, this one would need to make informed decisions about how they were grouped. In an open card sort, participants created a median of six categories, with modern, ancient, and classical being frequent names for periods. A theme of place vs. event emerged, as did an interest in architecture. World regions also emerged as category names.

Era, region, and interest thus became primary sorting categories.

Design Questions

How can Zeit's portal connect users to authentic trips in a way that makes sense to them and support a group purchase journey?

Prototype

I created a brand identity for Zeit to help users understand the new and unfamiliar service. With a clear idea of the site's features, I looked at adjacent products to see what UI patterns would make sense to users booking travel. Starting with hand-drawn sketches, I iteratively produced a high fidelity prototype to test our users' core tasks.

Style Tile

New technology for historical experience

Zeit's brand attributes are: historical, trustworthy, expert,
fresh, modern, and accessible.
I looked especially at contemporary digital products in the travel space and museum branding. I used lots of film and video game matte painting references for imagery to give the sense of a sweeping, immersive, historical experience.

Important Features

Introducing activities with an itinerary

Finding and choosing authentic activities was important to users, so I included the available choices in the trip information page within a trip itinerary.

Many other travel products offered a similar layout, with different ways of displaying itinerary segments. I chose a way of presenting itinerary that prominently showcased photography of the destination and used a great deal of negative space, further developing the sense of an immersive experience.

Initial wireframe sketches of itinerary layouts

Time and region

Despite the obvious interrelation of time period and region, these were such fundamental categories to users that I defined them separately in as broad a way as I could. I borrowed from language in the card sorting to offer periods that encompassed the histories of many regions.

Users encountered explanations of eras on the front page of the site, as well as brief notation of their time periods on the list filtering. These category cards mirror similar choices in other travel sites. Their size also allows for some helpful context in explaining the site's periodization.

High-Fidelity Wireframes

Test

Using screen-sharing over Zoom, I asked users to complete a task with the prototype and observed them. I used the Think-Aloud method, in which I asked participants to talk through their thought process as they completed the task. The findings from the test provided a great deal of information about how users approached the site. It was limited to the two tasks that were tested (finding a trip and booking it), but revealed some important points of confusion.

Insights and Changes

Specifying time period

Users seemed unsure about what eras the terms "ancient" or "pre-history" covered. To make it clear that these were not specific to a particular region (ancient for instance might imply Greece or Rome), I added a date range.

Clearer calls to action

More than half of users struggled with two areas of confusion brought about by the design and copywriting of the site's calls to action.


On the splash page, users were presented with a button to plan a trip, and a nav bar option to find a trip. These led to the same place, but users saw both and were confused about which would lead to a screen where they could browse trip selection. The function of planning in this case was also unclear to users, indicating that they didn't think of what the site was doing as planning. To fix this, I changed "plan a trip" to "find a trip", matching the nav bar.

Users also struggled to figure out how to book a trip from the trip info page, not seeing the call to action at the bottom of the page. To help with this, I added a purchase and save button at the top.

Next Steps

Post-purchase but pre-trip

Making this design work, though, is clearly only one part of a larger customer journey. If I continued it, I would likely start designing more of the post-purchase and pre-trip experience, where users would prepare for travel. This is likely where the flexibility in choosing activities would begin to appear more clearly, and I could better help users reach their goals for authenticity.

Research partnerships

National Geographic Expeditions leans heavily on the expertise of their guides. Zeit's ability to deliver historical experiences would be greatly enhanced by leaning more on their expert partnerships, providing a new way to help user select relevant experiences.