Zeit_Devices_Zoom.jpg

Zeit Time Travel Case Study

Zeit, a subsidiary of the Virgin Empire, has been able to make time travel, as far back as prehistoric times, available to all. The project was to design a responsive e-commerce website, as well as the new company branding.

 
Zeit_Devices.jpg

CHALLENGE

Since time travel is a new avenue for tourism, I was tasked with finding the best solution for selling time travel packages online, in a way that made sense to the consumer. The planning and purchasing of the vacations needed to feel safe, easy and familiar.  

PROCESS

The approach that guided me throughout this project was the double diamond method. I needed to discover and define real problems, so that I could weed out any assumptions and design solutions for actual frustrations.

doubleDiamond.png

DISCOVER

Because no other companies were currently offering time travel vacation packages, I needed to get creative with my research.

Competitive Analysis: For the competitive analysis portion of my research, I decided to look at how other companies were currently were selling vacation packages online, and the excursions that could be added to a trip.

CF_Research_RampUp.jpg

User Interviews: In order to empathize with the users and to gain some insights into the online travel purchasing experience, I decided to interview 5 individuals. Using my interview script as a guide, I spoke with each person, and taking notes along the way. Afterwards, I these notes were transferred to post-it notes.

affinityMap.jpg

DEFINE

During the synthesis phase, I created an affinity map, with my interview post-it notes. This way I was able to group together similar themes and patterns, in order to gain insight into the users’ overall experience. Combining those with my competitive analysis findings, I was able to define the following insights.

  • 80% of people have positive experiences with booking travel online

  • There is the desire to have one itinerary with the entire vacation clearly listed, and easily accessible on their mobile phones.

  • In many cases, to book an entire vacation, including excursions, several people had to purchase through multiple companies.

How Might We: At the end of the synthesis phase, I developed a key HMV question to guide me through the development phase.

How might we make it easy for a traveler, to plan and book a relaxing, safe and enjoyable time travel vacation online, including any additional excursions they would like, all in one transaction, and then have that information itemized on one itinerary?

To influence my decision making, during the design and ideation phase, I created a persona, empathy map and a storyboard. I would refer back to these documents, to remind myself of who I was designing this product for, and what problems we needed to solve.

Persona

Persona

Empathy Map

Empathy Map

Storyboard

Storyboard

DEVELOP

INFORMATION ARCHITECTURE

Card Sorting:  Zeit has a wide variety of travel destinations that stretch from prehistoric times up to present time. In order to gain further insight as to how users would interact with the Zeit navigation, I performed a set of open card sorting exercises. Some were online and some in-person. The goals of the card sorting exercise were as follows:

  • Analyze how people would categorize some of the different travel destinations being offered through Zeit.

  • Discover similar groupings and commonalities between the way participants labeled their groupings.

Images from one of the in-person open card sorting sessions.

Images from one of the in-person open card sorting sessions.

The results had shown that people organized the packages by region, but also by the type activity or action, happening at that time period.

The Similarity Matrix from the online open card sorting sessions.

The Similarity Matrix from the online open card sorting sessions.

CF_CardSort_Exercise2.jpg

Now that I had four clear top topics to categorize the vacation packages under, the next step was planning out the navigation and creating a site map.

Site Map

Site Map

INTERACTIVE DESIGN

Flow Diagrams: Before moving into wireframing and UI development, I created user and task flow diagrams, to illustrate the ideal pathway the user would experience through the navigation.

Task Flow

Task Flow

User Flow

User Flow

WIREFRAMES

Using the site map, user and task flows, as well as my research into common design patterns used for online travel websites, I started sketching out how the navigation, UI, and product information.

Wireframes sketch for the Zeit desktop homepage.

Wireframes sketch for the Zeit desktop homepage.

Now that I had a rough idea how the homepage would look, I worked through how the UI would react responsively across a desktop, tablet and mobile.

Initial Lo-Fi Wireframes for the responsive website

Initial Lo-Fi Wireframes for the responsive website

DELIVER

Prototyping: The next step was building a prototype. Using InVision, I constructed the prototype from wireframes that were uploaded through Sketch. This prototype was built to test the process of booking a trip to Ancient Rome.

Usability Testing: To test how the user experience would be while booking travel, I performed usability testing with 5 individuals. Each user was tasked to book a trip to Ancient Rome, for two people, select a king room, then add on an excursion. The results from the testing were as follows:

  • 75% of users stated they found the site interesting, and wanted to explore other available trip destinations and information. They were disappointed when not everything was “live”.

  • 100% of users wanted a Continue button at the bottom of the Review Trip Details page.

  • 100% of users clicked on a different element of the Ancient Rome destination card before clicking on Learn More.

  • Overall Complete Rate: 100%

  • Error-Free Rate: 100%

UI DESIGN

Taking the information gained from the usability testing, I made the adjustments to my wireframes and moved into the high-fidelity phase of the UI Design.

Mood Board: I started this phase by taking a few moments to develop a mood board of color, illustrations, branding, etc., that would express the overall look and feel of the Zeit branding.

Zeit_Moodboard.png

Logo Development: A part of this project was also creating the Zeit logo. I started by sketching out quick ideas and thoughts. Then I selected a couple that I would push further, before landing on the final design.

Sketch page for potential Zeit logo designs

Sketch page for potential Zeit logo designs

Final logo design shown on different color backgrounds and at different sizes

Final logo design shown on different color backgrounds and at different sizes

FINAL DESIGN & UI KIT

After developing the Zeit brand style guide, I moved into applying those guidelines to my responsive homepage designs for desktop, tablet and mobile.

Final Designs for the responsive website for desktop, tablet, and mobile

Final Designs for the responsive website for desktop, tablet, and mobile

For handoff and delivery, I created a UI kit and a redlined document using InVision Inspect.

NEXT STEPS

  • Develop the Zeit Story web pages and how time travel works. Research into the best ways to familiarize users with innovative brand products/technologies.

  • Taking the findings from the usability sessions, and make refinements to the booking process.

  • Start development of the trip planning features of the website.