© 2023 by Kit Rosenberg

  • Facebook Social Icon
  • Twitter Social Icon
  • Instagram Social Icon

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

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
Homepage Desktop Hi Fi.jpg
Mobile Hi Fi.jpg

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.

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