ANYTIME

Responsive UX/UI Design

Process

Research

To better understand current travel booking sites, time-traveling in general, and users’ travel booking habits. Time travel is not an existent industry yet, the research will be based on current space/adventure travel booking sites.

Competitive Analysis

To find how current tourism agencies organize the booking process. And to gain information of what is working and not working from the other competitors.

User Interviews

To understand the potential users, and to collect some qualitative data through interviews on how users
plan a trip, which sites they use, and why.

•Participate: Individuals ages 25-45 who travel 2x per year and book trips online web browser and mobile app


The interview was conducted with 5 participants below:

Research Summary

User Goal
All participants hope to have a getaway experience from their ordinary life. 

User Need
• Leisure
• Local Food
• Great weather
• Hotel within the travel budget
• Reward system (Cash reward, late-checkout, etc)
• Spontaneous trips

User Frustrations
• Unexpected situations
• Going over the travel budget
• Hotel and flight cancellation
• Unexpected weather
• Safety of the location

Persona

A user persona, Emily, was created based on the insights gained from user research. Emily helped to better empathize with the target user throughout the design process.

Project Goals

• Offer a unique time travel experience to users
• Easy time travel website to use
• Responsive website for all devices
• Build brand trust from users

Card Sorting

An open card sorting via Optimalsort was conducted with 10 participants to gather insight into how people mostly clarify their information and organize the information into a group (20 cards).

Based on the results of 10 participants, each participant created labels differently but some common patterns
of the categorization were found:

     • Location of the event occurred (Asia, Europe, America)

     • Time period (BC, AD, Ancient, 1200-1600, 1600-1900, 1700-2000)

     • Type of the event (Art, Science, Inventions, People, Religion, Construction)

     • Historical events (Old to the new era)

The time travel package would need to be sorted and filtered with Time Period, Location, and Types of the event (Theme) for the users’ needs accordingly.

Site Map

A sitemap includes the proposed pages to help plan the structure of the website. The sitemap is used as a blueprint for the website to help to organize all contents on the website as well as understanding the navigation and flow.

User Flow

A detailed user flow was developed to have a clear and easy booking process. The user flow includes decision points wherein the persona’s journey to the desired goal can differ, based on the persona’s needs. The user flow helps to identify the key pages/screens that need to be designed, user actions, and potential user decision points.

Responsive Wireframe

A low-Fidelity responsive wireframe was designed available on any device including a website, tablet, and mobile.

Brand Logo

UI Kit

A UI Kit is a foundation for the design system. The UI Kit includes the brand logo, color, typeface, icons, buttons, inputs, navigation bar, and the footer. The UI kit will speed up the entire design process and helps achieve consistency and cohesiveness throughout the entire website.

UI Design

A simple and easy to browse UI design gives users to book a trip without any frustrations. The users can book a trip to history searching by time period, location, or theme. Also, users can choose their preferences by filter and sorting options. Trip reviews and photos are provided to build brand trust with users.

High Fidelity Prototype

Usability Testing

Test Objectives

• To test the users' ease when navigating the website to complete a task

• To test the overall quality and the flow of the design

• To test how quickly the users can find and book a specific trip

Task 1
Find a “Renaissance (Italy) Trip” and book the trip on the checkout page

Task 2
Find a trip from Asia and save it to “Favorites”

Affinity Map

An affinity map was created to sort, prioritize, and rank the user testing feedback.

Key Takeaways

• All participants were able to complete the given tasks successfully

• All participants were confused with the interaction menu

• All participants stated that the filter and sorting were helpful to navigate

• All participants found it easy to process the checkout without any frustrations

• 4 out of 5 participants found the site easy to navigate

• 3 out of 5 participants were confused about what the photos represent - they suggested having more sightseeing photos rather than artworks

Next Step

• Make iterations based on the usability test/affinity map

• Increase the prototype functionality

• Conduct more usability testing

• Make further adjustments