ZEIT TIME TRAVEL
Responsive web design to easily experience time
OVERVIEW
Background
Zeit is an innovative company that is spearheading the time-travel tourism experience. Imagine hearing one of Mozart’s first live concerts, or hearing about Zeus and Athena from a local’s word of mouth at Mount Olympus. Compared to other travel booking sites, Zeit’s online presence is nonexistent.
Role | UX Designer
* Project for Design Lab UX Academy course
Objective
They will need help in creating a new brand as well as designing a responsive e-commerce website that sells time travel tours to users.
Solution
Designed a responsive travel website highlighting Zeit's focus of time traveling and explaining to potential bookers that time traveling is safe, as well as developed Zeit's branding.
RESEARCH
In reviewing the project brief, my first step (figuratively) was to step into the users’ shoes and exercise my empathy. I chose Competitor Analysis as well as User Interviews for my research methodologies to help me reach my research goals which were:
1. Discover the standards for booking on a travel site
2. How to deliver time-travel information in a customer facing language
3. What motivations and concerns users have when booking a trip
4. What model of travel booking users prefer (packages, customized, etc)
Competitor Analysis
There are many travel booking sites out there and each one has their own strengths and weaknesses. In my research, I discovered what trends travel sites have in common, what the standards are for booking experiences, and identified weak elements from each site. This helped me in conjuring questions for my participants in the questionnaire.
Great for frugal travelers, but no apparent customer support.
Has a well-known app with curated places, homes, and experiences, but users might feel a little uneasy about relying on a stranger instead of a tourism professional.
Modern and aesthetically pleasing website, but more of an travel inspiration site than a booking site.
Special attention to customer support, but website is cluttered with unrelated ads.
User Questionnaire
I composed a set of questions that I sent out to 4 participants. All within 25 - 45 years old with varying careers. I chose these participants based on their age, marital status, and whether they have kids or not. I wanted to get a good variety of people so that my data is diverse. These are the key findings:
-
All ideally want “best value” vacations with emphasis on cost and comfort
-
All like sites that help with price comparisons
-
All start planning at least a month in advance
-
Some want to go back in time to a past vacation to spend more time at the place
-
Only one stated that they want to go to a historical past (Ancient Greece)
These findings helped me in creating a persona. Meet Priya, a 30 year old nurse practitioner
INFORMATION ARCHITECTURE
Project Goals
Card Sorting
Priya and her Empathy Map guided me in creating the User Goals, and along with the Business Goals, I created Zeit’s Project Goals.
To aid me in categorizing Zeit’s experiences, I used Card Sorting which I sent out to 6 participants. Based on their responses, I was able to recognize 4 main groups that I can organize the Zeit site with: Events, Eras, Places, Bundles.
Wireframe Sketches
These are the first 3 sketches that I made based on the card sorting results as well as taking into account the competitor analysis, user research, and persona.
Site Map
Creating the initial wireframe sketches first helped me in organizing Zeit's site map easily while keeping in mind my persona, business goals, and card sort.
IDEATION
Task & User Flows
The site task flow and Priya's expected user flow
Low Fidelity Responsive Wireframes
These are the low fidelity homepage wireframes designed by iterating from my initial sketches. The main goal here was to get a better idea of how Zeit’s information architecture would be throughout each platform.
Low Fidelity Desktop Wireframes
I decided to focus on the desktop version of the site considering most users book their travels on a desktop rather than mobile. These are low-fidelity wireframes of multiple pages on the site. I added descriptions and what the user is expected to do on different parts of the pages to help with the prototype.
UI DESIGN
UI Design is one of my favorite parts of the design process. Creating visual context from an idea is something that I am very passionate about and enjoy wholeheartedly.
Logo & Branding
I first wanted to create a mood board for Zeit to help me envision the look, feel, and tone. The board consists of galaxy-like colors with bold and light san serif fonts.
Logo Exploration
I always start my logos with some sketches to dump some ideas on paper. Here are early sketches and iterations I did of the Zeit logo.
Zeit Style Tile
I looked to my moodboard for inspiration when coming up with Zeit's color palette. I really wanted the site to have a mysterious and cyber feel to it. The logo I decided on is the rounded Z that mimics the shape of an hour glass to represent time.
High Fidelity Responsive Wireframes
Based on the mood board and style tile, I’ve created responsive high fidelity wireframes for the homepage and product page.
UI Kit
After establishing the site’s look and tone, I took the elements and composed them in a UI kit. This kit contains typography, image treatment, logo, color palette, textures, etc. This will make it easier for future designers to reuse.
ITERATION
Another favorite part of the design process is prototyping. Seeing the wireframes come to life, and having users test it bring out my ultimate passion for UX design. Seeing my creation come to life via prototype gives me a sense of satisfaction.
High Fidelity Prototype
I created a high fidelity prototype for user testing. The task would be for the user to book an experience through Zeit. My goals for this test were:
1. Understand what friction points there are on the site’s booking flow
2. See which is the most popular flow the users take to find and book a trip
3. See if there are any desired functions that can be added to booking process
I had 5 participants in total with the age range of 20 - 45
Affinity Map
I took my test findings and applied them to this affinity map to have a visual representation of my research. This helped me in my priority revision and iteration which is reflected in the prototype.
CONCLUSION
At the end of the project, I was able design a user-tested travel website as well as develop Zeit's branding which is exactly what Zeit wanted to accomplish.
If I were given more time, I would want to flesh out a time-travel date picker unique to Zeit as well as test and iterate more.
Check out my work for Libro
