ZEIT Time Travel Tourism
RESPONSIVE WEB DESIGN + BRANDING
CLIENT ZEIT Travel
TIMELINE 150 Hours Over 6 Weeks
ROLE Lead UX/UI Designer
TOOLS Sketch, Photoshop, InVision, Zeplin
DELIVERABLES Website Prototype + Branding
THE COMPANY
ZEIT, a subsidiary of the Virgin Group, is a tourism company that is ready to make time travel available to all. Following the International Concordance on Time Travel where a set of standards was put into place, Zeit will take travelers to one of 289 controlled and extremely protected destinations.
This is a hypothetical and speculative project.
OBJECTIVES
ZEIT needs to set up an e-commerce responsive website on which they can sell travel packages to different eras from prehistoric times up to today.
PROCESS
Understand the user through research, immersion and observation
Create a pint of view based on the visitors needs
Generate ideas for potential solutions to the problems
Create representations of the ideas
Implement and refine the product based on user testing
EMPATHIZE
Market Research
Competitive Analysis
User interviews
Empathy Map
User Persona
MARKET RESEARCH
I initially conducted market research of the travel and booking industry to learn about demographics, behaviors, and trends to help me better understand both the industry and the consumer.
-
565 billion USD was spent on digital travel sales worldwide last year
-
This sector grew by 15.4% in the year and is forecast to grow even more
-
Hotel online sales revenue grew by 10.3% and is expected to keep climbing
-
95% of US adults prefer to research travel destinations online
-
Gen Alpha (those born after 2010), is showing more signs of influencing family travel decisions and planning
-
On average globally, travellers with Gen Alphas are taking more than three family trips a year
-
Over half (55%) of global travellers report being more determined to make sustainable travel choices
-
70% of global travellers say they would be more likely to book an accommodation knowing it was eco-friendly, whether they were looking for a sustainable stay or not
-
Driven by millennials, destination routes are expanding. That said, millennials are looking to have different travel experiences than their parents
-
The number of solo travellers is growing. The introduction of co-living apartments connects like-minded travelers who share similar interests.
COMPETITIVE ANALYSIS
Continuing my research, I looked more deeply into both direct and indirect competition in the experiential travel booking site, noting strengths, weaknesses, and gaps in the market.

USER INTERVIEWS
With a better understanding of the travel industry and competitors, I needed to gain a deeper understanding about users’ actual experiences with travel and booking. I conducted one-on-one interviews with 5 potential users aged 25 to 70. I've included a short summary of my findings below (photos are not of actual interviewees). Doing this, I was able to more deeply understand users’ motivations, needs, and pain points experienced while traveling or booking travel.

EMPATHY MAP
I combed through the user interviews and identified similar patterns. I then combined these patterns with secondary research and competitive analysis to plan a design that will resonate with real life users in a compelling way. The combination of this data led to the creation of “Naomi”, a fictional user based on gathered information that represents the hopes and frustrations of a larger subset of people. Have a look at a chart identifying her attitudes.

Click Image to View Larger
PERSONA
Now that we've got a sense of what Naomi is experiencing, let's take a look at who she is as a person.

Click Image to View Larger
DEFINE
CARD SORTING
CARD SORTING
I ran a card sorting session both online and in person to understand how participants intuitively group information. Using 30 destinations offered by Zeit, participants grouped the cards in a way that made the most sense to them. I chose an open sort because I wanted participants to structure the content without being influenced by pre-determined categories. The results below were telling.

IDEATE
TASK FLOW
USER FLOW
WIREFRAMES
BRANDING
UI KIT
TASK FLOW
I created a task flow that outlines the key pages and actions a user requires to complete a single task. This helps me understand on the most basic level how the user interacts with the system to achieve a goal.

USER FLOW
I expanded on the task flow by adding multiple tasks and thinking about how my user would complete these tasks. The user flow helps me understand the big picture of the site and all of the necessary pages needed to complete different tasks. This chart shows the paths of two different visitors to the site.
Click Image to View Larger

LO-FI WIREFRAMES
To start off the design phase, I began with quick pen-to-paper sketches to generate several ideas for laying out the website layout. Using the sketches along with the site map, and user and task flows, I digitized some of the ideas generated through sketching. This helped me organize the flow of the site.
Click Image to View Larger

BRANDING
To craft Zeit's brand identity, I started by defining the brand’s attributes and ensured every aspect of the branding reflected these.
I then created a moodboard using Pinterest to gather visual references for their logo design, color palette, typography and UI. Using the attributes along with the moodboard, I created the logo and put together the brand guidelines, giving Zeit a cohesive visual direction.



RESPONSIVE UI DESIGN
I then revisited the responsive wireframes, populating those as well with imagery, brand styles, and UI elements.
Click Image to View Entire Screen
UI KIT
I kept a working document of all of the UI elements in order to reference during the design process to ensure consistency.

PROTOTYPE
MID-FIDELITY MOCKUP + PROTOTYPE
MID-FIDELITY MOCKUP AND PROTOTYPE
I created mid-fidelity wireframes of the homepage, search results page, destination page, and checkout process.
I then brought the mockup into InVision and created a prototype with enough usability to complete some tasks to be used for usability testing.


%20V2.png)


TESTING
USABILITY TESTING
AFFINITY MAP
PRIORITY REVISIONS + HIGH-FIDELITY DESIGN

AFFINITY MAP
Using the information gathered from the usability testing, I took every statement and categorized them into successes, patterns, and comments. I then used the resulting observations to derive insights and recommendations. The results were interesting.

PRIORITY REVISIONS + FINAL HIGH-FIDELITY DESIGN
With the recommendations uncovered through the affinity map, I implemented revisions. I revised the main search feature, and redesigned the Recommended Trips scroll bar. I gave a lot more space between the sections to let them breathe and refined the colors and tightened up the fonts. I also made sure that all of the information was consistent between pages.


NEXT STEPS
Further Usability Testing: Continue to identify areas of improvement through testing
Developer Handoff: Fine tune UI elements and hand designs to the development team