Zeit: Responsive Web Design

USER RESEARCHER | INTERACTION DESIGNER | UX/UI DESIGNER | USER TESTING

Background: Zeit is a cutting edge time travel tours company, offering over 280 tours to various destinations in the past.

Challenge: As the company was launching, they needed someone to create a user-centered design for their responsive e-commerce website, as well as design and create their brand, capturing the sprit of both modern and historical, and classic but contemporary.

Outcome: A responsive e-commerce design that captures the users needs and the brand identity.

Process

Research: Conducted competitive analysis and interviews to develop user persona, creating an empathy map and storyboard to further empathy and user-centered design

Information Architecture: Continued research with a card sorting exercise to develop the sitemap and infrastructure and begin sketching wireframes

Interaction Design: Created user flow and task flow to develop interactions and navigation and built responsive wireframes to begin website

UI Design: Developed the Zeit brand, creating logo, and determining the visual design; applied the branding to wireframes and created UI kit

User Testing: Conducted usability test to validate brand and navigation, creating a prototype to test and an affinity map of the results

To gain deeper understanding into the design problem and user needs, it’s important to conduct research.

METHODOLOGIES

Generative Research:

• Competitive Analysis - To determine each brand’s competitive offering and differentiators

• Market research - To evaluate the overall industry, market, demographics, and users

Primary Research:

• User Surveys - To learn more about user behaviors and needs when booking and planning travel

Research Goals

• What are the best practices of other travel companies? What are the areas for improvement?

• Who are Zeit’s customers and how do they plan, research, and act during travel?

• What are their biggest pain points and values when planning, booking, and traveling?

• What are their pain points and values in regards to group travel or resort stays versus independent travel?

• What are the biggest obstacles and fears to overcome to make Zeit’s potential customers have the best experience?

Competitive Analysis

Customer Needs

• Safety was paramount, particularly for female participants

• Authenticity was also critical. Interviewees wanted travel to feel like a unique experience that reflected their destination and be able to interact with the local culture

• Flexibility was important to them, in part to have authentic experiences, but also to allow independence and the serendipity of travel

• Expectations needed to be set to avoid disappointment and create an optimal and transparent experience

• Cost was also important for customers to feel they got the best “bang for their buck”

Persona

Based on the insights uncovered by the survey, I created a User Persona. The Persona “Colby” helps keep the primary user as the focus of the design.

Empathy Map

To help synthesize the survey , I created an Empathy Map, taking the salient and repeated statements from users to help understand their pains, needs, and thoughts around travel booking and planning.

Research Conclusions

Our customers are savvy travelers, who want a customizable experience that feels authentic and tailored to their interests and whims. They are most concerned about safety. To ensure customers feel safe traveling to the past, it is essential that the Zeit brand develop a Tour Booklet for each tour that will set expectations, discuss safety, and prepare travelers for the culture, language, and historical context of their chosen destination as well as the process for time travel itself.

User Flow

After building the architecture based on research and user needs, I created a user flow to understand the myriad ways in which a user might try to accomplish certain tasks, such as booking.

Responsive Wireframes

The user flow above then helps inform the UI design and the mid-fidelity responsive wireframes.

Brand Design

I used Art Deco as inspiration to create a brand that felt both classic and modern, historic and contemporary.

Because Safety is so important to our users, I wanted to create a brand the felt luxurious, to establish a sense of trust, so I choose a deep color palette and gold accents that matched the Art Deco aesthetic.

UI Kit

Now that the Zeit brand was fully designed, I created a UI Kit to have a consistent document of all of the essential UI Elements that will need repeated use in fleshing out the full website.

Responsive UI Design

I applied the visual design to the wireframes to build full high-fidelity wireframes and create a prototype for testing.

Prototype

Taking the high-fidelity wireframes, I then created a prototype in Invision.

Usability Testing

• Testing Goals: Validate Brand Impact; Test navigation and checkout process efficacy

• Conducted User Testing: 1 in-person, 4 remote using Mid-Fidelity Invision Prototype

• Testers were given the task to find and book a tour using native navigation (no search or filtering)

• Testing Results:

  • Completion Rate: 100%

  • Error-Free Rate: 100%

Affinity Map

What Comes Next for Zeit?

Add more functionality and continue to fully develop the website

Change wording on some pages to add clarification

Continue Iteration, Implementation, and Testing

Zeit