Zeit

Time travel is a reality. Customers have the options to select different experiences from attending a Shakespeare play to watching the first moon landing.

Overview: UX Academy Student Project

Role: Product Designer

Software: Sketch, Invision, Optimal Workshop

Product: Responsive Design

Timeline: 10 Weeks

Clickable Prototype

Background

Project Brief · Business Goal

Brussel announced the International Concordance on time travel which opens up a market for businesses to offer time travel. Zeit, led by Richard Branson, will be one of the first offering these services with zero or a few competitors in the beginning.

Project Brief
Create a digital experience accessible by website, tablet, and mobile for customers to choose among 289 destinations all over the world at various points in history through the present day. In addition, create a logo design that reflects the future and the past.

Business Goal
Enable user-centered design to build trust in a product that has not existed in the market before and increase demand for Zeit’s time travel service.

Problem Statement

Market Research · User Interviews · Persona

Since Zeit will be one of the first companies to offer time travel service, how can we help customers have trust and familiarity in a service that has not existed before?

1. Understand

To address the problems of uncertainty and risk for customers, I conducted market research on the closely associated service that makes sense to users: international traveling. Thus, I focused my research on understanding the competitors and customers who are interested in international traveling. For example: How do people travel internationally? How are the best traveling websites designed?

Market Research
For my market research, I narrowed down my competitors by making the assumptions that 1) people are using online methods to view, plan, and purchase their travels because of its convenience and 2) people are using a wide variety of tools.

Direct Competitors:

Indirect Competitors:

Findings:

  • Jacada and National Geographic are travel agencies that operate on their own, offering premium, planned-out, and luxury travel experiences. This gives users more expectation control, but users sacrifice affordability.
  • Airbnb and Trip Advisors provide an a la carte approach of various travel experiences and accommodations from third party contractors with a wide range of prices. This gives users more financial flexibility, but users sacrifice quality control.
  • Overall, the use of reviews, ratings, cancellation policy, and community uploaded pictures help convey trust.
  • Space X and Google are indirect competitors that may provide services in the future that compete for users' purchasing decisions such as flight tickets and space travel.
  • Airbnb and Trip Advisor display their different travel destinations based on categorize, i.e. popularity, budget-friendly, or historic sites.

Therefore, I will create a planned-out itinerary similar to Jacada and National Geographicc, categorize trips based on categories, integrate community contribution information like ratings and reviews to convey trust.

Customer Interviews
To better understand the users' needs, I conducted 5 interviews of international travelers and asked them why and how they traveled.

Each interview was done remotely via Skype, WhatsApp, and Zoom.

Findings:

  • The motivations to travel are: learning a new language or culture, trying new things like food, relaxation, and escape normal routines.
  • The pain points are: navigating a new system, new language, public transport, and traveling with incompatible people
  • Time influences the way people travel. Some travelers prefer shorter trips to keep things exciting while some don't like to be rushed and stay in one place for a long time. Then there were some who prefers to extend their stay but cannot because of obligations like work and school
  • Money influences the way people travel. Some travelers are willing to dismiss comfortable accommodations in order to extend their travel. Some travelers pay for premium services that are balanced with cheaper services.
“Explore different lifestyles that are different from your own and it is educational and broadens your scope. It releases stress. It really is a vacation for me and the lasting memories for yourself and your life.” Kevin, 25
“If you’re traveling in a different country and you have to catch a bus to get somewhere like back to your hotel or to a restaurant on time, that part can be stressful like if you don’t know the language of how the train system works.” Elyse, 29

Learnings and Summary:

  • From my market research, Zeit will follow the same booking process and ready-made itiniteraies of Jacada and National Geographic to create an all-in-one service that decreases decision fatigue and ensures users the trip will be completed with efficiency.
  • From my user research, I learned that my target user is influenced by time and money to travel. Their motivations to travel is to learn something new and escape daily routines. Their pain points are they get frustrated about new systems whether that's the public transportation or the language.

Defining the UX Strategy

Persona · Card Sorting · Product Roadmap · Task Flow

Next, I focus on who the user will be, how the information will be organized, learn how users recall information, prioritize what features to include in the launch, and how users will book a trip.

2. Define

After understanding the market and the potential users, I next focus on UX Strategy by creating my persona, conducting a card sort, defining the product roadmap, and brainstorming the user flow.

Meet Short Trip Sherry
After we learned more about travel behaviors and potential customer expectations, I developed the persona: Short Trip Sherry.

Figuring out how users sort and recall information
I conducted a card sort with 5 participants where they had to sort through 30 events in different points in history to see how potential users will sort information, ie sequential, geographical, or by themes.

Card Sorting:

Red are the major patterns that the 5 participants grouped together

  • Example events to sort include Watch Babe Ruth play in a baseball game in 1923 or Beatlemania in 1963
  • Most of the events were grouped together based on an event,  civilization, or geographical location
  • United State events were more popular, ie reflective of the American participants
  • Architecture were grouped together, ie landmark places that people travel to

Prioritizing information for launch
Next, I brainstormed different features for the Zeit website by referencing the brief, my user research, and market research.

Product Roadmap:

Steps that Short Trip Sherry will take to book a trip
Then I created a task flow of booking a trip for Short Trip Sherry while thinking about if Sherry could navigate different trips without creating an account.

Task Flow:

Learnings and Summary:

  • From my user research, I created the persona Short Trip Sherry to target users who aim to make 1-2 big international trips per year, but is limited by time and money. This persona likes traveling for learning, personal growth, and personal status. Their frustrations include navigating a new system like language barriers and public transportation.
  • From my card sorting results, the different trips will be based on events, geographical location, civilizations, and architecture, since users recall information better through themes instead of a sequential timeline.
  • From the product roadmap, I will focus on the basic essential features for the first responsive designs.
  • From the task flow, it was important to allow the user to browse through different trips without an existing account; in addition, to allow users to save trips if they have an account.

Designing based on UX Strategy

Low Fidelity Wireframes · Mid-Fidelity Wireframes · Sitemap

After using card sorting, product roadmap, and the task flow to define the ux strategy, next is the ideation stage where I explored different layouts and best design patterns for Zeit.

3. Iterations

I borrowed ideas from popular travel websites for my low-fidelity wireframes, focused on how users browse through tips during my mid-fidelity wireframes, and thought about how the information will be organized as I created my sitemap.

Low Fidelity Wireframes
Next I explored three versions of low-fidelity wireframes based on different assumptions. I referenced Airbnb, National Geographic, Jacada, and Trip Advisor.

Mid-fi Wireframes
I approached the design iteration process by making small changes to create different layout designs. For components of the homepage, I added many features and then simplifying down later. These features focused on the tools available to the users to search, the interactions available to browse, and how the trips are displayed.

Iterations:

Simplifying the homepage:

Figuring out how the information will be organized with the given layout
After iterating the low-fidelity and mid-fidelity wireframes, I brainstormed the sitemap to reflect on the basic organization and what pages to prioritize during the user's task.

Sitemap:

Learnings and Summary:

  • I went through 4 different rounds of iterations of the mid-fidelity wireframes where I focused on how users want to search, how users want to browse, and the flow from the homepage to the travel details page.
  • From the sitemap, it was important to use vocabulary terms to create a comfortable and familiar travel website for potential users.  I also thought about the hierachy of these terms that made the most sense.

Defining the personality and brand of Zeit

Logo Design · UI Kit

After I created the iterations in grayscale and thought more about the information architecture, next I brainstorm and finalize the personality of Zeit.

4. UI

Next in the process, I define the personality and brand of Zeit. I created the logo design and UI style guide for the the product based on these adjectives: convenience, trustworthy, and conveying the past and present.

Creating a logo that conveys Zeit's brand
I first brainstormed by using word association to explore logo ideas that convey Zeit's values while reflecting symbols of the past and the present.

Logo Iterations

  • Drew drafts based on Zeit's values: brave, lively, history lovers, clever, and all-in-one service
  • No such thing as a bad idea. Explored buffalos, 3d glasses, picture frame, and pyramids
  • Final logo inspiration is reminiscent of key landmarks that are well-known in Egypt, Mexico, and Peru while simple geometry reflects modern times

Brainstorming and finalizing Zeit's personality
After creating the logo and mood board, I brainstormed and finalized Zeit's personality by creating a UI kit to layout which typography, color, and icon illustrations will work well together while showcasing Zeit's values.

UI Kit

  • To match the brand of Zeit, I used a welcoming and approachable font called "Brown."
  • Colors are similar to airline colors to convey trust, familiarity, and the theme of travel
  • Final logo inspiration is reminiscent of key landmarks that are well-known in Egypt, Mexico, and Peru while simple geometry reflects modern times

Learnings and Summary:

  • From the logo design, I was able to get a better idea of the personality of Zeit and essentially how this brand attracts users like Short Trip Sherry.
  • The UI kit includes an approachable typography, vibrant photography, and a familiar color palette that's reminiscence of travel airlines.

Showing the personality and brand of Zeit

Prototyping

As I have finalized the personality of Zeit and previously created the mid-fidelity wireframes, next I create the high-fidelity wireframes to prepare for prototyping in order to validate my designs.

5. Prototype

High-Fi Wireframes for the Usability Test
I used a high-fi wireframe for the usability test in order to gather authentic responses about the design. To prepare for these wireframes Iooked at design patterns for the search results page, travel details page, payment, and confirmation pages.

Learnings and Summary:

  • I created a high-fidelity wireframes for the homepage, search results page, the travel details page, review and pay page, and then the confirmation page.
  • I had to decide how users can change their itinerary: 1) drag and drop to rearrange their day and add or remove activities or 2) only add an activity via a button for the last day of their itinerary.
  • Creating these high-fidelity wireframes also made me think about how information should be divided, for example which page to insert the information about the housing and travel accommodations to the Zeit headquarters.

Test, test, test!

Usability Test · Affinity Map · Priority Revisions

In the next process, I test my high-fidelity wireframes to determine how usable they are.

6. Validate

Next, I test the high-fidelity wireframes through a usability testing and then I created an affinity map to determine what design decisions to prioritize.

Validating designs through a user test
After I prepared the high-fidelity wireframes, I conducted user testing to validate my designs by recruiting 5 participants who have gone on a big international trip within the past 5 years. Test takers had to complete this test: Book a trip from start to finish for you and your friend. You have $3,000 and only 4 days.

Affinity Map

Findings:

  • 4 participants participated in the usability test. the test takers were Kevin (31), Summer (28), Peter (28), and Danielle (25).
  • Many participants didn't know the website was a time traveling website. Some users thought it was a trip to a reenactment event.
  • Since many users didn't know it was a time travel website, I made the assumption that as a new time travel service, outside media articles will help clear the confusion of Zeit offering time travel.
  • For my priority revisions, I focused on making the website more clear and simple by focusing on the language, consistent colors for the call-to-action buttons, consistent text sizes, and improved information architecture by rearranging when different information requests should be asked in the process.

Consistent colors and layout of price for each page

Search Results Page:

Focusing on informational architecture and simplifying the page

Travel Details Page:

Learnings and Summary:

  • For my priority revisions, I focused on making the website more clear as a time travel website, maintained consistent colors for call-to-actions, and improved information architecture by rearranging information sections.
  • Although I have completed one round of usability testing to validate these designs, these wireframes can be improved further to look into whether users want a more customizable itinerary, if they want to save their progress, if they want to share a trip with a friend, or if they want to add another traveler.

Reflection and Next Steps

Reflection · Next Steps

How to improve Zeit in the future?

7. Final

Below is the final prototype with the responsive design for mobile.

Clickable Prototype

Reflections:

  • I was able to see the importance of the design thinking process and creating a product from start to finish.
  • Since this was a hypothetical project offering time travel, a lot of users thought it was a reenactment website. Here I had to remember that the buzz of Zeit offering time travel will help clear this confusion.
  • For improvement, the design patterns of Zeit looks very similar to Airbnb and Trip Advisor. Although I used research to validate the chosen layout designs and I have confidence that future users will be able to find what they need, the page could improve on its uniqueness.

Next Steps:

  • I would like to do more usability tests and specifically a heat map of what users are clicking in order to simplify the layout. This will give me insight on what visual buttons and links to emphasize or remove.
  • Since I only did one round of usability testing, there are many interactions that I did not test. For example, if users want to save their progress, or see what friends have taken a trip, and if the user wants to share a trip after a paid confirmation.