Context

Recently, the officials of Brussels announced the International Concordance on Time Travel, giving Zeit a set of standards under which they can democratize the experience of time travel. Zeit wants to make the selling of the tickets as easy as possible. We are launching an e-commerce website to easily display the trips and filter and categorize what destination options there are to book.

Challenge

Help users successfully book a time travel experience efficiently on an e-commerce platform.

Time travel has never existed before, so it’s important to understand the journey users take when they plan trips and what their booking methods are, and how we can learn from those existing challenges and improve the e-commerce experience.

Solution

Develop a smooth and trustworthy travel booking experience.

E-commerce sites simplify services for users that businesses offer and will allow users to book experiences from any location or device.

These are the high-level goals and objectives:

1. Who will be utilizing the opportunity to book time travel experiences?

2. Why would users want to experience certain events from the past?

3. What booking processes do users use currently?

4. What would influence a user to trust and book an experience with Zeit?

5. What are some challenges or pain points that could arise using a new travel site?

Research

Secondary Research

I started by comparing both direct and indirect competitors. This gave me a good start to what the common goals and tactics are in the industry and what type of audience these companies captivate. I looked at companies like Space X, Blue Origin, Galactic, Travelocity, and Tripadvisor. 

What I Found:

The branding creates excitement for the people using the sites and creates an emotion of feeling like the user is a part of something innovating. Urgency is created for the user, waiting lists are generated for people to be able to use their product. Navigation is clear and provides a simple search optimization that gives users the choice to filter results and information.

Competitive Analysis

Market Research

1x1 User Research

Using my secondary research and market research insights, I developed a target audience to help me conduct and schedule the 1x1 user interviews. During these interviews, I gathered data that uncovered the user’s habits, motivations, and frustrations. A real connection was made with the users and I gained direct insights into them through primary research. View the interview script.

User interview summary:

4 Participants were interviewed about their past trips and online booking experience

What I learned from users

Their trusted brands, frequency of travel, processes, wants, and needs:

• The ability to filter activities

• Flexibility with traveling dates

• Experience a  trustworthy purchasing experience

• The ability to travel at least once a year for a week or so

• A clear comparison of prices and deals

• All users desire to complete activities and experience new culture on their vacations

• All users need a clear vision of their planned vacation - activities, schedules, cost, etc.

Popular sites they use to book trips with:

The Users

Define

Card sorting

To determine how I was going to organize ZEIT’s website, I conducted a remote open-ended card sorting exercise. The goal was to get a clear understanding of how a user might look for these categories on our site and create a path for the information architecture. The card sorting consisted of 6 participants. The way the cards were categorized was similar to how I assumed they would be. The results did surprise me in a sense of the number of different categories. A majority of the cards were categorized similarly, but with a different category title. So the same meaning, but with a different way to name it. Another takeaway I had and was surprised with was that I thought there would be far more categories and have to get more granular when I went to create the navigation. Instead, this analysis gave me the reassurance to let the research speak for itself, and make the navigation as simple as possible.  I used this analysis in combination with looking at best practices in competitor analysis.

Some key findings include:

Ideate

Feature Roadmap

I wanted to figure out what were the most important things we should do first, and why? In the roadmap, I wanted to create a list of features based on the user research conclusions, the business’ needs, the persona, and the market that I analyzed. The roadmap is going to be primarily used by the business and product managers while keeping the developers informed. I prioritized the features on the list based on their importance to ZEIT and the users. 

Task Flow and User Flow

By identifying the flow that the user will follow to complete the main task,  I created a path to the key screens that would be a part of the major design. This really helped me see how many steps were actually necessary to complete these important tasks. Building on the task flow, I mapped user flows whose scenarios correspond to the established tasks. This process helps me incorporate pages I need to design for users to successfully complete those tasks. 

UI Requirements

Before diving into sketches for wireframing, I wanted to organize a list of what I would like to have built into the UI. This was great for referring back to when I wanted to start developing sketches. View the requirements here.

Low-fi and Responsive Wireframes

Next, was implementing my sketches and taking them into Figma. They set a clear outline of how I would create a consistent layout across all devices. Starting with the low-fi allowed me to focus on establishing placement.

Branding

Mood Board:

I created a mood board to help elevate the brand and determine what the tone would be for ZEIT. I explored the different avenues that I wanted to take based on the user persona that would evoke emotion for the user.  Using adjectives to describe the brand and the type of emotions the brand should evoke, I was able to delve deeper into creating a meaningful brand by searching and testing out colors, typography, and imagery.

Logo Design:

I created multiple concepts for the logo, beginning with sketches and then taking the ideas into Illustrator and making concepts. 

Style Tile and Responsive Design

After creating the logo and color concepts for ZEIT, I took it to the next step and created a style tile. This a simple way to illustrate the direction I was going to take to move forward in the UI design. I created responsive UIs by using what I created within the style tile. It further lets me examine the overall aesthetic feelings and visual balance of the website.

UI Kit

I took the Style tile a step further and developed the UI Kit to set consistency throughout the website, this set standards for the typography, call-to-action buttons, and anything that would be visually shown on the website.

Desktop Prototype

I developed a prototype in Figma, to Gain insights on the user’s pain points, frustrations, and positive moments using the ZEIT site. I created objectives because I wanted to evaluate the insights and take them into consideration on what improvements could be made.

Tasks to complete:

1. Pick out one activity or destination in the Top Moments section and save it for later. 
2. Locate a specific era.
3. Go into the saved trips and proceed to “purchase” the experience.

Testing

Usability Testing

Testing preparation:

To get accurate test results, I created a plan for usability testing. The plan outlined what next steps needed to be taken and how to execute them. View the test plan.

Conducting the testing:

I conducted all of the testing remotely. I set up a video call and we shared screens. I went over my script and explained the tasks I wanted them to complete. I made sure the participants were comfortable with talking throughout the test and making sure I wrote down everything they were saying so I could synthesize it later on. My main goal was to gain insights into the user’s pain points, frustrations, and positive moments using the ZEIT site. During the usability testing I learned user patterns, like some of the participants began with scanning the whole website, at the search bar, or just began by clicking around. I also got solutions for the next steps on how to improve the prototype. In addition to solutions, I was able to understand the confusion of the users in a way that I wouldn’t have been able to see on my own without these tests. 

Affinity map

After I had my results from the usability testing, I organized the information into an affinity map to clearly set apart the successes, frustrations, and patterns. This illustrated a clear path that I needed to take to evaluate the insights and take into consideration what improvements needed to be made and what could be made in the next step.

Learnings and next steps

Learnings:

The research phase uncovered a lot of assumptions that I had going into this project, it revealed just how different my vision was compared to what users and market research uncovered. 

Next steps:

Since I have built my entire prototype in Figma, I decided to be the best option for handoff in the next step by passing this on to developers. As a one-stop platform, it has a practical feature intended for developers. This also allows me to be more of an asset with any upcoming questions the team might have. 

All Projects Zeit Revive Salt Room and Sauna Apple Music One Paddle