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.

Student Concept Project

Role: Product Designer

Timeline: 10 Weeks

Case Study Focus: Product Development, Information Architecture

Background

Project Brief · Case Study Takeaways

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. Enable user-centered design to build trust in a product that has not existed in the market before.

Case Study Takeaways
My goal for this presentation is to show my approach for:
- information architecture
- product development.

Problem Statement

Market Research · User Interviews · Persona

How will the information be organized and how do users recall information?

Understanding the mental model of travelers

Before determining the information architecture, I had to do research on what travel tools users are currently using and what their pain points were. I conducted market research on the closely associated service that makes sense to users: international traveling.

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 Geographic, 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. Different patterns arise, such as how money and time influenced traveler. Our target user for Zeit is Short Trip Sherry who has a job obligation but likes to take 1-2 big trips per year.

Information Architecture

Card Sorting · Task Flow  · Sitemap

After market and user research, I did more research to determine how users recall and sort time travel dates, which will influence the information architecture.

Determining how to organize and present the travel trips

After understanding the market and the potential users, I conducted a card sort to see how users recall information which will influence my design decisions of how to display the travel tips, ie geographical, sequential, categories, etc.

Figuring out how users sort and recall information
I conducted an open 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. I used the online software called Optimal and users had the freedom to create their own categories.

Card Sort Planning:

Test participants weren't told this was for a time travel website.

Results:

Red are the major patterns that the 5 participants grouped together

  • Most of the events were grouped together based on an event,  civilization, or geographical location
  • United State events tied to a geographical location were popular, ie reflective of the American participants
  • Architecture were grouped together, ie landmark places that people travel to

Although as a designer, I wanted to create a time sequence where users can browse based on time eras, the card sorting results told me otherwise. I had confirmation that it was better to display the 289 time travel tips into categories such as, art, event, civilization and to have subcategories under them.

Information Architecture influenced my Sitemap
The information architecture helped organized the sitemap, which I later used for my footer as a way for users to easily navigate what they are looking for.

Footer as a Sitemap:

Design Iteration

Mid-Fidelity Wireframes

Similar to information architecture, next I had to think about navigation and the user tasks during my layout and design exploration.

Designing how users navigate travel website

For my design inspiration, I used research from the card sort, user research, and referenced popular travel websites. I focused on how users browse through tips and how the information will be organized. I made small changes and simplifyed further.

Mid-fi Wireframes
I approached the design iteration process by making small changes to create different layout designs. Then I simplified further. Here is an example where I first had a carousel to display highlighted trips but later found through research that carousels were ineffective.

UI

Logo Design

Next I worked on the UI and branding.

Conveying Zeit's personality through the Logo

Next in the process, I define the personality and brand of Zeit based on these adjectives: convenience, trustworthy, and conveying the past and present. I used these adjectives and I also created a mood board to determine the logo, tyopgraphy, and visual. direction

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. Here were some of the final iterations. The final logo was the pyramid.

Logo Iterations

  • Drew drafts based on Zeit's values: brave, lively, history lovers, clever, and all-in-one service
  • Final logo inspiration is reminiscent of key landmarks that are well-known in Egypt, Mexico, and Peru while simple geometry reflects modern times

Prototyping

Prototyping

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

Test, test, test!

Usability Test · Affinity Map · Priority Revisions

In the next process, I tested my high-fidelity wireframes to determine the usability and observe impressions.

Determing if we are on the right track

Next, I tested the high-fidelity wireframes by recruiting 4 test takers who were travelers. I conducted the test on Zoom and used Invision. 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.

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.
  • Many participants were surprised about flying to the HQ to Berlin, Germany to conduct the time travel. didn't know the website was a time traveling website. This may mean that I have to move this information to the itinerary.  
  • Usability of the website was good since all participants said the website was user-friendly.

Consistent colors and layout of price for each page
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.

Improving the consistent colors:

Focusing on information architecture and simplifying the page:

Reflection and Next Steps

Reflection · Next Steps

How to improve Zeit in the future?

7. Final

Thanks for getting this far! Below is the final prototype with the responsive design for mobile.

Reflections:

  • As a concept project, I added too many features for the MVP. This may cause problem for the engineering team in the future.

Next Steps:

  • 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.

If you want to read more:

  •  I only touched on product development and information architecture for this project. For the full case study, check out this page.
Clickable Prototype