Zeit Travel
Reimagining a new travel booking experience
UX/UI Project
I was tasked with designing a responsive e-commerce website for Zeit that will allow customers to browse through different trip categories and book their desired travel packages with ease. In addition, I updated Zeit’s online branding, which includes a new unique logo for the company.
Details
Role: UX/UI Designer, UX Researcher, Branding Design
Client: DesignLab
Duration: Feb 2022 - May 2022
Tools: Figma, Whimsical, Milanote, Optimal Sort
Project Overview
The Problem
Zeit is missing out on e-commerce opportunities because the company lacks an online presence to drive bookings.
Zeit is a time travel tourism company that allows travelers to experience a new kind of exploration through time and space.
The Solution
Zeit needs a responsive website that increases engagement and provides trust and credibility to the service. In addition, the company needs a clear brand identity with a new logo that is representative of the business to stand out in the current market.
Desktop Prototype
Research
Getting started through research methods
Comparative Analysis
Since Zeit is the first travel company of its kind, it has no direct competitors. Much of the secondary research was done by taking a look at the websites of technologically innovative companies and other travel booking sites. Taking these two types of companies under analysis gives context to a company like Zeit that provides high-tech space travel in a tourism bundle. This was my first method of research.
-
Both types of websites are heavy on visuals in their UI.
-
Most travel companies like Expedia and TripAdvisor have clear and consistent browsing and booking process.
-
Space tech companies like SpaceX and Tesla provide users with plenty of factual information. It's important for new technology to show trust and credibility towards their customers.
Provisional Personas
Based on my initial research above, I came up with a few provisional personas with stereotypical travel personalities. This helped give me an idea of what kind of user, I may be designing for.
Having no direct competition required studying two markets: new tech and travel.
Research Interview Affinity Map: Part 1
Interviews
I interviewed 4 participants via zoom, phone and written survey, all between the ages of 24-29 years old with the goal of understanding the following:
-
The factors that influence a user to book a new trip
-
The process of how the user books a new travel destination
-
Concerns for such a large adventure as time travel, the ability to do safely, and have an ultimate life-changing experience.
Here is what I found:
-
Friend circles and social media have a big influence on one's travel choices
-
They primarily start travel search on Google to find the best deals
-
They want to spend less time booking
-
They expressed concern for safety when it comes to unfamiliar adventures
-
If given the opportunity to time travel, they have no immediate thought as to when in time to travel
Define
Persona Development & Finding our goals
Users want travel booking to be easy, intuitive, informative, and less time-consuming.
Developing Our Persona
Based on the interviews, I developed an adventurous and tech-savvy persona, explaining their habits, needs, and motivations when it comes to booking a trip online.
Business Goals
-
A responsive e-commerce website that is easy to use
-
A strong brand with a distinct logo
-
Organized filtering based on interest
-
Focus on showcasing the destination
-
Shows all products with correct categorization and grouping
.
User Goals
-
Safety and expertise info provided
-
Financial flexibility with affordable deals
-
Easy checkout process
-
Quick browsing for good deals
-
The ability to customize one's own travel package based on interests, time duration, activities, and budget
Technical Considerations
-
Allows for accessibility and ease of use for all kinds of users
-
Includes appropriate and high-quality imagery, video, and other media
-
Includes digestible information so as to not overload the page
-
Makes sure information is secure
After putting into consideration these three factors, I understand that I must create a website that has an easy-to-navigate UI for all kinds of users, has a clear and intuitive booking process, and includes important information about the travel service.
Identifying project goals
Features road map
Information Architecture & Interaction Design
The booking process is straightforward and adding "time travel" into the mix did not require a massive revamp.
Card Sorting
A card sorting activity helped me understand how a user can organize and categorize certain travel destinations and activities, most importantly, in the context of time. This information is vital in the ease of use for the user when it comes to browsing the various destinations on the website.
The similarity matrix above gives context on which items are typically matched together. The majority of the participants sorted by continent/part of the world and a few sorting by the purpose of travel.
This was an interesting exercise to see how people categorize something out of the ordinary.
The time period addition did very little to influence the organization but overall, the categories were quite normal for typical travel websites.
Card sorting results
Sitemap
I wanted to get a better understanding of the general information stored in a typical travel website. I referred to Expedia and TripAdvisor to map out the information.
Homepage Sketches
I used my iPad to sketch a few home pages and in the end, had two versions. I referenced competitor pages, my user research, and a sitemap to determine the order of each block of information. In this sheet, I explored three variations of the hero section. I played with features by adding and removing with each version.
Task Flow
I wanted to focus on clarifying the task of the user going through the booking process. I used my own experience in booking flights to map out the flow.
User Flow
When mapping out my user flow, I looked at the moment the user is on the home page. In this scenario, the user may need to browse the page before deciding to book and also sign up if they do not have an account. The last step is to finally book.
Finding the right design patterns
I went ahead and looked at other travel sites to see what design patterns worked and how they are useful. Specifically, I focused on search, navigation, reviews, and cards. TripAdvisor made the most influence when it came to finding design patterns for search and cards.
Responsive Wireframes
After taking a closer look at other travel website design patterns and seeing what I feel best suited the solution, I was able to design basic wireframes.
Design
Designing the UI
Reimagining Zeit in a playful way
Style Tile
I found images, colors graphic styles, typography, and textures I wanted to represent in Zeit. I wanted to blend natural history with modern art from neutral colors to bold typography. The colors came directly from the images. Taking the concept and colors from my mood board, I created a style tile representing a travel company that allows customers to explore both the present and the past using modern technology. The overall concept is clean and sophisticated with both rich and soft tones.
UI Kit
From my style tile, I transferred my visual ideas to UI elements.
Responsive UI
Putting the UI and wireframes together, I designed a simple flow from the home page to booking within 3 screens.
Test & Iterate
Based on usability testing from 5 individuals via zoom, I continued to iterate my design.
Although I achieved a 100% success rate in functionality, the website still lacked important information.
Some user suggestions were considered when making changes to the new version of the screens.
-
Improve header and main section copy to grab the attention of the user
-
Include more travel imagery to the destination page to grab the attention of the user and for the customer to feel more informed
-
Simplify the About Section of the company so information is more digestible and less wordy
In the end, I was able to create an easy and successful path to book. The feedback about the lack of visuals was important to me because I did not provide the customer with enough information to make confident decisions. In this case of a tourist destination, what the customer sees influences their travel choices.
Conclusion & Thoughts
Lessons learned
What I would do differently next time?
This being my first UX Project, I am very proud of the output at the end and even more grateful looking back at the entire UX process. On that note, a few things I’ve learned:
-
Continue to text and iterate as much as I can: With each colleague and user test, I discovered new things to apply, change and think about. Although I may not apply every change, each thought and opinion is valuable and each person is a potential user and/or customer.
-
Focus on the Insights: Throughout the UX process, I realized that it is very important to let research insights drive my work and process. Instead of asking myself, "What's the next step in my process?", I should be asking myself, "Why and how is this information important to the bigger picture?" In this way each deliverable is put together with intention each step of the way.
-
Step outside of the box while utilizing what already exists: As the saying goes, "no need to reinvent the wheel." There is a reason why certain websites function well and are successful. Users like familiarity but they also find pleasure in a new visual aesthetic. I think it's important to find the balance between familiarity and innovation for this particular project.