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
Duration: Feb - May 2022
Tools: Figma, Maze, Whimsical, Milanote
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.
Zeit is missing out on e-commerce opportunities because the company lacks an online presence to drive bookings.
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.
How might we help the user make a well-informed decision to book a trip with Zeit?
My Design Process
Having no direct competition required studying two markets: new tech and travel.
The goal is to understand what travelers value when booking a trip so that we can create the ideal user experience.
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?
Initial Research Results
Understanding new tech & travel
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.
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
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.
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.
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.
Advocating for the traveler
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
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
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
The booking process is straightforward and adding "time travel" into the mix did not require a massive revamp.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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
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.
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.
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.