Travel eCommerce Responsive Website

Zeit time travel tourism
Project Year
2022 (February)
Tools
Figma, OptimalSort, Miro
Project type
Branding & Responsive
Website Design
My role
User Research, IA, IxD, UI Design, Prototyping, Testing, Branding

Overview

After a decade in the making, officials in Brussels announced that the International Concordance on Time Travel is giving Zeit, a subsidiary of Richard Branson’s Virgin empire, standards to finally democratize the experience of time travel. 

A total of 289 destinations all over the world--from prehistoric times through today--have been approved and finalized to receive travelers at any moment. 

The human race has been dreaming about time travel for ages. Now it’s finally possible! Truly, these are exciting times to live in!

View prototype

Challenge

Zeit needs help becoming established in the travel industry as the world’s first-time travel tourism company. Zeit is requesting the design of their new brand and e-commerce responsive website so they can sell travel packages and tickets to different times.

Solution

Design Process

Empathize

Market research

In order to get a better understanding of the current travel industry, I performed market research. During this research phase, I identified Zeit's target market as well as trends and facts surrounding the current travel market. Key points I discovered:

Competitive analysis

Provisional personas

Prior to conducting the user interviews, I developed Provisional Personas to help represent a group of potential Zeit users who may share identical or similar needs and pain points.

User Interviews

With a better understanding of the travel tourism market and with some provisional personas in mind, it was time to talk to real people who travel frequently and gather in-depth qualitative data. This would allow me to identify the goals, needs, motivations, and pain points users may have with respect to booking travel online and traveling in general. I found four frequent travelers and asked open-ended questions regarding their experiences. In synthesizing the results, I gained the following insights: 

User Needs
  • To  book travel via a website or app that is easy to navigate
  • A travel package and trip itinerary that is clear and transparent
  • To conduct research and read travel trip reviews
  • Experience history and be immersed in culture
  • A tour guide to lessen travel stress and enhance experience
  • Ability to compare packages and pricing
  • Travel websites that make it easy to convert quickly to English
  • New and unique experiences
User Pain Points
  • Spending a lot of money when the trip does not meet expectations
  • Losing luggage during a trip
  • Misleading travel and luggage fees
  • Potential for travel fraud when booking a trip
  • Negative experiences with Tour Guide / Tour Bus Driver 
  • The limitations and lack of flexibility of planned trips via a tour group / guide 
  • Knowing which trip / travel reviews are credible

empathy map

With a better understanding of the travel tourism market and with some provisional personas in mind, it was time to talk to real people who travel frequently and gather in-depth qualitative data. This would allow me to identify the goals, needs, motivations, and pain points users may have with respect to booking travel online and traveling in general. I found four frequent travelers and asked open-ended questions regarding their experiences. In synthesizing the results, I gained the following insights: 

"How may Zeit users be feeling?"
"What may they be thinking?"  
"What may they be doing?" 

Define

user persona

Now that I have completed my primary and secondary research from an empathetic perspective, it was time to develop a persona to represent the ideal Zeit user. Meet Jean! 

card sorting

To help design the information architecture of the Zeit site, I completed a card sorting exercise. My goal in conducting the card sorting was to understand how to organize time travel trip content so that Zeit users may navigate the site easily when looking for a time travel destination. I also need to consider - If a Zeit user visits the website and they can’t find what they want right away, they’re likely to not stick around for much longer.

I used OptimalSort software for the card sort. It was an open sorting study with 4 participants and 20 trip title / card variants. All of the cards were examples of potential Zeit time-travel trips that could be purchased via the website (see below for a few examples) and participants created categories for the trips. 

After analyzing the results, I gained the following insights:

  • Participants organized their cards by time period (ie “Early World History” and “Modern World History”)
  • Participants also sorted trips by cultural experiences (or interest) type (ie “Arts and Music”, “Architecture”, “Events that changed the world”, “A day in the life”, etc.)

site map

After conducting the card sort and analyzing other travel websites, I had a better understanding of how to best organize Zeit’s navigation in terms of trip destinations and site structure.  I then designed a site map to outline the overall navigation.

Ideate

wireframes

As a first step in the ideation process, I drew sketches to illustrate some ideas of how the site would look from a responsive perspective. I then chose the concept that would best meet the needs of Jean (my Zeit user persona) and others like her. 

Since Zeit is one of the first to offer time travel trips, I knew the site’s layout and navigation should be somewhat familiar with other travel sites and design patterns. This would help users feel safe and more likely to build trust in Zeit. 

I then digitized the wireframes. Once the desktop layout was complete in Figma, I created tablet and mobile versions to ensure Zeit users have a consistent and smooth experience regardless of the device they are using to access the site.

mood board

One of my favorite aspects of design (besides the actual process itself) is putting myself in the shoes of users in order to explore what emotions may be expected and what is visually inspiring to them when experiencing the brand and product. Creating a mood board is a great technique used to achieve this. From this process, I began to discover colors, images, and textures that would soon help visualize some of my design ideas and branding concepts.

logo design

To start the branding process, I began to sketch multiple pages of ideas for the Zeit Logo; keeping in mind Zeit’s request for a modern, yet historical design. I then digitized three final logo concepts. I decided to go with Logo #1. I felt the elliptical motion captured the essence of time travel (traveling both back in time and even forward into the future) in a simple manner. I felt this concept would be a stronger match for Zeit's brand identity. With Zeit’s wordmark at the center of the logo, I felt this would help build feelings of safety and trust in the user as well.

Brand Style Tile

Once the logo design was completed, I created a Brand Style Tile.  I crafted a color palette, font pairing and buttons. This style tile will be used as a guide while designing the site’s responsive UI.

Desktop + mobile ui

Next, it was time to apply the brand identify, visual design concepts, and navigation and search patterns to some high-fidelity wireframes. To start, I designed 3 pages for desktop and mobile viewports: Zeit's homepage, trip search page, and trip search results page. While keeping Jean and other potential Zeit users in mind, I also considered design patterns such as clear primary actions, smooth filtering interaction, and included hierarchy patterns such as breadcrumbs. Knowing that my Zeit users enjoy sharing and documenting their travel adventures, I considered social media and community design patterns; including a share icon and Zeit trip testimonials as well.

ui kit

With the high-fidelity wireframes complete, I created a UI kit for Zeit. This document is a complete list of brand assets and styles that will be used throughout the design process and future iterations.

Prototype

In building the desktop prototype, and keeping in mind the user flow of searching for a time-travel trip and booking a time trip, I needed to design 2 more Zeit high-fidelity pages (a search results page and booking page). With designing these 2 additional pages, I was sure to keep Jean (Zeit User Persona) in mind and with that make sure the trip results page had all the information she would need for the booking process (including fine print such as trip add-ons and additional fees). I designed a progress indicator for the booking form to ensure the overall user experience would be easy and smooth. These additional pages would allow me to complete the prototype and conduct usability testing.

Test

usability testing

My main goal for usability testing was to analyze how users would find and book time travel trips. With that, I wanted to identify potential pain points during the search and trip booking tasks. I conducted the test with 3 participants. I met with 1 participant in-person and the 2 remaining usability testing were done remotely. All participants used their personal desktop or laptop computers. I used Zoom with the 2 remote participants where they shared their screens and navigated the Zeit prototype while I moderated. I used a think out loud method and documented observations. I had also requested permission to record the participant completing the following 3 main tasks:

  • Find the section of the website that will provide information about a time travel trip to see the Eiffel Tower being built.
  • Share the Eiffel Tower trip details with your friend who is accompanying you on your next trip.
  • Navigate to the Eiffel Tower time travel trip page and book your trip.

Before assigning the tasks to test participants, I asked for general feedback on the homepage. I wanted to understand if the overall design and aesthetic are pleasing to the user. I also wanted to test the usability of the homepage and ensure that the content and imagery were engaging enough to build trust within the user.

With time-travel being a new and complicated concept, my goal for the homepage, as the user's first interaction with Zeit, is to instill trust as well as inspire the audience to explore trips and ultimately complete the task of booking their time-travel destination. Some questions I asked users: 

  • What is your overall first impression of the design?
  • After scanning the homepage, is there any important information to you that is missing? 
  • After visiting the homepage, do you feel confident in the company and ready to start searching for time-travel trips? 

usability test Findings

After usability testing was complete, I created a usability test findings document that noted the error-free rate & task completion rate. I also included documented notes regarding the general feedback I received as well. To better synthesize the test findings, I created an affinity map. Each participant was assigned a respective sticky note color. I then grouped similar sticky notes according to common themes and determined the improvements to be made, further prioritizing those improvements for reimagining the design and entering the iteration phase.

Reflection & Next Steps

This particular project taught me how important research can be when designing for a business that doesn’t exist. For example, how do I gain insight from users on an unknown business without mentioning “time travel”? I relied on users’ needs, behaviors, and frustrations in regard to traditional travel, yet also explored their curiosity in terms of their feelings and emotions around unique travel experiences. In addition, when analyzing the competition, I had to think creatively. I conducted research on indirect competitors to explore the current landscape of where my potential users may exist. I also relied on similar design patterns of traditional travel sites to foster an experience that felt easy and familiar to my users and ultimately ensure they achieved a simple and smooth travel booking experience. A few next steps will be the following: 

OverviewEmpathizeDefineIdeatePrototypeTest