Our second research phase included a series of interviews with 5 potential users that were meant to represent our core user base. Ages ranged from 30 to 60 and all were self-described semi-frequent travelers. All questions were designed to uncover our research goals:

1) Understanding the pre-trip booking process
2) What helps people book effortlessly?
3) What makes people trust a new technology?
‍
We found that many people learn about new tech from their friends or colleagues and that some do their own research via YouTube or the news, but they still want to use others using it first. We also found that many users want to get the best deal, even if they make more than $50,000, and they want clarity when it comes to pricing. The ability to compare and contrast between options was frequently mentioned during the interview process.

Users & Audience

Based on our initial research, we created a persona named Bradley Cole to act as a stand in for our users. Bradley is a 28-year-old freelance photojournalist who describes himself as a semi-frequent traveler. He has a strong need to thoroughly research potential travel destinations in order to make sure it’s worth his while. The ability to easily compare options – and especially their price – is very important to him, as is the ability to customize his experience.

Planning

Thanks to our initial research as well as our persona Bradley, we had some direction as to where we wanted to go with the feel of Zeit. We knew that visually pleasing images were going to be in heavy use, and clean, informative copy was going to be paramount to converting visitors into users. Hierarchy and calls to action had to be clean and unambiguous in order to synthesize this information into an easily digestible manner. Perhaps most importantly, we wanted the user to feel like they were always in control.

With this in mind, we began sketching in low fidelity, trying to iterate as many ideas as possible. An initial idea we had was to have a big, beautiful landscape image of a destination in the hero section, but this clashed too often with our main call to action – getting users to the search results page. We modeled our flow after one of the most popular ecommerce websites in existence: Amazon. There, all of the action takes place on the search results page, and the user has the ability to browse, compare, and customize their experience in any way they see fit. The user is in complete control.

Original Zeit sketches

Features

While planning the layout of our website, we hashed out our feature roadmap, organizing things into four categories: must-haves, nice-to-haves, surprising-and-delightfuls, and can-come-laters. The must-haves included the obvious such as account creation and checkout, but also the less obvious such as filters, reviews, and a “how it works” section, which were included based on our research findings that indicated that users wanted ot feel in control of their own research process. It was during this time that we also focused on our goals, for business, users, and technology alike.

Information Architechture

After getting a clearer picture of the overall structure of the website, we wanted to get a better idea of how to order this information, so we did some research on information architecture via card sorting. 6 participants were enlisted to each sort 30 destination cards in any way they saw fit. Most users created anywhere from 3 to 6 categories, and a similarity matrix further helped us break down just exactly how users were mentally organizing these destinations. We decided on three distinct categories: chronological (titled “era” to make it more succinct), geographical, and by type (later titled “genre”). Each category could further be broken down into subcategories. For example, users could elect to view by geography, then further filter the information by a list of regions.

Zeit card sorting exercise

Flows

With our information architecture in hand, our next steps were to create sitemaps, task flows, and user flows. The sitemap emphasized a shallow approach with the search results page doing a lot of the heavy lifting. Our task flow helped iron out the booking process, and the user flow took us on a journey that a typical user might experience upon checking out the homepage for the first time. A UI requirements document helped put all these task needs into words. We had a clearer idea of what to build for each page.

Wireframing

After gaining some inspiration from our contemporaries, we started iterating with wireframes. Early versions included a “how it works” video in the hero section, but this caused too much competition with the main call to action. We also felt that it would be a waste of premium space for returning users. Considering our persona Bradley, who would want to investigate as much as he could, we still decided to give it a high level of importance and moved it to the section right below.

Branding

As the structure began to take shape, it was at this time that we began to focus on the Zeit branding. For the logo, we wanted something that indicated time travel, but was easily decipherable and not too confusing. Most of all, we wanted it to be memorable. We decided to go with a simple backward arrow on the top of the Z, with the nod to all over the time travel occurring only in the past. A further treatment on the “Z” where it was broken up into sections was experimented with, but it drew the eye to see shapes that were not meant to be seen, such as a hidden “7” in some cases.

For the typography, we wanted something simple and a modern, and settled on Helvetica Neue. It’s a font that’s easily legible at a variety of sizes and doesn’t get too fancy. It lets the content do the talking instead of distracting the user.
‍
Likewise, we wanted a simple color palette that didn’t try too hard to wow the user. We decided on a brand color of purple in large part because it represented what we wanted our brand to be: regal, nostalgic, creative, and imaginative. The cool color also palette helped evoke the feelings of calmness and relaxation.

After many more iterations and a ramping up process that included incorporating color and images, we finalized our initial design and created a prototype.

Usability Testing

Our test goals for testing were to

1) Observe the user’s flow when finding  a destination to book
2) Discover how a user elects to sort/filter information
3) Evaluate the best manner for displaying information on the search results page

Three usability tests were conducted in person and 2 were conducted via a remote screenshare. Ages ranged from 27 to 60 with each participant self-identifying as a semi-frequent traveler.

Participants were asked to do four tasks:

1) A general user flow task
2) Booking a trip to see the Martin Luther King speech in the United States
3) Sorting United States destinations by price
4) Displaying trending destinations in Europe

Priority Revisions

Most users had no issue booking trips, but several other problems arose. Initial user flow analysis indicated that many people didn’t immediately recognize Zeit as time travel. This was likely due to vague copy. Some users also had trouble locating the sort button and weren’t immediately clear on what “custom” tab at the top of the search results page was supposed to do. In response, we moved the sort dropdown below the specialty tabs, in line with the search results information. We also improved the hierarchy on this page in general, giving clarity to what each section is supposed to do. An affinity map helped us synthesize this usability testing and create a to-do list to tackle these problems.