Zeit Travel Site
UX/UI Design, Responsive Website, Concept
Project Timeline
8 weeks (Jan 2022 – Mar 2022)
UX/UI Designer
UX Researcher
Branding/Creative
My Roles
OptimalWorkshop
Miro
Adobe Illustrator
Figma
Maze
Tools
ZEIT is a travel company that is offering time travel tourism to the public with selected 289 destinations around the world. After years of discussions, time travel service has been approved for people. ZEIT wants to have a modern and historical logo as well as clean, organized, and user-friendly e-commerce website. Also, ZEIT expects that users can find affordable destinations for their next trips and book a selected trip and purchase it in easy and quick ways.
Context
Since ZEIT introduces a new travel technology to people, the company wants to show them a new brand look and provide them seamless browsing and travel booking experience that can increase selling point and ease any hesitations made possible with time travel.
Problem
Opportunities
Research
In the research phase, I conducted competitive research, surveys, and user interviews. I expected to learn what potential users think about time travel, what their needs and concerns were from the new travel experience, and their preferences when they use travel booking platforms so that I could find efficient ways to engage people to try ZEIT’s travel booking service and offer them new experiences.
Methodologies & Research Goals
- Determine who the potential target user is
- Understand people’s motivations and expectations for a new trip
- Understand people’s preferences and pain points of booking a trip
- Understand how comfortable people are with a new travel experience
- Learn how people process booking for travel online
Objectives
- People who travel frequently and use online travel booking platforms
- People who are willing to travel to new experiences
- People who do not have much experience in online travel booking
- People who like adventures and seek unique sights
- People who look for cultural and historical experiences
Participants
Researching 4 different competitors in the travel industry gave me each competitor’s strengths and weaknesses. Through this process, it helped me to understand that the competitors had similar design layouts with clean aesthetics, and also I learned what common features should be in a travel website. This also helped me to prepare surveys and interview questions we should ask potential users.
Competitive Analysis
Surveys showed me 30 participants’ travel and travel booking experiences and their browsing patterns when they plan and book their trip via travel booking platforms. I discovered the differences in the purpose of trips and planning based on personal status (age, employment, and marital) as well as preferences of travel platforms and main devices they use. Survey results helped me to build questions for user interviews.
Surveys
- Over 60% of participants travel 2-3 times a given year.
- 75% of participants travel for leisure.
- All participants use online travel booking websites.
- 93% of participants use laptops when they research and book trips.
- The majority of participants use Expedia, Airbnb, and Kayak.
- 49% of people are open to unique experiences and adventures when traveling.
- Over 50% of people are open to time travel.
- People have a variety of interests such as arts & architecture, meeting historical figures,
concerts, dinosaurs, fashion styles, or different tour concepts (social or scientific categories).
Findings
I conducted user interviews with 5 participants who have enough experience with travel booking platforms. Interviews helped me understand each participant’s pain points and goals when they use the platforms, and which device they use mainly for searching and booking trips. Findings from the interviews led me to generalize a persona.
User Interviews
Interview Findings
Define
After collecting data and understanding multiple users’ needs and frustrations, I created a user persona and empathy map. These made me understand what should I focus on to minimize creating pain points or frustrations on ZEIT’s website. It also helped me finalize the main features and goals for the website.
User Persona & Empathy Map
9 participants joined card sorting to categorize 20 travel ideas. I found that overall participants had similar categories such as architecture, historical events, and art/music history. One interesting part of this exercise was that only 1 participant sorted all the travel ideas by time. It gave me the idea of how to build a sitemap based on the sorting results.
Card Sorting
I created a sitemap to present the overall structure of the website with navigation, contents, and features. I was able to see the structure and get a clear image of how the website would look in the design phase.
Sitemap
Task flow is a method to understand and visualize the most necessary actions that would need to be performed by a user to search, get search results, check related contents, sharing, and add to my list. It gave me an idea of creating a user flow to provide a little bit more complex interactions which could be possible in using the website.
After the task flow, I created a user flow to show how a user acts at each decision point.I learned what I need to create to provide enough information to the user in order to make them understand ID’s services.
Task Flow & User Flow
Ideate
I sketched 4 wireframes to show a few design ideas of the ZEIT’s website with the required site elements. I was able to know which layout would work well for good usability before I start to create low-fidelity wireframes in Figma.
Pen & Paper Wireframes
It is page layouts in greyscale that would be required for building high-fidelity wireframes. It helped me understand overall layouts of the ID’s responsive website before seeing the high-fidelity design and organized information hierarchy via visual.
Low-Fidelity Wireframes
For establishing ZEIT’s new brand identity, I gathered visual ideas and created a mood board. It was a good way to find how I want to show and design the website, it gave me a defined idea of brand identity and UI kit. Since I wanted to put modern, clean, minimal, and inspirational looks and feels to the ZEIT’s brand identity which targets young and adventurous users, I took inspiration from minimal and universe-look design pieces.
Brand Identity & UI Kit
High-fidelity wireframes of the ZEIT’s website is including brand identity, color palette, images, and copies. Creating this wireframes made me feel what the actual product would look like and I was also able to understand if these layouts and the sitemap were coherent.
High-Fidelity Wireframes
Prototype
I created a prototype with the high-fidelity wireframes. It showed all the possibilities that a potential user can make.
High-Fidelity Prototype
Usability Testing
I conducted user testing of the ZEIT’s desktop website via Maze to understand potential users’ performances in the high-fidelity mockups with 2 tasks I gave. This testing gave me a chance to see what the users thought of my output, how they complete the tasks, and why some of the users incomplete the tasks. I was also able to analyze what worked well and what I missed. This helped me to iterate the mockups based on the findings.
User Testing via Maze
After the user testing, I created an affinity map based on the testing results and users’ comments. It showed me which part of the mockups worked well and which part made the user got confused. It also gave me a direction to improve design for better usability.
Affinity Map
Iterate
Based on the suggestions from the users, I edited the homepage, calendar section, and top user icon to avoid the pain points and get better usability. Like what they mentioned, I also noticed that there were some frustrations with the prototype and I agreed with them.
Improvements
Reflection
From researching to creating the final mockups, I was able to learn that establishing goals to meet the needs for both the business and users to build an intuitive and usable product. Each step allowed me to understand and analyze what ZEIT should be needed for the website to present an efficient and satisfying service for potential users.
What I learned…
Next Steps
- Add a predictive search feature to minimize user search error rate, increase the speed of search, and show suggestions if a user doesn’t know what to search for.
- Further testing and iteration: I would like to experiment with personalized recommendations based on browsing behavior, to elevate more relevant trips and content to individual users in an effort to increase conversion rate.