Zeit.

 

Scope: Responsive website, branding
Client: Zeit
Timeline: 5 weeks (March - April 2021)

Role: UX/UI Designer
Team: Self-directed; with feedback from mentor and peers
Tools: Figma, Optimum Sort, Whimsical, Zoom

The Company.

Zeit, founded by Richard Branson in Germany, has revolutionary technology that allows people to travel to the past. Zeit is here to sell trips with a total of 289 destinations all over the world, up from prehistoric times through today, to any wanderlust.

The Challenge.

Being the first of its kind, Zeit needed help establishing themselves in the time travel industry. The challenge here was to design a responsive e-commerce platform, as well as to enhance visual branding that embodies both the nostalgia of the past and the possibilities of the future.

The Objectives.

Design a logo for the company that can be modern and historical at the same time:

Design a responsive e-commerce responsive website that allows customers to browse through different trip categories and details, filtering via classifications, as well as booking.

The work is here.


 

1. Emphasize

Planning Research: Goals, Methodologies, Results, Synthesis

Research Plan

Research Goals

We want to know the goals, needs, and frustrations people have towards booking travels, as well as motivations, attitudes, and concerns people have towards time travel trips so that we utilize this information and build content.

Research Objectives

  • Identify the demographics and key characteristics of potential users.

  • Understand the motivations and concerns people have towards time travel.

  • Understand how and why (and why not) travelers choose certain travel destinations.

  • Discover the types of past events and experiences travelers would like to explore.

  • Identify the key features currently existing booking products offer that users like and dislike.

Research Questions

  • What are people’s goals and motivations towards time travel? What emotions and sentiments arise?

  • What are people’s concerns and fears about time travel?

  • What kinds of factors do people think about when they choose certain travel destinations (or not)? How do they make that decision?

  • What types of past events and experiences would travelers like to explore when booking time travel trips?

  • How many days/weeks/months would people like to spend on a trip? How do they make that decision?

  • What are some of the key features that currently existing booking sites have? What frustrates travelers?

Research Methods

  • Market Research - To study consumer behavior and identify their needs and trends based on existing research related to travel.

  • Competitive Research - To identify our direct and indirect competitors and analyze their offerings, strengths, and weaknesses of their products and services.

  • User Interviews - To gain deeper knowledge on consumers’ attitudes, goals, needs, motivations, frustrations, and concerns by conducting one-on-one interviews

Assumptions/Risks

  • We might have trouble finding the true attitudes people have towards time travel. Because it is a very new idea and nobody has experienced it personally, biases may arise.

  • We might have trouble explaining the safety and privacy concerns people may have towards time travel, since the actual procedure and policy is TBD at this stage.

  • We assume that the time travel trips are very expensive, yet the actual cost is unknown at this stage. In the primary research phase, we will eliminate the cost factor for now, and assume participants can afford the trip at any price point.

Market Research

WHO

  • Millennials are the biggest spenders

  • More solo travelers these days

  • Travelers over the age of 30 have seen a big increase

  • Gen X and Baby Boomers are most likely to book vacation packages

WHAT

  • More young people look for inspirations online, especially user-generated-contents on social media

  • Digital nomads will more likely to go to places less discovered

  • Avid travelers and industry experts will more likely to decide on destinations based on word-of-mouth.

WHEN

  • More people are looking to book last-minute leisure trips.

  • For busy seasons, people still tend to book well in advance.

HOW

  • Most people still prefer to use desktop compared to mobile devices when browsing travel inspirations and booking trips.

  • For Millenials, The ability to book using mobile devices is now the second biggest consideration after price.

OTHER TRENDS

  • Care more about no-fee cancellations.

  • Raising attitude towards sustainable tourism.

  • More focus on policies and regulations.

  • The needs of unique experiences grow.

Competitive Research

User Interviews

To better understand our users — their key goals, needs, motivations, frustrations, and pain points — I conducted 5 remote interviews that consisted of open-ended questions about their travel and booking experiences. After the interviews, I was able to find customer behavior patterns.

Participants

  • Female, 34, Freelance English Teacher, China

  • Male, 38, UX Researcher, Canada

  • Female, 40, Business Owner, Canada

  • Female, 24, Student, Denmark

  • Male, 24, Freelance Director, China

Results

Based on the notes from interviews, I used word cloud to see what key words appealed most frequently.

Persona

Using the insights gained from user research, I then created a persona to present the target audience group. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.

Meet Tracy. She is the archetype that describes the various goals, needs, motivations, fears, and frustrations among potential target users. This is a reference tool that I used throughout the entire design process.

Empathy Map

Next, I immersed myself in the persona Tracy’s environment. I brainstormed on what she may be doing, thinking & feeling, seeing, hearing, as well as her pain points and gains, in her daily life and when travelling.

The empathy map I created helped me diving deeper into the customer segments as well as building out the “user” in a user story.

ZEIT Empathy Map - revised 04:13.png

2. Define

Project goals, in-depth competitive analysis, feature roadmap, card sorting, site map

Project Goals

After analyzing the research findings, it was a matter of turning the corner into product definition. At this stage, I was working on finding common grounds among business goals, user goals, and technical considerations to determine main project goals and actionable problem statements.

  • Business Goals: Desired business results from the client’s stakeholders

  • User Goals: What users want based on research findings

  • Technical Considerations: Technical factors that must be taken into considerations determining feasibility

  • Common Goals. The common ground among all three.

In-depth Competitive Analysis

I further dug deeper into a few of our direct and indirect competitors, including Expedia, Skyscanner, Airbnb, G-Adventure, Contiki, Lonely Planet, National Geographic Expeditions, and TourRadar.

I completed a few tasks on each website and observed their task flows and features offered. See the full list of in-depth competitive analyses here.

Screen Shot 2021-04-14 at 3.02.26 AM.png

Feature Roadmap

Based on research results from competitors and users and project goals, I then created a comprehensive Feature Roadmap — a list of key elements that should be included in the product’s design, prioritized based on their importance to the business and the users. See the full list of feature roadmap here.

image 1.png

Card Sorting

Since Zeit offers a large number of packages to many destinations from prehistoric times to the present, it was important and valuable to explore how users organize and navigate Zeit’s content.

Process

  • Tool: Optimal Workshop, online

  • Type: hybrid, with closed categories and open suggestions.

  • Cards: 20 cards displayed in random order

  • Participants: 9 participants

  • Average time spent: 6m1s

image 1.png

Results

Eventually, the cards were sorted by three different eras with six options in each:

  • Interests: Arts & Music, Culture & Social, Politics & Diplomacy, Nature & Environmrnt, Religion & Philosophy.

  • Time Periods: Prehistoric, Ancient, Middle Ages, Early Modern, Late Modern, Contemporary.

  • Continents: Africa, Asia, Europe, North America, South America, Oceania.

This information is particularly important for us to organize our contents, as well as navigation and filtering system later in the design process

Site Map

Building from the research results, project goals, feature roadmap, and card sorting results, I created a sitemap that included proposed pages to help plan the structure of the website. I use it as a blueprint for the website to help to organize all contents on the website as well as understanding the navigation and flow.

ZEIT UPDATED Site Map 0513.png

3. Ideate

Interaction design: task flow, user flow, wireframes

Task Flow

The main task users do on Zeit is to browse trips and book one. I constructed a task flow breaking down the necessary steps for a user to get from the landing page to the order confirmation page.

I find task flows helpful for ensuring that we’re designing sequentially and thoroughly, so we can think through building a good user experience in more detail.

updated on 05_13 Task Flow@2x.png

User Flow

To further analyze the information architecture, I created a user flow diagram, which includes decision points wherein the persona’s journey to the desired goal can differ, based on decisions the persona need to make in interacting with the design.

It helps me identify the key pages/screens that need to be designed, user actions, and potential user decision points. Together it helps me understand the system better.

Wireframes

Once I decided on the layout, I then created wireframes in Figma. I also spent some time summarizing the brief and doing research to write content such as company information and trip details.

I find having wireframes help me identify the outline of the content and create a solid foundation for future steps of the design process. It makes the visual and interaction design much easier. To ensure the wireframes were created to fit the specifics of a responsive website, I also built out the mobile and tablet versions of wireframes. I changed the sizing, scales, & placement according to common design patterns.

Please see the full list of wireframes here.

4. Prototype

Visual design: logo, UI Kit, UI design, prototype

Logo Exploration

This is my logo design process as well as the final version. I began with a strategy, summarizing 10 adjectives to describe ZEIT: modern, historic, retro, futuristic, bold, comfortable, dynamic, tech, abstract, adventurous. Then I sketched and digitized multiple variations for symbols, wordmarks, letterforms, and their combinations, experimenting with variations on style, sizing, and alignment. I then narrowed down the options and finalized with the current one.

UI Kit

To ensure that all responsive web pages follow the same visual guidelines, I created a UI kit, including visual attributes of design such as fonts, colors, and shapes. I find having a UI kit speed up the entire design process. It also helps achieve consistency and cohesiveness throughout the entire design. UI kit later becomes a foundation for the design system.

UI Design

After identifying the key objectives of the UI design and creating the UI kit, I applied the elements to the actual UI design. I created 15+ screens including the entire user journey from the home page to the booking confirmation page. After I designed the first draft, I revised it multiple times based on feedback from my mentor and peers.

mockup - UPDATED home page.png
mockup - Categories.png
mockup - Products.png
mockup - Payment.png

Prototype

After having the full UI design, I created a prototype on Figma to prepare for usability testing. Prototyping often helps reduce UX friction, eliminate errors, and uncover mistakes and false assumptions.

Please find the full prototype here.

5. Iterate

Usability test, affinity map, and priority revisions

Usability Test

Test Objectives

  • Test whether the users can get clear information on Zeit’s products and services on the homepage.

  • Test how and how many ways users can browse trips and land on destinations.

  • Test whether it is easy and simple for users to navigate.

  • Test how easy it is for users to check out and confirm the booking.

  • Note any generation hesitations, confusion, difficulties in the process.

Test Subject

A high-fidelity prototype (from Figma) that contains a fully completed desktop version UI design.

Test Methodology

  • A 15-second test on the screenshot of the landing page created on Usability Hub.

  • Remote, one-on-one test, via Zoom with screen recording.

Tasks / Scenarios

  • You’ve just heard about time travel is available to the public on Zeit. You want to find out some information on the company, the process, and the safety. Tell me what you think based on what you see on the home page.

  • Now that you are interested in Zeit, you want to look for trips in North America, in the contemporary time period, and relates to Arts & Music. Where would you go to find a trip?

  • After viewing all the destinations, you want to book the Woodstock Festival for November 10th to 13th, 2021 for two people. How would you do that?

Test Participants

  • Male, 47, Web Developer

  • Male, 34, Sound Engineer

  • Female, 40, Business Owner

  • Female, 24, Marketing at a tourism company

  • Male, 26, Data scientist

Affinity Map

After conducting the usability test, I used different colored Post-its to note my observations and their feedback. I then sorted by tasks and created an affinity map to organize the findings.

Having an affinity map helps me identifying reoccurring behaviors and feedback, so I can gain insights from the synthesized information and identify design recommendations to apply to the iteration.

Priority Revisions

The results show that 100% of test participants completed all tasks with no errors, but they did provide some feedback on the improvement of visual hierarchy and suggested some additional features.

According to their insights, I revised the UI Design and prototype based on the recommendations drawn from the Affinity Map. The changes are shown here.

I did minor tweaks on text size, color, and layout on the homepage, so together it presents a better visual hierarchy. I also changed the search toggle to make the tabs more visible. I also deleted a few unnecessary buttons to make the browsing and booking process leaner. I further created an option for users to customize their trip later to avoid overwhelmingness and drop-out during the check-out phase. Lastly, I added trip suggestions on the confirmation page to encourage more sales.

Reflection.

Zeit was a great exercise to practice designing for something that does not currently exist in the market. (Although we all want time travel to be true, right?) This project taught me UX Research techniques when it comes to a completely new market. And the branding and visual design part let me think outside of the box. Innovation is the keyword here, as we all need in this world.

View more work…

TalentShare.

 
 

Homes by IDoGood.