Project Brief

Zeit, a subsidiary of Virgin empire, is a hypothetical innovative travel company offering something that no other organization has provided before: time travel.

CEO and Founder of Zeit, Richard Branson, is looking to offer a unique experience, with safety as a top priority. With approval from the International Concordance of Time Travel, Zeit is ready to take guests to regulated destinations throughout history. 

Goals and Objectives

• Establish Zeit’s branding, including a new logo to represent the company

• Create a responsive e-commerce site that is easy to navigate, makes time travel booking accessible and highlights what makes each destination special

Key Research Findings

• Users travel to experience new things and make the most out of their trips

• As users are researching destinations, they are looking for: flexibility, a high quality experience, to get the best deal, and prefer to travel to places with recommendations from a source they trust

• Passion and interests outweigh price for an experience

One thing that really stood out to me was that each of my interview participants referenced being worried during the booking process— specifically regarding cost or getting the best deal. However, they made it clear they did not care about price when it came to experiences they were really excited about. Because the service provided by Zeit focused around special activities and events, I felt this was something important to keep in mind as I moved forward in the process.

Define

User Persona

Developed from the information gathered from both the surveys as well as the 1:1 interviews, I was able to create Zeit’s ideal user.

Identifiers like age, location, and occupation came from the demographic information, calculating the most common responses in both my surveys and interviews. 

Speaking one on one, I was able to get a better understanding of the full process that comes with booking online. There was a ton of overlap when it came to motivations, goals, fears, and frustrations from my interview participants. This made it easier to define Emily’s feelings when it comes to planning trips and how she perceives the travel booking experience. My participants also shared what third party websites they use, how they decide where to go, who’s coming with them, what sort of activities they like to do when traveling, etc. This helped shape Emily’s favorite brands and better tell her “story”.

Meet Emily Dane:

Project Goals

Taking this new knowledge acquired from my research as well as the prior information I had about Zeit, I was able to pinpoint the main objectives of each party (as well as any overlapping or shared motivating factors).

Product Roadmap

With a better understanding of the goals, I created a road map to establish necessary product features. These features were prioritized based on need, urgency, and time required to develop.

Card Sorting

In order to begin to define the structural organization of Zeit’s site, I administered an open sort electronically with OptimalSort. With 11 participants and 30 cards of potential time travel trips, the information gathered helped to provide clarity and establish user organization. The majority of the participants sorted primarily by era or the type of activity.

Site Map

From there, I created a site map to establish the structure, relationship, and hierarchy between information throughout the design.

Sketch Ideations

Pulling this all together, I created multiple sketches of potential layouts for Zeit’s site. My main goal was to best organize the information based on the findings in my research.

Task Flow

I established a linear flow to show how a user would book an experience through the site, including actions and pages that the user would land on.

User Flow

Bringing this a step further, I developed a comprehensive flow with potential decisions the user would encounter as they go through the booking experience.

Product Requirements

Taking the task flow and user flow into account, I established product requirements (pages to design as well as detailed requirements) that would allow users to successfully complete main tasks.

Tasks included:

• User arrives to the homepage and wants to book a trip

• User arrives to the homepage and wants to create an account

• User arrives to the homepage and wants to view personal account to see current reservation

• User arrives to the homepage and wants to learn more 

Design

Lo-Fidelity Wireframes

Researching websites in the travel industry, I looked to big name brands as well as small boutique agencies and hotels to gain inspiration in the design of the Zeit site. Taking into consideration my key research findings, I prioritized how information needed to be presented on the site, and developed my lo-fi wireframes accordingly. It was important for me to hit the main business goals and make the experience as easy as possible, especially considering the complicated nature of the service being offered.

Responsive Wireframes

Taking this a step further from the initial desktop design, I developed responsive wireframes for tablet and mobile sites.

Branding

Mood Board & Style Tile

I made a visual mood board by gathering inspiration to effectively portray the tone desired by the company. From here, I developed a Style Tile to establish the typography, color palette, and iconography that would be used as a reference throughout the site.

Responsive UI

Taking the initial wireframes and applying Style Tile elements, I was able to create the first iteration of hi-fidelity wireframes, including responsive pages.

UI Kit

A UI Kit was created to to ensure visual cohesion across all wireframes, expanding beyond the Style Tile. The UI Kit included information to establish grids, button states, field states, menus, etc. and provide a standard for the present as well as the future.

Test

Prototype

I developed a prototype using InVision. This included: Homepage, Results Page, Product Page, Booking Page, Payment Page, Trip Summary, Booking Confirmation, and About Page, as well as overlay screens (for modals) such as a menu drop down, account creation, and sign in.

Check out the prototype, here

Usability Testing

Working directly in-person with 3 participants, I conducted usability testing on my mid-fidelity prototype.

Even with a small group of people the results were extremely helpful. It was enlightening to hear what matters most to people (or what doesn’t). All of my participants had varying stances on the importance of things like reviews, testimonials, the About Page, etc. It reinforced the idea that each person can have a uniquely different experience when landing on a site.

Affinity Map

After compiling the information collected through the usability testing, I created an affinity map. Through this experience, I was able to identify opportunities to improve the site based on participants’ frustrations, concerns and suggestions.

See the full Affinity Map, here

Priority Revisions 

Based on the findings from my usability testing, several adjustments were made to the design. These iterations were organized and prioritized based on the time allotted and potential impact on the goals of the business. While there were several important takeaways, one of the most notable (and inspired the majority of the changes) was this:

Users want to feel safe: know what’s going on, where their money is going, and how they will be supported by a company. As Zeit was offering an entirely new service, having critical information front and center was imperative. Their offering was much more nuanced, and that should not be ignored.

Because my participants had diverse feelings about what they considered useful or necessary during a booking experience, it made it more challenging when considering what modifications should be made to my design. In order to appropriately plan the changes that could best address the needs of both the user and the business, I referred back to the information gathered during my usability testing as well as my research findings.

Immediate Changes

• Adjusted sizing and color for elements that were difficult for users to see/interact with 

• Provided context around Zeit’s travel process during the booking stage, including a cancellation policy

• Reorganized the homepage to prioritize information on the travel process over showing available trips

Future Changes

• Develop a unique “Explore” page to allow users a browsing option & gain more knowledge

• Consult legal team to include safety protocol and expand on information provided during booking process

Concluding Thoughts

Having been my first experience with the full design thinking process, I was able to learn a lot. Most importantly this project helped establish best practices and experience working with a product that was not well known.

Had there been no time constraints, I would love to go back and continue to research (with more participants, and specific tailored questions), iterate, and test.

This experience functioned as a gentle reminder that one size does not fit all. Starting off, my design was based on research and information supporting travel in general. Much of my initial visual inspiration came from well known travel conglomerates. It’s crucial to remember that what works for them may not necessarily work in the exact same manner for a new, lesser known/established company. With that being said, as designers, we should not necessarily try to reinvent the wheel… we should just try and make it a more enjoyable, useful, delightful, better functioning wheel :)

It’s all about balance.