A high-fidelity prototype for desktop, a responsive homepage and product page were designed as the result.
ZEIT Time Travel Agency
08/2018 - 10/2018
UX Researcher, UX Designer
Photoshop, Illustrator, Invision
What made this project challenging is the lack of information. Since Time Travel hasn't been brought into reality, the background of this project isn't clear. I needed to decide my own target audience, and define how the time travel works. Since there was no direct competitors, and the concept for time travel hasn't been fully established in people's mind, the researching process was harder than usual.
During the discover phase, I conducted marketing research of current tourism industry, including both these common tour booking companies and the unique space travel service. Statistics from both user interview, online survey and tourism industry annual reports were also analyzed.
From marketing research, the major travel population is Generation X (age 39-53 yr) and Y (24-38 yr), who have more time and budget, and are relatively more willing to use travel as their ways to relax. UI trends for travel booking websites have shown more attention to social proof (eg. review, ratings), understandability and transparency (eg. no hidden fees).
Due to the limitation of time and resource, only 4 participants were recruited from my network, with people of different levels of travel planning experience. The User research found flexibility (eg. last minute cancellation, modify booking), social proof from visual media and reviews, personalized experience and reliable source of information are clients' main painpoints.
Based on research results, one primary persona was developed: a Generation Y, experienced traveler with tight budget and time, but willing to try new things.
Due to the limit of time, only the home page and product info page were designed with responsive versions.
The UI uses purple and green as the primary colors, emphasizing the theme of "historical" and "modern". The hero image has an elephant in the jungle surrounded by the desert, corresponding with the concept of "time changing", also reflecting the impression of "longevity". However, the elephant image here is simply an example of possible hero pictures, similar styles can always be used instead.
Due to the speciality of time travel, how do customers choose their desired travel date is fairly flexible: either enter a keyword of target destination or time period, or selecting a time in the past.
Searching with any time period is allowed when keyword is entered.
A "historic time guide" is available with info of major world time periods.
Hovered tags are used as a new feature that wasn't found in most U.S. competitors, for sections of different tour themes.
Users can switch between different categories without clicking, giving a faster switching experience, which is important for users who compare different choices repeatedly.
Filters are collapsed with 6 different categories, switching between each by clicking on icons and are applied after "OK" confirmation.
Hovering isn't used here due to the narrow whitespace between each icons - wrong switches will increase when hover around.
Availability checking is on top of the product info page. Different time slots are displayed based on departure date and number of travelers.
A waitlist option is available.
Waitlist feature give another chances to users to book when they cannot meet the minimum requirement of participants to start the tour. Solo travelers are the major beneficiary.
It is also helps users who want a specific time slot that isn't available at the time of checking.
Besides modifying bookings after they're confirmed, the last chance for users to modify their bookings is provided on the upper corner of the order summary.
Usability testing was conducted with hi-fi prototype made from InVision. Participants were required to carry out 3 tasks based on given scenarios. They were recruited from my network.
One common problem that all participants had was the uncertainty of the identity of ZEIT website.
Therefore, the hero line was changed to directly relate to "time" and "travel". A graphic explaining time travel mechanism was also added for clarifications.
Some participants didn't notice the sections below hero image. Therefore a pointing arrow was added to guide visual browsing.
Participants were concerned about the breakdown/transparency of price.
Therefore the inline help was added to show detailed explanations when mouse hover.
If more time is allowed, recruiting more participants for the testing would be conducted. And responsive versions could be fully developed for all screens.