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

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.

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

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.

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

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.

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.

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.