Online “Time Travel” Website for Ziet
Project Duration:
Client:
Tools:
Platform:
Role:
Overview
Ziet is a fictional online travel company based on the concept of time travel. A user will decide when in the present time they want to book, and for how long they want to travel. Once they make their decision, they will have to physically travel to the Virgin Ziet headquarters in Germany where they will be sent through the time travel process to the time and space they have purchased online. When they are in their destination, they will be staying in those resorts maintained by delegates of Zeit who work undercover in that time and space destination.
PROBLEM
Ziet would like to design their new brand and set up an e-commerce responsive website so they can sell travel packages and tickets to different times.
APPROACH & DELIVERABLES
To design a reponsive online travel website to potray Ziets services and travel packages. Logo and Brand design.
Process
The process for this project includes the following:
User Interviews and findings
Competitive Analysis
Use Cases
High Level Design Goals
User Persona
Site Map
Task Flow
Lo-Fi Wireframes
UI Kit
Usability Test
Affinity Map
Iterations
Final Screens
Research
USER INTERVIEWS AND FINDINGS
I interviewed 4 participants that book their online travel at least once per year. My goal in these interviews was to understand their online travel booking patterns and access desire to time travel, as well as safety/concerns a user may have. My focus was to identify what the key aspects are that would make booking online travel an easy, insightful and enjoyable experience.
.png)
Interview Guide
Motivation
- Easy to use booking website that allows them to book everything in one checkout process.
- To experience history firsthand. To try the food, meet the people, experience landmarks in their prime.
- To feel safe, secure and familiar when traveling to a destination/time period.
- To have options and flexibility when booking.
Pain Points
- Not feeling secure and safe when traveling back in time.
- Frustrations with competiting online travel booking websites.
- Not having additional information surrounding things to do within proximity to the travel destination.
Primary Goals
- To book there travel itinerary simultaneously.
- To travel back in time.
- Easy to use.
- Feel safe when traveling.
- Share destinations with friends.
- Book multiple events/time periods in one trip.
Competitive Analysis
To research current online travel websites and construct personal personas based on user interviews. With this Competitive analysis, we can see what the current competition is doing right and what the existing travel website lacks by accessing their strengths and weaknesses. To create use cases personas to identify all possible use cases.
.png)
Summary of COMPETITIVE ANALYSIS:
There are many online travel websites, but few offer the flexibility of creating your itinerary while booking everything under one platform. Secondly, no services offer participants to travel back in the past.
Summary of research findings:
My competitive analysis and user interviews showed a skew within the online travel market. For example, participants who book their flights and hotels typically prefer to stay at resorts. In comparison, participants traveling outside a resort choose Airbnb because of its easy-to-use interface and highlighting features such as the checkout phase with no hidden fees messaging feature to be in direct contact with the property owner. In addition, many transportation pain points will be eliminated with this project, as all flights with Ziet will be under the same airline.
Synthesize
USE CASES
.png){kind=icon}
“I need to book a graduation trip gift for my daughter.”
.png){kind=icon}
“I want to plan a team-building trip for my employees.”
.png){kind=icon}
“I always wanted to travel back to the Renaissance.”
HIGH LEVEL DESIGN GOALS
Needs
- User registration, sign in and account page.
- Search bar.
- Filters for search results.
- Destination listing page.
- Safety Guarantee.
- Checkout process.
- Fluid travel packages and experiences.
Motivations
- Users can access and manage all relevant and specific data for a previous or current trip.
- Input there desired destination
- Narrow down search results.
- Users want a excess of information regarding there prospective trip.
- Users want to feel safe and assured when traveling.
USER PERSONA
Based on my user interviews and competitive analysis, I established a user persona to help me centralize and systemize my research findings. In addition, this user persona will help me stay aligned with my user needs, concerns, and pain points.
Ideation
SITEMAP
I conducted a card sorting test with 6 participants. This test helped me evaluate and organize the hierarchy and groupings users expect in an online travel website. Based on these findings, I established a sitemap to serve as an architectural base for my design.
.png)
USER TASK FLOWCHART
I started using a brief scenario that illustrates the steps a user will take when searching, browsing and checking out a particular travel destination.
.png)
LOFI WIREFRAMES
I started using a brief scenario that illustrates the steps a user will take when searching, browsing and checking out a particular travel destination.
.png)
.png)
UI DESIGN
REFLECTING COMPANY VISION TO DESIGN
Ziet's design's goal was to create a sense of travel and nostalgia. The design challenge was creating a logo and brand that reflects the juxtaposition of history with a modern design flair.
.png)
UI KIT
.png)
.png)
.png)
Colors
.png)
.png)
.png)
BUTTONS
.png)
.png)
.png)
IMAGERY
%201.png)
.png)
.png)
)%20(2)%201.png)
ITERATION & TEST
USABILITY TESTING
After creating the branding and design, I made high-fidelity prototypes to test the functionality and to determine any necessary revisions. 4 participants were recruited for this usability test.
Locating and favoriting a trip
TASK INSTRUCTIONS
You and your friends want to travel this summer and decided that you are going to take a time travel vacation. You are interested in going back to the 1920s and want to find a trip where you can get this experience and explore other activities of that era. How would you locate this trip, and how do you save it to your favorites?
TESTING NOTES
Participants found the home page to be easy to use. However, there was confusion between the tabs above the search bar.
TASK COMPLETION RATE
Navigating
TASK INSTRUCTIONS
You just heard about Zeit and are interested in time travel. The only criteria you require is that the trip is in Italy and is no longer than seven days in length. How would you navigate the site to browse that for this criteria?
TESTING NOTES
All participants were successful in completing this task. However, two participants were confused about the "era" slider filter. More attention was also drawn to the listing tiles first vs. the filters.
TASK COMPLETION RATE
Checking out and booking a trip
TASK INSTRUCTIONS
You and your family decided you wanted to experience George Gershwin's debut of Rhapsody in Blue. You have this trip in your favorites, and now you need to book it for your family. Locate this trip and checkout to secure your new vacation.
TESTING NOTES
All participants enjoyed the checkout process and liked the addition of booking similar trips while booking their recent trips. However, there were questions about the time travel process that participants raised.
TASK COMPLETION RATE
ITERATING ON DESIGN
During my usability test, several insights came to light. I made an affinity map to distill the data points and ideas in the usability test to understand my users' needs better.
.png)
ITERATIONS
Locating and favoriting a trip
Clearing up the homepage.
- Confusion found between Destination and Experience tabs. Search Bar not as visible to users.
- Eliminated the Destinations and Experiences Tab and made the search bar more noticeable.
- Travel packages offered by Ziet were not forefront on homepage and therefore unknown to the user.
- Included a section below the Inspirations section to highlight Ziet’s travel packages making them more prominent
Navigating
Altering filters and booking tile.
- During the usability testing participants found confusion of the functionality and implications of this filter.
- I added a “Y” axis as well as labeled both axis. I also added a yellow slider to clarify the functionality of this filter.
- For the booking tile I found that the listing of extra dates where slightly confusing an irrelevant to the user.
- I reduced this booking tile to two inputs (Date, Guest). Also added the option for users to add more to there trip with similar trips in there selected travel destination.
Checking out and booking a trip
Giving more options in the checkout process.
- There are no additional suggestions to add more to a persons trip during the checkout process.
- Included the option for a user to add a travel package along with their trip, this promotes Ziets company goals and gives the user more options when booking.
Checking out and booking a trip
Showing logistics of trip to make users feel more secure.
- Participants had questions about the logistics of travel during there trip.
- To resolve this, I included a logistical map of steps travelers with Ziet take when traveling. Users with further questions can visit Ziet's resource center in the link below to the travel processes.
final screens
Home page
The user can search any time and select their check-in/out and number of guests. I also included inspirations and travel packages on this homepage to serve as options for the users to start exploring. The premise of time travel is very intriguing, and I wanted to showcase different historical events to start the imagination and desire of the user.
Listings page
Ziets destinations listing page features events or experiences a user can select in that particular era. This page also features filters based on activity, location, and period for the user to fine-tune their search results. Each experience is contained in tiles where the user can see the cost per person, the ratings, the event title, the location, and the period. Each user can also favorite each trip and save it in a list to be viewed at a later time.
Destination Details page
This details page shows the pages of specific experiences within a period. Having a map with location and a “What you need to know” section allows the user to get a lay of the surrounding area and know any vital information they should be aware of before booking. I also included a “Meet your chaperon” section with a picture and brief description of the person meeting the user at the destination. Lastly, I had straightforward logistical steps below to show how Ziet works alongside a link to the resource center in case the user needs further clarification. All these additions to the page are made to help the user feel familiar, safe, and excited about the trip they are planning.
conclusion
This was among my first major projects, it has been a rewarding yet challenging experience. I loved handling the concept of an idea that does not exist yet, it allowed me to explore further with limited boundaries. I also enjoyed experimenting with different designs and motifs, trying to balance a warm yet clean effect to give my UI elements a historical yet modern theme.
For my next projects, I will work on focusing more on my information architecture and lo-fidelity wireframes. I found that I lost a lot of time going back on certain features with my hi-fidelity wireframes because of lack of focus on the sitemap, and architecture of the site. I believe this could have been avoided if I focused more closely on the lay out of these pages earlier in the project.
Overall, time travel is a very fascinating topic and has been a great source of inspiration that kept me driven throughout this project. I hope to work on more imaginative projects like this in the future.
