Background
This is a project for UX Academy. Zeit is a company that offers time travel technology and a new travel option to the market. They are seeking to promote their brand and accept customer bookings.
The website was created to address the common issues we discovered during our research. The cancellation policy is clearly stated during the check-out process. As well as no additional costs added during the check-out process. We offer an additional service of sending an email one week before the free cancellation due date. The website's design aims to avoid potential problems, which will ultimately reduce customer support costs and, most importantly, prevent negative experiences with Zeit.
Problems
For Zeit
-
A platform to promote time travel and tell people what it is.
-
A platform to accept bookings.
-
Branding for the tourist market.
For Travelers
-
Unfriendly cancellation policy is everywhere.
Cancellation and rescheduling cost people too much.
(100% of interview participants mentioned it.) -
No more tricky pricing, please. No additional cost at checkout.
(67% of interview participants mentioned it) -
Un-sufficient information about a destination.
(67% of interview participants mentioned it)
Solution
-
A responsive website for branding and eCommerce.
-
Sufficient information about destinations.
-
No hiding pricing. No additional charge at check-out.
-
Easy cancellation and rescheduling.
-
Send a reminder email before the free cancellation is due.
Project Overview
01
Research
1.1 Market Research
1.2 Competitor Research
1.3. Interview
1.4. Empathy Map
During the research, we found 80% of travellers book holidays online, which matches our interview results. Therefore, "an eCommerce website is needed" hypothesis is proved as a solution. We also uncovered the very common pains people face during holiday booking, which provides us with a vision of must-solve problems.
Goal
-
Learn about the facts of the current tourist market.
-
Discover how people decide and book their holidays.
-
Explore the common pains related to holiday planning.
1.1 Know the market: Market Research
1.2 Competitor Research
To stand out int, we researched well-known global platforms by exploring their websites. a crowded marke
1.3 Know the traveller: Interview
3
Participants
-
Filter:
Who used to book a trip in the last 12 months. -
Semi-structured
-
In-Person x 1 (Turkey)
-
Remote x 2 (Taiwan)
About destinations (where to go)
100%
cares about good "reviews" from others.
100%
get inspired by media and social media.
66%
said destinations are limited to holiday length.
About booking a holiday (how to decide, how to book..)
100%
book from the internet.
100%
used to suffer from tricky pricing.
100%
need destination-related information.
1.4 Traveller patterns: Empathy Map
Goals
-
Enjoy the holiday.
-
Stay on a travel plan.
-
Find what to do around destinations.
Pains
-
Unfriendly rescheduling and cancelling policy.
-
Tricky Prices.
-
Destinations are limited to holiday length.
02
Information
Architecture
2.1 Persona
2.2 How might we
2.3 Feature Roadmap
2.4 Site Map
According to research, it is necessary to design a responsive website. To ensure that the design is effective in solving problems, we have identified features that can help Mia complete her holiday booking task. To remain competitive in the industry, we have compared our website's features with those of our main competitors.
Goal
-
Know whom we design for Persona.
-
Features that can solve the persona's problem.
-
Know how our competitors are solving similar problems.
-
A clear site map.
2.1 Whom we design for: Persona
Mia
Mother
"Mia wants to pick a great holiday destination because she loves travelling with her family.
2.2 Explore user-centered solution: HMW?
How might we
Encourage Mia to book her holiday without worrying about cancellation and rescheduling.
How might we
Let Mia feel confident of our price.
-
Provide clear dates and policy.
-
Remind Mia before the free cancellation or rescheduling date.
-
Show the "Total" amount according to the search headcount.
-
Show price briefing.
-
No extra charge during the check-out process.
2.3 Feature Roadmap & Competitive Cross-check
I eliminated the four quadrants analysis (easy wins / expensive-high value / low cost-low value / expensive-low value) due to unknown development costs. Instead, I compared the competitors' features with Zeit's in a spreadsheet. There are three must-have features according to our research:
2.4 Site Map
03
Interaction
Design
3.1 Task Flow & User Flow
3.2 Product Requirement
3.3 Responsive Wireframe
We had the building structures such as features and site map in place just like building a house, and we also had a clear idea of the persona of the people who would live in the house in the future. In today's world, travellers are spending more time online than ever before, with 90% of them conducting holiday research online. Out of these travellers, 70% prefer to use their smartphones to conduct the research. Therefore, it's crucial to have a responsive website that is optimized for both desktops and smartphones, with all the information synchronized.
Goal
-
Define how Mia completes the task of searching and booking a trip.
-
Build product requirements.
-
Initiate wireframes.
3.1 User Flow
Task Flow
User Flow
3.2 Product Requirements
PRD was set out to guide the later design. The page to Design:
-
Home (Landing Page)
-
Search result
-
Destinations
-
Individual destinations
-
About Zeit, Time Travel
-
Where we are
-
Profile
-
Sign up / Log in
High-Level Requirement
-
Common and friendly language
-
Easy navigation
-
Easy to search
-
Efficient checkout
-
Customers are in control
3.3 Wireframes
-
Responsive for Desktops, Tablets and Smartphones.
-
According to research, the majority of participants book their holiday on bigger screens. I use a desktop version wireframe to show the development process below.
For desktop
04
User
Interface
Design
4.1 Logo
4.2 Style tile
4.3 Hi-fidelity Prototype
Up until now, the structure and flow of the website had been clearly defined, and various wireframes were created. Before moving onto a high-fidelity prototype, the Style Tile was established. During the design process, the Style Tile was expanded into a UI Kit, with adjustments made if necessary. At the end of this stage, a high-fidelity prototype was prepared for usability testing.
Goal
-
Style tile for design.
-
High-fidelity prototype.
-
Responsive design is considered.
4.1 Logo
A responsive logo was designed for different screen sizes and spaces.
4.2 Style tile & UI Kit
I designed a style tile first and expanded it into a UI Kit during the design process with adjustments. Different from style tile, the UI Kit includes guiding details to prevent miscommunication and error. The details such as line spacing, corner radius of buttons, and colour numbers as well.
4.3 High-fidelity Prototype
The prototypes have been prepared for a usability test on both the desktop and smartphone versions.
05
Test
and
Iteration
5.1 Usability Test
5.2 Design Improvement
5.3 Final UI Design
5.4 Self-reflection
The usability test was done with a 100% success ratio with a few improvement insights. I emphasized time travel in welcoming at Hero section. A service feature to send customers a reminder email one week before their reservation can be cancelled for free. This will help avoid non-cancellable frustration for customers and reduce the workload of customer service. Since solving a problem always costs much more than preventing it from happening.
Goal
-
Discover flaws in web design.
-
Improve the web design according to discovery.
-
Future plan.
5.1 Usability Test & Affinity Map
To learn whether the website is
-
Having sensible images and a common language.
-
Easy to navigate around.
-
Flawless on user flow.
5.2 Design Improvement
01. Emphasized the product "Time Travel"
by changing the welcome message in the Hero section.
02. Improved navigation
by adjusting the sitemap
1. Renamed location to "Where we are" and relocated under "About us".
2. Added language abbreviation for language choice.
03. Increased space efficiency
by relocating the top nav bar and aline with other elements.
Before
After
5.4 Self-Reflection
Although this project was assigned by the school with a limited design scope, it requires continuous iteration to maintain its quality, just like most design projects. Throughout this project, I have enjoyed solving Mia's problems by providing comparable search results and clear price information. Additionally, I have listed some ideas for future improvements.
-
Schedule a regular usability test to observe how users encounter our website.
-
Discover new challenges by talking to Zeit's customer service team regularly.
-
Consider reaching out to extreme users, such as travel agencies, to gain inspiration for potential new features.
-
Ensure that the information is consistent across all responsive designs. It is important to synchronize the information to avoid confusion. (Our research shows that only 23% of people are confident in finding the same information on smartphones as they are on desktops.)
Thank you for staying until the last. This is my first web design, I wish you find it interesting.
Reach me out for a project, if my thinking and processing interest you. :)
Explore other case studies
