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.
Role: UX/UI Designer, UX Researcher, Branding
Client: DesignLab
Duration: Feb - May 2022
Tools: Figma, Maze, Whimsical, Milanote
Responsive Web Design
Zeit Travel
Context
Zeit is a time travel tourism company that allows travelers to experience a new kind of exploration through time and space. Zeit's booking process starts with the traveler choosing a destination on the e-commerce website you’re going to design. During the checkout process, the person will decide when in the present time they want to book, and for how long they want to travel. Once they made their decision, they will have to physically travel to the Virgin Zeit headquarters in Germany, where they will be sent through the time travel process to the time and space they have purchased online.
Problem
Zeit is missing out on e-commerce opportunities because the company lacks an online presence to drive bookings.
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.
Question
How might we help the user make a well-informed decision to book a trip with Zeit?
My Design Process
Research
Having no direct competition required studying two markets: new tech and travel.
Goal
The goal is to understand what travelers value when booking a trip so that we can create the ideal user experience.
Questions
-
What role does travel play in people’s lives?
-
When and how do people use travel booking sites?
-
What motivates the user to book a trip?
-
What factors influence the user to book a travel destination?
-
What are some issues the user may run into when traveling?
-
Where do users typically book their travel plans?
Methods
-
Competitive Analysis
-
Provisional Personas
-
User Interview
Initial Research Results
Understanding new tech & travel
Competitive 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.
User Interview Results
What I learned from potential travelers
I interviewed 4 participants via zoom, phone, and written survey, all between the ages of 24-29 years old.
Recognizable Patterns
-
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 allowed to time travel, they have no immediate thought as to when in time to travel
What now?
Using my secondary research, competitive analysis, provisional personas, and user survey results, I was able to understand this company in the context of new technology and travel. I also understand the factors that influence a user to book a new trip, the process of how the user books a new travel destination, and the concerns for such a large adventure as time travel, the ability to do it safely, and have an ultimate life-changing experience. I have concluded that it is important to position Zeit in a way that the users can make a well-informed decision when making a travel booking.
Define
Users want travel booking to be easy, intuitive, informative, and less time-consuming.
Crafting a 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.
.png)
Product Roadmap
Taking into consideration user survey responses and the persona development of James, I organized a tier list of features to include when I start wireframing the application.
Project Goals
Advocating for the traveler
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
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
Technology Goals
-
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
Interaction Design
The booking process is straightforward and adding "time travel" into the mix did not require a massive revamp.
Card Sorting
With card sorting, I understood 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 were sorted by continent/part of the world and a few sorting by the purpose of travel.
The time period addition did very little to influence the organization but overall, the categories were quite normal for typical travel websites.
Sitemap
I wanted to get a better understanding of the general information stored on 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 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.
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.
UI Design
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.
Testing & Iteration
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.
Pain Points
Here are possible pain points I had to consider:
-
More imagery is needed throughout
-
More information needs to be presented for the user to feel confident about the company
-
Copy needs to be more appealing
-
Search bar needs to be more apparent
Success
The users had a lot of positive feedback:
-
Branding is eye-catching and visually pleasing
-
Flow is intuitive and easy to comprehend
-
Booking experience is common
-
Each page has a lot of useful information for the user
Changes
Some user suggestions were considered when making changes to the new version:
-
Improve header and main section copy to grab the attention of the user
-
Include more travel imagery on 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
Testing Takeaway
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
Overall, I feel accomplished in tackling a challenging brief like Zeit as it pushed me to think in a different way since this is a fictional company that offers a very unique service.
Measuring Success
As I take a look back at my project goals, my hope for this responsive web design is to ultimately drive business to Zeit by accomplishing the following:
-
Increase of online presence
-
Increase in online travel booking
-
Increase in trust and credibility
What would I 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 test 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 a balance between familiarity and innovation for this particular project.
My Design Process
End-to-End Mobile Application
Together
An app that aims to improve teen mental health, all in one platform.
Website Redesign
Mainstreet Art Center
A modernized look to improve the online class registration experience.
Adding a Feature
Spotify Mixtapes
A new a feature that brings out the nostalgia of the past
Responsive Web Design
Zeit Travel
Booking a new kind of travel experience