Zeit
Fictional Responsive Website for Booking Time Travel Vacations
How can we help users find vacation packages that best suit their needs?
Introduction
Background
In the future, we now have the ability to time travel. Zeit plans to sell time travel vacation packages to various places around the world, where people can stay at resorts and take trips to nearby cities and attractions.To do this, we’re launching an e-commerce website where people can browse through vacation packages and filter them by different categories.
Personal Capstone Project
Tasks: User Research, Information Architecture, Branding, Style Guide
Timeline: 6 Weeks
Tools: Figma, Procreate, Miro
Project Goals
1. Launch a responsive e-commerce website where people can browse through vacation packages and filter them by different categories.
2. Establish a branding and logo that reflects both the modern and the historical.
Research & Synthesis
Market Analysis
I started off by conducting research on other travel booking sites to see what was already being done, identify areas that could be improved, and determine how Zeit could differentiate itself from the competition.
-
The majority of consumers choose their next vacation destination based on recommendations from friends and social media
-
Most travel sites offer a search bar at the top of their sites, usually with inputs for location, check-in/check-out dates, and the number of people and rooms
-
While types of categorizations and filters vary between travel sites, they all display various features, deals, and/or articles as ways to inspire visitors and attract their attention
1-on-1 Interviews
To understand consumers’ thoughts and experiences when booking travel packages online, I conducted a series of interviews aimed at uncovering their habits, motivations, and pain points. I interviewed 5 people, mostly male and in their 20s to 30s.
I found that:
-
Google and Airbnb are the most common sites used when booking vacations
-
Many people are interested in vacation packages, but don’t end up booking them because they can’t find a package that fits all of their needs and prefer the flexibility that comes with planning a trip themselves
-
Cost was one of the most important considerations people had when planning vacations, and much of their time is spent looking for reasonable pricing and good deals
-
Being able to find lodging that is both reliable and reasonably priced was a major pain point for most participants
Persona
Using the data gathered from market research and 1-on-1 interviews, I created a persona to help understand user needs, wants, and frustrations when booking vacation packages.
Define
Deciding the Features
With James’ perspective in mind, I wrote up a list of product features that would be useful to his search, and prioritized them by what he would likely value most when browsing our site.
Card Sorting
To determine how we could best determine filter options and classifications for the vacation packages, I conducted an open card sort online asking participants to sort various vacation package titles into categories of their choosing. With data gathered from 4 participants, the findings showed that people tended to separate items depending on whether they are a location, artifact, or event.
-
The most agreed upon categories were “Buildings,” “America”, “Fictional Events,” and “Old Civilizations”
-
Other common category names that participants created:
-
By place (“Egypt,” “Japan”, “European Figures”)
-
Creative advancements (“Creations of Mankind,” “Paintings,” “Entertainment”)
-
Historical events (“Events,” “Events in Action,” “History of the Human Species,” “Not as Distant History”)
-
Task & User Flows
I created a task flow for how a user might book a package on our site.
Afterwards, I came up with 3 different user flows, each considering a different context in which a user might access our site.
Scenarios:
1. A user stumbles onto the site through a search engine. They explore it casually to learn more about time travel packages in general, and to get a sense for what packages are available.
2. A user who is coming back to the website after booking a package, to check their booking or to edit it.
3. A user coming specifically to the site looking to book a package. They already have a general sense of what they want, and are looking for a package that fits specific criteria.
User Flow for Scenario 1
Sitemap
Keeping efficiency in mind as the main priority, I moved on to decide the website's structure. There originally was no separate menu page, as I planned to display the menu on the homepage for convenience. But after compiling the complete list of available items, I realized there were too many to display comfortably and created another page to accommodate them.
Design
Sketches
I quickly sketched out several ideas for each page on my iPad. Below are some of the sketches I made for the homepage.
Low Fidelity Wireframes
Taking the parts from each sketch that I thought were most successful, I created low fidelity mockups for the main pages. While creating the wireframes, I realized that the map featured on the homepage showed packages only by location, and offered no way to explore packages by time period. Thus, I added a slider at the bottom to allow users to alter the selection of packages shown on the map by sliding to a specific time frame.
Moodboard
I collected a series of images demonstrating the visual direction I thought would best express Zeit’s concept as a combination of both the modern and historical. There is a heavy emphasis on photography, to immerse the viewer in rich and expressive imagery.
Style Tiles
I kept the colors minimal to let the images stay as the main attraction. The light and dark teal colors are used mostly as translucent overlays over photos to give text more contrast where necessary.
UI Kit
I added a bright orange to use for CTAs, as I felt a vibrant contrasting color would help draw attention towards important action elements.
Hi Fidelity Wireframes
I applied the elements from the style tile and UI kit to the wireframes, bringing them up to high fidelity and adding interactions so I could use them for usability testing.
Iteration
Testing
I conducted a usability test over voice call with 3 participants, 2 female and 1 male, all in their 20s. They were given the task of finding and booking a package on the Zeit desktop website. After completing the task, they answered a few questions on their general impressions of the site and any pain points they encountered.
Summary of findings:
-
Participants felt that the homepage sections looked too different from each other and belonged to different websites
-
The dropdown box on the “Where to?” was hard for some participants to understand due to the combination of options for both location and time
-
Participants gravitated towards the “Deals” link and search bar to look for packages
-
Some participants didn’t make the connection between the slider and map at first, but were pleasantly surprised once they interacted with the slider
Revision
I picked out a list of high priority items to work on, basing priority on which items were important to most of the participants and on how easy they were to fix.
Main changes:
1. I changed all of the backgrounds to be dark so as to make the website look more cohesive.
2. I added a thin white border around the map and slider, to convey visually that they were a part of a single unit.
Reflection
Ask the Right Questions
During interviews, I found that asking for a user’s opinion on a feature or website was usually met with responses that could be summed up as either “good” or “bad.” However, when I began asking a user to walk through a previous experience booking a travel package, or following up with a “why?” after they mentioned something interesting, I was able to get more detailed insights into their thought processes and preferences.
Previous Project
Back to Top