Travel, Responsive, Fictional
0. Background
Zeit is a subsidiary of Richard Branson’s Virgin empire. After a long struggle with Elon Musk, Virgin has been able to make time travel tourism available to all. Zeit is looking at me to create their new brand and set up an e-commerce responsive website in which they can sell travel packages at different times.
Challenge
Zeit is a fictional project about time traveling. It is challenging to do the secondary research and conduct the interview.
1. Research
Research Goals
-
To study the pattern people researching and planning a trip
-
Discover the better approach to visualize potential destinations
-
Build the user’s trust for the product
-
Inspire users to find the next destination
Assumptions
-
People wasted too much time on searching for traveling information
-
Users concern about the reality won’t meet the expectation
-
Users find online information not reliable
Secondary Research
Market research，Competitors analyst,
Empathy Research
Indivisual interview + observation
Most people prefer to explore online while searching for destinations and booking for transportation. People prefer to do detailed research before traveling. Most people who book a tour online aged under 34. Women make most travel bookings. The desktop is still the most common platform for booking, but mobile searching is rising rapidly.
Market Research
Competitors Analyst
Interview
To get started, I first identified my target participants:
-
Experienced travelers from 27-60 years old
-
People who have habit booking online, maybe movie tickets, hotels, attraction tickets
-
People who are interested in history or classic arts, maybe archaeologists, researchers, or art history lovers.
The biggest difficulty is to get information without mentioning “time travel” because I wanted to focused on the core information, traveling booking. So I first asked questions about current problems when they travel in ordinary ways first. And then brought up some questions about time travel.
Participant A
Gender: Female
Age: 53
Occupation: Linguistic Professor
Dressing: Uniqlo comfortable sweatshirt, elastic pants, flat shoes
Scene: Just came back from the gym
Participant B
Gender: Male
Age: 30
Occupation: Analyst in Real Estate
Dressing: T-shirt, Short pants, casual shoes
Scene: Just finished dinner going home from work
Participant C
Gender: Female
Age: 27
Occupation: Electric Engineer
Dressing: Casual Business, flat shoes
Scene: On the way home, trying to book an Airbnb room for her birthday party
Empathy Map
Empathy Map Summary
Research Findings
Insights
-
Travelers would love to get inspirations from trusted resources
-
Travelers concern about the reliability of the information provided by booking websites
-
People regard planning and researching as a time-consuming job
Needs
-
Users need to feel confident when they get inspirations for the next destination
-
Users need to be presented with reliable information during their booking process
-
Users need an efficient and convenient booking experience to save their time
Persona
Storyboard
2. Define
Project Goals
Based on my secondary research and empathy research, I concluded some goals for business, users and technical.
Feature Roadmap
I created a list of features I would like to have and prioritize them according to my secondary research and empathy research
Card Sorting
First, I asked two of my previous participants for a 1:1 offline card sorting. And then I asked some other participants to give me an online card sorting on OptimalSort.
-
Mozart's Vienna
-
Age of Samurai: Sengoku (the 1500s) Japan
-
Construction of the Taj Mahal, Agra, 1643
-
1776 American declaration of independence from Britain (Philadelphia)
-
Martin Luther King Jr.'s "I Have a Dream" speech, August 28, 1963
-
Wright Brothers' First Flight, 1903
-
Watch the Berlin Wall fall November 9, 1989
-
Explore the lost city of Atlantis
-
Witness Apple iPhone unveiling, 2007
-
United Kingdom's Edwardian Era
-
Building the Great Wall of China
-
Loch Ness monster's birth
-
Beatlemania, 1963
-
Plato's Greece, 368 BC
-
Ancient Rome
-
Stone Age tribal life
-
California Gold Rush
-
Ancient China
-
Disneyland's opening day
-
Mongol Empire
-
Meiji Restoration of Japan
-
Building the Great Pyramid, Egypt
-
Vincent van Gogh's France
-
Filming Star Wars
-
VE Day celebration
-
Incan Peru, c. 1450
-
Building the Eiffel Tower
-
New York City, 1916 Armory Show
-
Shakespeare at the Globe, 1608
-
The Vikings discover North America
Key Findings
-
2/5 people use by dates
-
3/5 people use specific systems including “landmarks” “events” or “eras”
-
1/5 person uses by dates as the secondary category
-
1/5 person uses “people” as one of the categories
Proposal
Chronology Geography Events People Interests
Interaction Design
Sitemap
Userflow
Homepage Design Sketches
Wireframes
Responsive UI
Paper Prototype
3. Design
Logo Brainstorm
For the logo, I began with listing out some keywords for ZEIT, and I selected three of them to develop. I Google some images for my selected keywords for reference, abstract and sketch them out, and alter them digitally to fit ZEIT better.
Final Logo
Finally, I chose the third option which is modern and simple. The letter "I" in the final logo represents wormhole.
UI Kit
I created the UI kit based on my previous brand tile. I hope my UI kit would represent futuristic and vintage characters for ZEIT.
High Fidelity Prototype
Desktop
Responsive UI
5. Test
I interviewed four strangers in our community and our gym for my usability test.
I took some quick notes during the interviews. Then I summarize and digitize my hand notes into testing findings.
Test Completion Rate:
Participant 1: 75%
Participant 2: 75
Participant 3: 100%
Participant 4: 100%
Error Free Rate:
Participant 1: 50%
Participant 2: 75%
Participant 3: 80%
Participant 4: 90%
I created and document my affinity map based on my test findings, and referred to the affinity map from “Spotify”. I sort my findings by "Success", "Patterns", "Pain points" and "Recommendations". And next, I summarize the results by “Observations", "Insights" and "Priority for Recommendations"
Based on my previous usability test, I iterated my design. Please view the video below to see the final result.
Prototype
Interactive Header
Conclusion
ZEIT was a challenging project as my first UX/UI design work. I gained some precious experience on the interview and usability testing technics. The usability testing was successful because it helped me to iterate some interfaces that I did not realize as a problem. I would animate my header image into a flowing "time tunnel" if I had more time.