About
Time travel website
View prototype

Role

UI/ UX designer, Researcher

Timeline

4 weeks (20h/ week), September 2020

Tools

Figma, Adobe Illustrator, Adobe Photoshop

Design team

Personal projects

01

The plan

02

The process

03

The design

04

The findings

01 The plan

Core proposition

For my first UX design project from start to end, I created a website to learn, search, and book time travels. Zeit not only has to function as a travel booking website, but also involves the uniqueness of its products, because time travels have never been realistic, at least by now.

Goals & Objectives

  • Design a responsive time travel website that works on desktop, laptop, and mobile devices.
  • Provide a design for users to search, explore, and book time travels.

Challenges & User Pain points

Zeit needs to provide values for all types of users, such as a serious time traveler, a person who is just curious about new things, and existing clients who already booked. I focused on prioritizing functions and preparing pages that will meet all requirements from those different users.
Also the time travel technology hasn't been established yet, thus as a designer I needed to rely on existing travel websites for researches and ideating my design. Using imagination about this innovative technology was a challenge but the most fun part of the project.

02 The process

Discover

Competitive analysis

My initial research was to understand the competitors. I picked three existing travel agencies and two space shuttle organizations to brainstorm potential users of Zeit.

User Interviews/ surveys

To achieve better emphasis for end-users, I set up good quality 1 on 1 interviews with potential Zeit travelers. 
Purpose
  • Understand how users are traveling (for what, where, how long)
  • Understand what users expect with travel sites, and their frustrations
  • Learn what time travel means for users, and understand the differences from regular travels
Coverage

The interviews were 1 on 1 with prepared questions about travel experience, planning, travel websites, and time travel.

Participants
I had 5 participants with different demographics backgrounds. All of them are active travel enthusiast who travel to both domestic and international destinations at least 2-3 times per year
Interview findings
More filters can satisfy more users.
Whether or not a website is flexible for changes/ cancelations is a priority for users.
Safety first.
User needs
  • Websites vs Apps - it depends on users. Both websites and apps are "must" for planning trips.
  • Hotels vs vacation rental houses - users need both.
  • More filters can satisfy more users.
  • Websites being flexible for changes and cancelations is a priority for users.
User wants
  • Booking activities - some users plan ahead.
  • Maps are helping users.
  • Users say “Please don’t erase my search history”.
  • Additional information is helpful for a first time visitor (ex. nearby places to visit).
  • Lazy users do exist - "play it by ear" instead of planning ahead.
Time travel desires
  • Future vs past - they are more interested in the future than the past.
  • They’d spend $100K for a time travel trip.
  • Users are concerned about coming back safely.
Opportunities for improvements
  • Changes and cancellations are the top matters.
  • How can we provide additional information values?
  • Combination of flights and accommodations - is it necessary?
  • Users know some reviews are not reliable.
  • Safety first.

Define

Persona development

Based on the interviews, I created a list of behavior patterns, and objectively categorized the interviewees which level they are in for each pattern item. Doing so I came up with the persona. Here I tried to make Chris a “real” person, by story-telling his behavior patterns.

Site map

On creating the site map, the priority was to simplify the structure. 5 parent categories were fixed first, then sub-items were added underneath. All these items are considered MVP. I thoughtfully chose those functionalities to satisfy all different types of users.

Project goals

In order to make the best design decisions, I got a clear overview of "the business goals" (from my project objective) and 'the user goals" (from my user research and analysis), and "the technical goals" (from my previous QA experiences). Here my past QA experiences of working as a team contributed a lot to list up all items.

Ideate

Task flow

I brainstormed the scenario where an existing user knows which trip to book, and now trying to purchase the product.

User flow

Based on my task flow, I expanded it and added patterns. I simulated Chris’s possible behaviors on Zeit, assuming that he's not only booking a trip but also learning about time travel.

Sketches

I sketched multiple patterns for the landing page. Final decision was Pattern 3, adding a global search field, “Featured destination” and “Recently reviewed”. This option can satisfy both the first time and recurring users.
Pattern 1 (has the most items)
With hero section, search by 3 categories, featured, reviews 
Pattern 2 (the simplest)
With hero section only
Pattern 3 (prioritized “How it works”)
With hero section, How it works

Wireframes

These 5 wireframes are the core pages ("Landing", "Menu", "Search", and "Search results", and "Trip details"). With the final design, Search page was removed and combined with Search Results page.

Responsive wireframes

Website, tablet, and mobile versions for the landing page.

03 The design

Design directions

Brand & logos

I wanted to use the opposite time direction to express time travel, and created 8 patterns. After doing a vote I decided to go with #1 and use the red color.
Keywords to represent Zeit as a company:
  • Dignity
  • Trust
  • modern
  • Technology

Style tile

Style tile was created to visually confirm the overall "look and feel" of Zeit website. Instead of using multiple accent colors, I used only one brand color (#C93F21). For background, I adapted white so that it can contrast with the other dark base color (#34302F). The base color has a gradation version that works good with the carousel. The direction was to keep the entire balance "simple but yet appealing". The brand color stands out throughout the website.

UI kit

Based on the style tile, I generated UI kit as a reference to keep the consistency. I thought that the three red lines covering each section should work as an accent. For buttons, instead of using round-shape, I chose rectangular boxes with thicker stroke, to achieve sharp and refined brand image. The dark color in the footer (#381710) creates a nice contrast with the base white and the red brand color.‍

Design, design, design

Prototype

With an aim to test usability with potential users, I built a prototype (open Figma). This will allow users to experience basic functionalities:
  • Login
  • Search
  • See details
  • Save
  • Book and confirm
Check the prototype!

04 The findings

Usability testing

What was the testing for?

  • To evaluate overall functionality and “look and feel” of Zeit website.
  • To learn how users search and find a trip.
  • To discover areas that could cause any confusion or a pause to think for users.
  • To know if the contents are reasonable enough to encourage users to book a trip.

Who were the participants?

  • 5 participants age 30s and 40s
  • All participants are active travelers, and have familiarity with booking a trip online.

What was the methodology?

  • Test was online 1 on 1, and users conducted testing on their computer monitor by sharing the screen.
  • Figma prototype was provided.
  • Only minimum background information about the website was provided to users.
  • Users were asked to think aloud for each process.

What were the testing scenarios?

100% completion rate (limited scope of prototype)
100% error free rate (No significant errors that prevented users from going forward)

Affinity map - the results

I created the affinity map after user testings were complete. Some were easy to fix, and others needed more time. Prioritization should be based on the time and the level of importance.

Findings

  • Overall layout should be updated to keep consistency. The elements are too big to fit in the pages.
  • Trip details page needs to use more photos or even video links, to make the page more fun to read.
  • Move the search field in the landing page underneath the caption, so that it will gain more attention.
  • Consider how the video window should work. Does it open in the same window?
  • How should the calendar in the booking process work? Need further consideration.
  • In the trip details page, add information about security, liability, and cancellation policy.
  • Re-consider the priority in the landing page. Should "How it works" be prioritized?
  • Why didn't many users scroll down the landing page? What's missing to encourage them to read the contents?
  • In the trip details page, can the three "recommend" sections be combined to one as "recommend for you"?
  • Booking process: Should use 1 page and show/hide each process at a time, instead of using multiple dialogs?

The problems and solutions

Here I picked some areas that users pointed out during usability testing. I made quick fixes for those to improve the rest of the testing, and learned that updating those (and other problems) was a huge success for better usability.

#1 Overall layout - too big

Some photos and fonts were a little too big for users to feel comfortable, especially for users on PC.
Adjusted to smaller photos and fonts

#2 Trip details page - too dull

Trip details page can be more "fun to read". Using more photos and video links should make the page more lively.
Bofore
After

#3  Search field - too humble

Move the search field in the landing page underneath the caption.

Results: This tiny update really worked. All testers used the search field after the change.
Before
After

Takeaways

The core value of designing a travel website is that the website is supposed to be fun to explore.
What I enjoyed the most with the project was that I experienced the whole process from research to iteration. This project is like my baby, and my journey as a UX designer started from here.

My first experience as a UX designer to create a set of responsive web pages was very rewarding. Especially the user testing made me notice many areas I could improve. One of the participants of my user testing said that travel websites are supposed to be fun to explore. This opinion represents the core value of "designing for users". As a designer I learned how to be responsible for all design decisions, from researches to final prototype.

PREV
MONO
There's more!
NEXT
Buddy.
Let's create something together!  Send me a message.