Zeit

Role: UX Researcher, UX Designer, UI Designer

Zeit is a fictional company that is planning on commercializing time travel. With 259 destinations to choose from, Zeit wanted a responsive e-commerce website that would allow users to browse through and book trips. Additionally, I was tasked with creating a brand that was considered both modern and classic at the same time. 

The challenge? How do you design a website for a product/concept that doesn’t exist?

Research: Discovery

What do I need to know?

While time travel is a foreign concept to people, booking travel isn't. I was curious to know people's opinions on time travel, but when dealing with a hypothetical scenario, it's hard to know if people would act the same way that they think they would act. Therefore, I felt it was best to focus most of the research on something people have experience with - travel.

As this was my first time conducting research for a design project, I had some learning opportunities (i.e. how to write survey questions that do not confuse people) - however, I learned some key takeaways on people's motivations for travel, their concerns and the information they would need.

Research: Strategy

Who would use this?

Now that I understood more about people's motivations and expectations regarding booking travel, it was time to synthesize this information in the form of a persona. The persona I made was Ben! Ben took qualities that I found in my research and gave a human aspect to the data. He was somebody who liked spontaneity but had a real fear of missing out if improperly informed.  I would use my persona to make design decisions. Would Ben need help on this page? What information would he prioritize?

Once Ben was formed, I needed to flush him out more than the elements addressed in the persona. How was Ben interacting with the travel industry? What was he seeing, feeling, doing? If I could hone in on those elements, I would know what to prioritize when I designed. Therefore, I took the results of my research and added it to an empathy map, to really begin to build out Ben's experience when booking travel. Now that I had an idea of a person who I was designing the website for, it was time to start thinking about how I would organize and layout the design.

Planning: Organization

How do I organize this?

Before jumping into determining my site's organization, I conducted a card sorting exercise online in order to determine how people sorted historical events. The goal of this exercise was to understand how people might sort historical events, which would help inform the structure and navigation of the website. 

The card sorting exercise acted as a learning opportunity for explicit instructions. Because my instructions were not clear, some participants gave up during the exercise, or sorted cards into groups like "I don't know what this is". Despite this hiccup, I was able to determine that most people sorted historical events by time periods, activities, and a surprising one - active or passive participation. This helped me dictate how to create my site map.

Design: Low Fidelity Wireframes

What will it look like?

Now that I knew how I wanted my site to flow, it was time to get to work on the structure and layout of the pages themselves. Therefore, I built the below responsive wireframes of the Home page and the Trip Details Page. I learned that it was important to build out these initial "brandless" wireframes to understand how the website would look, without having the pressure of selecting the color palette, images, and final design features. It is a good opportunity to give the layout a critical eye without any distractions. 

While there are some elements within the wireframes that did not make the final cut, creating these wireframes was imperative in helping me flush out the design and make decisions regarding how to visually represent the organization I had come up with from the sitemap.

Design: Style Tile

How should I style it?

I was tasked with making the brand both modern and classic at the same time. Additionally, from the research results, I knew that security and scams were at the forefront of people's minds. Therefore, I wanted a brand that also inspired trustworthiness. 

I brainstormed adjectives I wanted to be associated with Zeit. I came up with: Adventure, Modern, Timeless, Awe-Inspiring, Historical, and Classic.

I chose black and gold for my primary colors as that combination always evokes a sense of luxury and stability. I went with a Serif font for titles and headers to evoke a sense of history, but selected a sans serif font to contrast it and add a sense of modernity. Finally, I came up with a logo for Zeit. My inspiration for this logo was a Roman banner so that people would understand the ties to history when they saw the logo out of context.

Design: High Fidelity Wireframes

Putting it all together

With the wireframes I had created, along with the branding choices I had made from my style tile - it was time to make some high fidelity designs.

When I started thinking about usability testing, I realized that I needed to build a few more screens/functions out first. How would users travel from the homepage? How would they use the buttons that I had built on the homescreen? Therefore, I built out the Destinations Page, the travel box (i.e. what you normally see on websites like Airbnb) and some filter options (you can see some of these items in the above high fidelity wireframes).

Addressing concerns

As people were concerned about scams and their safety, people wanted a lot of visual content, and videos in order to showcase the destinations. Therefore, I tried to address those concerns on the home screen, along with providing some information about time travel in general.

Convenience

In order to make booking a trip easier to users, I included a travel box on the homescreen. To access it, you just have to click the "Plan a Trip" button.

Destinations

Making browsing for destinations easy was one of my design goals. Therefore, there is a filter and sorting system on the destinations page, allowing you to approach searching however you desire.

Prototype

See it in action!

Now that I had some high fidelity screens ready, it was time to start building a prototype. Your website can be the most beautifully designed art piece, but if people can't use it, it's a failed design. Therefore, it was important to build a prototype so that I could conduct usability testing. I chose to build a Desktop prototype. The reason for this is that I knew that I was planning on doing some local coffee shop usability testing and wanted to have a large screen for them to see what they were doing.

While I will discuss the results of my usability testing in the below section, the final version of this prototype (based on that feedback) is shown below.

See Prototype

Prototype: Usability Testing

Is it usable?

With the wireframes I had created, along with the branding choices I had made from my style tile - it was time to make some high fidelity designs.

Reflection

What did I learn?

At the end of the project, I wanted to do some reflection. How had I grown? What had challenged me?