Project Overview

Background: Imagine that time travel has not only become a reality, but is being democratized to allow anyone who wishes to participate. In this fictitious project I was charged with designing a responsive travel booking website for Zeit, a company that offers travel packages for time travel into the past. The company specified that the site needed to allow users to look through different trip categories and details, and filter based on their interests and other criteria. In addition to these functionalities, I was asked to create a modern yet classical brand for Zeit.

Project Type: Student project

My Role: End-to-end UX/UI designer

The Timeline: 2 months (February-April 2022)

Tools: Figma, Maze, Optimal Sort, Miro

Research

Since the challenge was to design a product for a market and user base that does not yet exist, figuring out how to best do research was a challenge. I decided that in order to determine how to design the Zeit site, I should focus on:

• understanding the current online travel agency market
• uncovering how potential users experience traditional travel booking websites
• determining how potential users feel about the prospect of time travel

Methods Used: Secondary research, competitive analysis, interviews and surveys

Secondary Research:

While researching the online travel booking market, I uncovered three important facts:

• Recent data shows that searching online has become more popular than consulting family or friends for travel inspiration.
• In the past few years there has been a massive shift in booking methods, mainly a shift away from using human travel agents and towards booking via online travel agencies.
• Reviews have been shown to make or break the success of an online travel-related transaction.

Insight: Online travel booking has largely replaced actual travel agents, yet reviews left by actual humans have been shown to make or break the success of a travel-related transaction.

Competitive Analysis:

I analyzed some popular travel websites with the goal of uncovering their strengths and weaknesses. These are two of the main insights from this analysis:

• The common weakness in most of these websites is that they tend to be very overwhelming, with lots of content being thrown at the user and very little whitespace.
• One of the common strengths I uncovered is the powerful filtering system that most travel booking sites employ, which allows the user to further specify what search results appear on the page.

Qualitative Research:

I then turned to the core of the research process: hearing from users in order to better understand their experiences with online travel booking.

User Interviews: I interviewed five people of varying genders, ages, family statuses and places of residence. The interview questions mainly focused on the user’s experiences booking trips using travel websites, but also touched on their thoughts and feelings about the potential for time travel.

User Surveys: In order to pair my deep-dive interviews with data that spans a larger group of people, I sent out a survey as well. The survey was filled out by 38 people, also representative of various demographics.

Research Insights

• Many users view reviews left by real people as one of the major benefits of online booking.
• Many users cited information overload or an excessive number of options as a negative aspect of the online booking experience.
• Participants’ main priorities when making travel plans are price and availability, good reviews/ratings, and potential activities at their destination.
• Many participants utilize the filter options when searching on travel websites.
• When asked, most users expressed concern about how to stay safe while time traveling.
• Participants’ main priority when booking a time travel experience would be the time period they would be visiting.

Persona and Empathy Mapping:

I then created a persona with characteristics gleaned from patterns I found in my research, and named her Julie. I mapped out some of the things that Julie thinks, feels, says, does, hears and sees in order to get a more well-rounded view of her needs and desires when it comes to travel. This persona then guided me throughout the design process, forcing me to always circle back and ask: “How does this feature or design decision help Julie?”

Defining the Solution

The next stage was making sense of the research and pinpointing the product’s goals and main features.

User Goals and Business Goals:

A successful product sits at the sweet spot where user goals, business goals and technical considerations overlap. I defined the various goals for each group in order to better understand what each one needs or wants from this product, and to uncover where they overlap. These goals- especially the common ones- guided me in ideating on the product itself.

Feature Roadmap:

Next, I wanted to better define what features my product should include and prioritize those based on my users’ needs. Time doesn’t come cheap, so I knew I would have to make some decisions about which features to build first, and which ones to leave for future ideations or product updates. I created this 🔗 feature roadmap to guide me.

Design Time!

Information Architecture:

Before even thinking about how a screen would look, I wanted to ensure that the structure and contents of the website would allow the user to accomplish their goals and fulfill their needs, so I got to work planning out the information architecture for Zeit. For example, my persona Julie cares a lot about safety and security, so I needed to make sure that she would have easy access to that information. I also needed to think about how to categorize all of trips on the website and allow users to find what they are looking for. Top help out with the second goal, I did a card sorting exercise.

Card Sorting:

I performed moderated and unmoderated card sorting activities on a total of eight participants. I discovered that participants categorized trips in a few main ways, but that there was no front-runner for the type of categorization and participants mostly used a combination of category types. I also learned that many people have trouble pinpointing when an event happened, and knowing what time period a certain year belongs to.

Sitemap:

Based on the insights I gleaned from the research phase and the card sorting activities I did, it was time to create a sitemap for Zeit. I worked on categorizing the site’s various pages in a way that would allow the user to access all of the necessary information or actions, prioritizing those that my user most needs.

Task and User Flows:

The next step was figuring out how the user could best move through the product. I defined the main tasks the user would need to perform on the site, and thought about how they might interact with the site in order to accomplish those goals.

• Based on my research findings, I pinpointed finding and booking a trip as the main task for my user, and then created a task flow showing the steps the user would take to do so.
• I then thought about the multitude of ways the user might accomplish the main task, since not all users arrive at a task on the “direct” path we plan for them. The most important ___ I discovered while plotting the user’s possible paths was that as on any e-commerce website, a Zeit user could potentially arrive at a given trip by searching or by browsing.

Wireframes:

Time to design those screens!

Product Requirements: Before even touching my sketchbook, I focused on the 🔗 product requirements for each and every page I planned to design. I asked myself “What does the user need on this page in order to accomplish their goal?”, and held myself accountable to ensuring that the wireframes I designed included all of those elements.

Low and Mid-fi Wireframes: I started by rapidly sketching out ideas for each page, and then looked over my work and, with feedback from others, decided which layouts and design patterns would best facilitate the user’s goals. I digitized the screens that I chose and annotated those with a basic explanation of the features and elements included.

UI Design:

With the mid-fi wireframes built and ready to go, I turned to the UI side of things.

Logo and Style Tile: I focused on creating a logo that would give the user a sense of what the product does, so I knew I wanted an element that connoted traveling to the past. I decided on a simple wordmark that combined the name of the product with a back arrow in dashes, reminiscent of the way a flight path is depicted in illustrations.

Next, I turned to other elements of the Zeit branding: color palette, typography and photo treatment. I tried to maintain a brand vibe that would be appealing to my persona.

UI Designs: I then used the UI decisions that I had made to create a set of mid-fi wireframes.

UI Kit: After creating the mid-fi wireframes, I took time to put together a UI kit that includes all of the guidelines and elements a designer would need to create an additional page or make changes to an existing page on the Zeit site.

Prototype

Next, I set up my prototype for the main task my user would need to accomplish. Since I created two paths- searching and browsing- to accomplish the main task, I made sure that my prototype gave the user the ability to use either method.

💻 Check out the prototype here

Usability Testing

Now it was time to test out Zeit in the field!

I chose to do a combination of moderated and unmoderated testing in order to both dig deep and uncover real pains and successes, as well as test my designs on a wider user base. I facilitated moderated testing for five participants, and designed two unmoderated tests that were completed by 17 users combined.

What I Learned:

The usability testing revealed that most of the users found it easy to navigate through the site and accomplish the various tasks asked of them (yay!).

Common pain points for users included the poor usability of the Browse page, the inability to book without creating an account, a lack of enough images on the individual trip page, and other specific information that was expected to be featured on the trip page.

I then mapped out my findings in categories: successes, pain points, recommendations and next steps. This allowed me to view the usability testing from a birds-eye view and see what the results told me about how the users interacted with the website.

Finally, I took the list of next steps that I culled from the usability testing and prioritized those changes based on how much value they add for the user and how much effort they require by me as the designer. Since my time was limited, this helped me prioritize the revisions I made and ensure that I was using that time wisely.

Iterating Based on Testing

Based on the priority matrix, I got to work on some revisions to my designs. I first focused on the revisions that bring the greatest value to the user and require the least effort from a design standpoint, and then moved on to the next most pressing changes. The revisions I made include redesigning the browse page, adding an option to book a trip without creating an account, adding more images to the individual trip page and more.

Looking Ahead and Looking Back

Next Steps

If time allowed, my next steps would be to build out a new prototype with the revised screens and test it on users again. I would continue with this cycle of iteration in order to constantly improve the product.

Reflection

This was my first UX project, so naturally it was challenging to carry out the entire design process for the first time. Two major challenges come to mind, though, when I reflect on this particular project.

• Creating a product for a brand new market is difficult. It made research challenging and caused me to second-guess myself a lot throughout the process. On the other hand, creating something new and innovative is exciting and inspiring!
• I learned that it is vitally important to keep the user at the center of the design process. Sometimes I found myself getting bogged down in features and details before I caught myself and asked: “How will this help Julie (my persona) reach her goals?”. This allowed me to re-center myself around the user’s needs.