Brief

After years of deliberation, the International Concordance on Time Travel granted Zeit the ability to fully democratize the experience of time travel. A total of 289 destinations all over the world, from prehistoric through present, are approved.

​

Objective: Zeit contracted me to create new branding and design a consumer-facing responsive website for bookings.

Client: Zeit Travel

​

Timeline: 150 Hours over 6 weeks

​

Role: Lead UX/UI Designer

​

Tools: Sketch, Illustrator, InVision, Zeplin

​

Deliverables: Website prototype, Branding

Process

Research

Goal: To research the market, competitors and potential users

​

Process: Market Research, Competitive Analysis, Provisional Persona, 1:1 Interviews

Market Research

To kick off the project, I conducted a market research of the travel and booking industry to uncover demographics, behaviors and trends that help me get a picture of the industry and consumer.

Travel Industry Trends

​

• Online Travel Agency (OTA) followed by search engines are leading planning resources

​

• Deals, reviews and destination content respectively most important in converting

​

• Value and exploration leading influencers in decision making

Consumer Demographics

​

• Millennials travel the most at 5.6 trips per year

​

• 49% of men travel at least once every six months for leisure

​

• 41% of women travel at least once every six months for leisure

​

• 1 in 4 people say they would solo travel

Booking Insights

​

• Gen Z and Millennials most likely to book trip within 3 months

​

• Baby boomers prefer booking a year in advance

​

• Desktop preferred for travel planning and booking​

​

• 26% of travel searches were on mobile

Competitive Analysis

I conducted a competitive analysis of the high tech and experiential travel industry to identify strengths, weaknesses, and gaps from competitors to understand Zeit's opportunity in the market.

Provisional Persona

I created four provisional personas of potential Zeit users based on industry and competitive research. These personas help develop the interview guide by narrowing focus on a group.

1:1 Interviews

With a better understanding of the travel industry and competitors, I crafted an interview guide to question participants about their experiences in travel, travel booking and safety. I gathered 5 potential users from a target demographic of age 25-27 for 1:1 interviews to observe consumer needs, desires and pain points. View the interview debrief here.

Define

Goal: Synthesize research to define core problems

​

Process: Empathy Map, Persona

Empathy Map

I constructed an empathy map to organize observations according to the following criteria: doing, thinking/feeling, seeing, hearing, gains & pains to synthesize findings from 1:1 interviews. From the empathy map, I was able to take each observation and organize them into shared patterns and behaviors to identify developed insights and needs.

Insights

​

• Users seek to have a convenient booking process

​

• Users commit to a destination before they move forward with plans

​

• Users seek to immerse themselves at their destination

​

• Users seek to bond with group through experiences

Needs​

​

• Users need to book travel conveniently

​

• Users need to select a destination to begin planning

​

• Users need a way to plan local activities

​

• Users need to plan experiences with their group

Persona

Personas help designers take a humanistic approach to design by establishing an idea of someone to design for. From the observations gathered through interviews and insights from the empathy map, I created Emory, a persona constructed from research findings. Emory helps guide design decisions by keeping her in mind.

Ideate

Goal: Organize information architecture and map user journey

​

Process: Card Sorting, Sitemap, Task Flow, User Flow

Card Sorting

I conducted an online card sort with 5 participants. The card sort consisted of 30 destinations offered by Zeit. Participants were told to group destinations in any pattern they deem fit to understand how users organize information and content.

​

Locations were the most common grouping, and 3 out of 5 people sorted by continent or country.

Sitemap

The card sorting results determined that destinations should be organized by location, which was consistent within the industry. However, competitors typically offer another form of organization: experiences. Experiences such as art, food and music are common themes that people search for in travel. With this information, I organized Zeit's proposed pages into a sitemap to provide a structure for content.

Task Flow

I created a task flow that outlines the key pages and decision making a user requires to complete a single task. This helps me understand how the user interacts with the system to achieve a goal.

User Flow

The user flow is an expansion of the task flow with multiple tasks. I mapped out Emory's path through four different entry points and the tasks of browsing a trip, saving a trip, and purchasing a trip. The user flow helps me further understand successes, barriers and context to achieve a task.

Design

Goal: Design branding and user interface

​

Process: Sketches, Mid-Fidelity Wireframes, Brand Guide

Sketches

To kick off the design phase, I began with pen-to-paper sketches to create low-fidelity iterations of the website layout based on research and insights. Sketching allows me to get creative and tap into new ideas without investing too much money and time. 

Mid-Fidelity Wireframes

I then digitized mid-fidelity wireframes of the home, category, and destination pages using Sketch. The mid-fidelity wireframes serve as the foundation of information architecture and flow.

Responsive Wireframes

I also designed responsive wireframes of the home page for tablet and mobile to ensure that website elements are consistent on different devices.

Brand Guide

To craft Zeit's brand identity, I defined the core characteristics of the company to be represented: Luxurious - Futuristic - Majestic -Bold

​

I then created a moodboard using Pinterest, to gather visual references for their logo design, color palette, typography and UI. The brand provides a cohesive visual direction for the Zeit experience. View the full brand guide here.

Prototype

Goal: Build an interactive example of the responsive website

​

Process: High-Fidelity Wireframes and Prototype

High-Fidelity Wireframes

Once branding was established, I populated the wireframes with imagery, brand styles, and UI elements to create high-fidelity wireframes of the home, category, search results and destination page, and the checkout process.

High-Fidelity Responsive Wireframes

I used the same process to create responsive wireframes.

Prototype

To transform the wireframes into a functional prototype, I uploaded the high-fidelity wireframe into InVision, where I could create an interactive version of the website with limited functionality.

​

Test the prototype by:

• Filtering trips

• Browse destinations

• Booking a trip to Thailand

Testing

Goal: Evaluate viability of solutions through testing and feedback

​

Process: Usability Test, Affinity Map, Revisions

Usability Test

To determine if the website is usable, I set 3 tasks for 5 participants to complete in the InVision prototype. I observed their patterns and behavior through screen recording, video recording, and taking notes.

Test Goals

​

• Evaluate effort level of user to complete tasks

​

• Identify areas of difficulty and confusion

​

• Identify behavior patterns of users to complete tasks

User Tasks

​​

• Filter both Asia and Culture to find a specific trip

​

• Save a trip to view later

​

• Successfully book a trip to Thailand

Affinity Map

Taking observations from the usability test, I created an affinity map to organize thoughts and behaviors to create insights based on developed patterns. Recommendations for revisions are based on these insights.

Insights​

​

• The most difficult task for participants was to save a trip

​

• Participants felt that "Culture" was too broad as a grouping

Recommendations​

​

• Increase visibility of the save function by revising the icon or change placement​

​

• Revise wording of "Culture"​

Wireframe Revisions

With new recommendations for a revised prototype, I implemented changes to the save icon by adding an opaque white background, changed "Culture" to "Civilization", and fine tuned a few UI elements to lessen the weight of the page.

Reflection

Next Steps:

Research is Key. Effective design isn't about being flashy or different. It's designing what works. My biggest takeaway from this project is to design with research in mind. I could've saved numerous hours by sticking with the research, but got sidetracked by over-investing time into a specific UI element. Research provides the key foundation I need to design with.

​

There's a First for Everything. As my first UX/UI design project, I learned the ropes through trial and error...mostly errors. My goal in this was to fail often and as fast as possible. I learned the fundamentals of UX design through this project, and mistakes I'll be mindful to not make again.