PROJECT BACKGROUND
Zeit is a company that operates under the Virgin brand owned by Richard Branson. The company offers time travel tourism experiences through the International Concordance on Time Travel. Currently, there are 289 approved destinations worldwide, spanning from prehistoric times to the present day
The main challenge for this project is the fact that time travel is a new concept, with many uncertainties in the eyes of both current and potential customers. Developing an innovative product that has never existed before and gaining the trust of people can be quite challenging, making this project seem larger than it is. However, setting a clear objective and focusing on thorough research can help overcome these challenges.
Objective
Zeit hired me to create a responsive e-commerce website that focuses on modern and historical branding, a delightful visual presence, and a quality user experience based on concrete data analysis.
ROLE
User Research, UX/UI Design, Branding, Prototyping, Usability Testing
PROJECT DURATION
6 weeks
TOOLS
Figma, OptimalSort
I. Research
Goals
The aim is to conduct market research, analyze successful competitors, and understand customer behavior when planning and booking trips online.
PROCESS OVERVIEW
• Market Research
• Competitive Analysis
• Provisional Personas
• Interviews
Market Research
I began my project by conducting market research to uncover trends, demographics, and insights about the travel and booking industry as well as potential customers.
Competitive Analysis
I conducted a competitive analysis to identify gaps, strengths, weaknesses, and opportunities for Zeit.
provisional personas
I created provisional personas to make assumptions about potential customers.
Interviews
Number of Participants: 4
Ages: 28 - 56 years old
Average Travel Spending Per Year: $5500
Summary
• They spend a considerable amount of time researching and planning to ensure that they get the best travel deals
• Prefer to receive excellent customer service rather than choosing the cheapest option
• Simple and convenient booking experience
• The resolution process should be smooth and hassle-free when encountering issues
• Safety, transportation options, accommodation, and weather are important factors when choosing a travel destination.
• Access all travel details in one place
II. Define
GOAL
Synthesize research to identify core problems.
PROCESS OVERVIEW
• Empathy Map
• Persona
EMPATHY MAP
I created an empathy map based on feedback from my 1:1 interviews. I analyzed the data to identify insights and needs to gain a better understanding of the user's experience, thoughts, and behaviors.
INSIGHTS
• Users conduct research through various platforms in order to compare prices.
• Users are looking for a fast and efficient method to book their trips at an affordable price.
• Users need an easy way to discover local activities and dining options.
• Users want to save time and effort by comparing all travel logistics in one place with a simple overview
• Users want to save time researching and planning
• Users want a platform where they can access all their travel deals and itineraries in one place.
• Users seek trust with companies, knowing they are getting the best value for their money.
• Users prefer reliable websites and apps with simple booking and great service.
NEEDS
• Best prices for flights and accommodations
• Ability to get to the destination without any reservation issues
• Book travel with easy and no hidden fees
• Accuracy with representation of services
• Excellent customer service
• Smooth process when it comes to discrepancies
• Good value for flights and accommodations
PERSONA
I created Jeff, a persona based on insights gathered from my empathy map and interviews. Jeff will help guide my design decisions throughout my design process.
III. Ideate
GOALS
Organize the website's information architecture and map ideal user journeys to create an easy booking process.
PROCESS OVERVIEW
• Card Sorting
• Sitemap
• Task Flow
• User Flow
Card Sorting
I conducted a card sorting study to assess the information architecture of the Zeit time travel tourism website by analyzing how users categorize content naturally, identifying patterns and potential opportunities.
Sitemap
Participants grouped items by time period, location, culture, or activity. I used the results to create a well-structured sitemap for easy navigation.
TASK FLOW
I have created a simple task flow to help me understand how users interact with the website to book a trip.
USER FLOW
I created a user flow chart based on assumptions of their buying process. This helped me understand the decision points for booking a trip.
IV. Design
GOALS
Design a user interface that is both intuitive and visually appealing and branding that helps create trust.
PROCESS OVERVIEW
• Sketches
• Wireframes
• Brand Style Guide
SKETCHES
Based on my research and insights, I started the design phase by sketching low-fidelity wireframes of the landing page layout.
MID-FIDELITY WIREFRAMES
I used Figma to create wireframes for a landing page, category page, destination page, and confirmation page.
RESPONSIVE WIREFRAMES
I created responsive wireframes of the landing page to ensure consistency across all devices.
BRAND STYLE GUIDE
I created Zeit's brand identity using the brand keywords listed below. The logo design, color palette, typography, and UI design were inspired by a mood board I made on Pinterest.
V. Prototype
GOALS
Design a responsive website with a modern and historical look and feel that engages the users with an interactive user experience.
PROCESS OVERVIEW
• High-fidelity wireframes
• Prototype
HIGH-FIDELITY WIREFRAMES
I created high-fidelity wireframes of the landing page, category page, about page, destination page, and confirmation page after incorporating brand styles, UI elements, and visuals.
PROTOTYPE
I converted my high-fidelity wireframes into a functional prototype to create an interactive experience of the Zeit website with limited functionality.
Test the prototype:
• View the "about" page
• Toggle between the different categories to explore time travel experiences
• Book a trip to Paris, France by selecting the option under the "popular destination" section
• View the "prehistory" details page
VI. Test
GOALS
Assess the overall usability and identify any pain points or areas of confusion when completing tasks.
PROCESS OVERVIEW
• Usability Test
• Affinity Map
• Revisions
USABILITY TESTING
I had five participants test the Zeit high-fidelity prototype to evaluate usability, navigation, flow, information architecture, and design. I observed and analyzed their interactions via video call, recording, and note-taking.
TEST OBJECTIVES
• Test the quality and ease of use while navigating through the design.
• Test the user on how they prefer to search for travel in order to achieve their goal.
• Test if the design provides enough information and trust for users to confidently book their experience without any problems.
• Test if the user can find and book a specific time travel experience with ease.
USER TASKS
• Assuming the user is interested in the Prehistoric era, how would the user browse and filter through the details page?
• While browsing the prehistoric era details page, how can the user explore options related to Europe?
• Suppose the user wants to book a trip to experience Paris, France under the category of top-rated experiences. How can the user proceed?
AFFINITY MAP
I created an affinity map based on the usability test to assess the user's thoughts and behaviors. I organized my insights into positives and areas for improvement to help me determine potential solutions and next steps.
REVISIONS
After receiving feedback, I made high-priority adjustments and implemented the changes to the high-fidelity wireframes. I focused on refining UI elements for consistency and improved the overall interaction experience.
Conclusion
REFLECTION
The main objectives of this project are to create a contemporary and new brand, establish an e-commerce website that is user-friendly, allow customers to explore all the different trip categories and details, and build customer confidence. Through my research, I have achieved these objectives and determined the most effective way to structure the design and architecture for this innovative new company
This is my first project in UX/UI design, and I thoroughly enjoyed the design process. It was fascinating to understand the users' behaviors and patterns and how they approach the design differently when going through the prototype. Through this project, I learned the fundamentals of UX/UI design and encountered various challenges that helped me learn and grow. I am excited to improve my research techniques to gain more insights and refine my UI skills to create beautiful and user-friendly designs.
NEXT STEPS
• Conduct additional usability tests to identify further enhancements.
• Add additional features from the roadmap and conduct usability tests.
• Refine UI design and provide the finalized designs to the development team for further implementation.
