Discover

Market + Industry Research

ZEIT is technically the first company to offer time travel booking to the public, so it has no direct competitors within it's industry. This leads the competitive analysis to focus on unique and thrilling experiences. The site would function much like a travel booking site. Because of this, I looked at industry leaders in the adventure travel space. I chose adventure travel vs standard travel as this would be more specific to our target demographic.

Interviews

To better understand the pain points and goals of those who travel with tour companies I developed an interview script and conducted observational user interviews with participants who fell within the provisional persona profiles I’d established. Interviews were an interesting challenge because I was designing for a theoretical product, any mention of what the subject was had to be avoided to ensure I was getting at the root desire and frustrations of travel booking. Mentioning time travel would shift the participants train of thought and could lead to unreliable answers.

I asked each subject some questions about their travel experiences and preferences. I also asked them to walk me through the process of discovering a place to travel and what services they frequently use. Throughout this process my main objective was to explore motivations, needs and frustrations. During the interviews, I recorded our conversation to make sure nothing was missed and to keep the interviewee comfortable and engaged.

Define

Following the interviews, I set about gathering, organizing, and looking for relationships within the information I'd gathered. I first transcribed the interviews and formatted the responses in an interview synthesis table, which allowed me to easily see my notes for each user's response side-by-side.

To further explore relationships and develop a persona, I created an empathy map made up of observations and statements from my user interviews. The empathy map helped me gain a better understanding of my users, discover patterns in behavior, and begin the uncovering what my demographic looks like. Gathering the data in this format leads to insights and identified users needs.

Insights

• Participants are willing to use multiple services to find the best deal.
• Participants find the planning process stressful.
• Participants do extensive research from various sources to ensure they avoid a bad experience.

Needs

• Participants need a way to access information about a booking more efficiently.
• Participants need a way to make the planning process streamlined.
• Participants need a way to access information that is transparent.

Exploring the data in a visual way like this made it easier to spot behavioral relationships, which were then used for the foundation of my user persona.
‍
Jill is the primary persona that emerged as a composite of my research findings. Jill is a young professional who works diligently throughout the year, however, she tries to vacation at least 3-6 times per year. Each trip varies in length but she feels traveling is important as it helps her decompress from work, meet new people and experience new cultures. While Jill enjoys traveling often, she most values an authentic experience that allows her to discover the local spots and check more destinations off her bucket list.

Insights

Those I interviewed expressed a range of feelings about their travels, from amazing experiences to horrific incidents they wouldn’t want to relive again. On a very basic level, with false reviews, algorithms changing based on how long you have been looking at a flight and travel review sites prioritizing some listings over others. People just want to be sure what they’re seeing is what they are getting.

Comparing Business & User Goals

Moving from research and into the next stage of defining the product, I mapped the overlaps of business goals, user goals, and technical considerations. Identifying core project goals while considering technical aspects helps to define the sweet spot between finding viable solutions and prioritizing those which benefit the needs and desires of both the business and the users.

Defining & Prioritizing Features

With the project goals established, I generated a features matrix, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Jill's needs and priorities were used to focus the exercise. This served as a very useful roadmap and overview checklist throughout the project.

Next, I conducted an online card sort. The online sort enabled me to survey a larger number of participants and facilitated the data collection process.  By doing an online sort, it was more efficient to analyze the data and standardize categories to gain a better understanding of my users. In total, I surveyed 10 participants online (via Optimal Sort). The open sort, allowed participants to sort items into as many categories as they liked and to create their own category labels.

The Similarity Matrix above shows the results of the online sort and provides a quick visual read into how participants grouped cards together most frequently.

Summary

Collectively, the categories created and patterns identified in this study provided helpful insight into how people within the parameters of Zeit's customer base think about trip types and helped inform my decisions when categorizing information on Zeit's site. This exercise was valuable in terms of confirming user expectations and preferences.

Site Map

Based on the results of the card sorts, I created a site map outlining the relationship of content on Zeit’s site, with the goal of creating the most simple and intuitive navigation possible.

Interaction Design + Testing

Equipped with the content foundation of the sitemap, I moved into ideation. I created a user flow to think through paths a user might take through Zeit in order to complete tasks related to completing purchases on the site. In the user flow, Jill moves through three scenarios, mapping her user journey from each possible entry point to check out. Mapping this user flow helped me hone in on the key screens to prioritize as I began wireframing and prototyping.

Design

Sketching

Before moving into digitally sketching wireframes, I began with some hand-sketched concepts for the Zeit home page. This gave me an opportunity to think through which direction might best meet the needs and wants of Jill, as well as meeting Zeit's priorities and business goals.

Mobile Protoype

I also created a quick mobile prototype with pen, paper, and Marvel. This was another opportunity to gain insight on users interacted and navigated the way I'd structured Zeit's content, as well as thinking through how the site might translate in a mobile environment. It also gave me a chance to play around with Marvel for the first time and discover just how quickly one can put together a prototype.

Wireframing

After developing a UI requirements document, I began wireframing some key pages informed by my user flow. These screens were developed with the goal of quickly translating them into a prototype so that I could begin testing my design early in the process.

Responsive Design

To begin thinking about how Zeit's content and layout would adapt and adjust across different viewport sizes, I began sketching of responsive layouts for the home page. Both the low fidelity wireframes and high fidelity mockups are shown here.

Low Fidelity Protoype

I employed prototyping multiple times in the course of designing the new site for Zeit. In this first lightweight, low-fidelity prototype, I quickly brought my wireframe screens into InVision and built a lo-fi prototype to share with users. This allowed me to gather feedback early in the design process and test my design and assumptions before progressing further.

Brand Identity

For Zeit's visual design, I began by defining the brand attributes, which were informed by the project brief and my user research. The attributes were anchored around 4 central characteristics of the brand:

INNOVATIVE / RELIABLE / DYNAMIC / SECURE ADVENTUROUS / EXCITING / ECCENTRIC
STABLE / MODERN / MINIMAL

I began collecting some brand style inspiration via Pinterest, then created a mood board.

In creating a logo for Zeit, I sketched ideas which explored several different concepts which I thought embodied what Zeit is. Some of these concepts included space, shapes, connections, clocks, vortex, portals, hourglass and rockets. I also explored some more straightforward, simple directions that were based upon a distinct wordmark/typeface.

The initial, unrefined explorations shown above helped me hone in on a few different directions I might pursue. Reflecting once again upon Zeit's brand attributes, I determined that the abstract hourglass concept best conveyed the feeling of a brand that was modern, innovative, and minimal.

Style Guide + UI Kit

With the brand direction established, I created a Style Guide and UI Kit for Zeit. These are living documents which can be updated and added to as the site (and brand) develops and evolves. By documenting the UI patterns and components used in the design, it can better ensure that they are repeated and, therefore, consistent across the product.

High Fidelity Protoype

After creating the mid-fidelity wireframes and iterating based upon feedback gathered from the first prototype, I created an updated, higher-fidelity prototype and tested again.

Testing + Handoff

Usability Testing

5 participants were asked to walk through the prototype. I asked each participant to complete three tasks according to the information in three scenarios I provided. I observed each and took notes as they navigated the site. I also recorded each in-person session with the app Silverback, which records both the screen and the test subject’s face and voice as they navigate through the screens.

Priority Tasks

Locate ‘Cleopatra's Egypt’ and save it to your favorites.
Find trips priced below $3,000.
Locate ‘Cleopatra’s Egypt’ and book the trip.

To synthesize the results and observations of the testing, I created an affinity map as a way of interpreting and prioritizing my findings. The insights gleaned from my observations inform the recommendations. If limited to time or budget, this prioritization can inform which recommendations to pursue.

Testing Takeaways

Overall, users were able to navigate the site smoothly, find items efficiently, and navigate to checkout successfully. However, there were some points in the flow and sizing issues that caused confusion. The details identified through user testing helped greatly in identifying what changes should be made, how they should be prioritized, and which features should be given priority in future stages of design and development.

Handoff

I used Zeplin to create specs for the handoff of the design. This offered an opportunity to review the design's cohesiveness once more and tighten up any discrepancies.

Website

Project Takeaways

In the end, organizing the structure and content of Zeit's site in a similar way to many other luxury travel websites proved to be the best way to enable Jill to quickly find and purchase the trip she's looking for. Exploring and leveraging these existing design patterns and user expectations within the travel space allowed me to build upon the successes and failures of others who have worked to solve similar problems before me. Testing revealed that users expect certain conventions in terms of categorization and labeling, and when the information architecture departs from that, it can cause confusion and impede users' ability to successfully navigate.

Next Steps