UX Design | Travel | Desktop + Mobile
GENIE Time Travel Booking
End-to-end User Experience Design
GENIE is a time travel tourism company that wants to create a brand and e-commerce website to sell time travel packages to different times in the past.
MY ROLE
I was end-to-end UX designer of the project.
PROBLEM
I had to rely on assumptions based on travel booking websites because time travel doesn’t exist yet.
GOAL
I wanted to know travelers’ needs so that I can offer them a pleasant and efficient user experience without any confusion and frustration
TIMELINE
RESEARCH
OBJECTIVES
Learn about the target audience and demographics
Discover what travelers find important in using existing booking websites
Understand the current obstacles of existing booking websites and the ways to overcome
PRIMARY RESEARCH
User interviews to deep dive into travelers’ behaviours, needs and pain points.
Participants
Interviews all conducted in-person with 3 participants who;
• enjoy traveling and use online travel booking often
• are open-minded towards new adventures and experiences
• are curious about exploring cultures around the world
• are interested in the concept of time travel
• are interested in history and/or historical sites
Interview Guide
Interview script and questions
I transcribed my interviews to be able to see the big picture for synthesizing my findings. Then, based on the common pattern I got from interviews, I created a sample of user persona
Having personas helped me define the primary needs/goals of the most important user groups and focus my design on them. For example, in this persona sample, I noticed that I could meet Emma’s goals and needs by prioritizing the most affordable trip options in the explore section and giving detailed information about the destination.
Summary of Findings
Based on PRIMARY RESEARCH, customers would like to…;
Expect detailed information about the concept of time travel, how it will work, and details of the specific travel they want to book
See verified reviews
Search by dates first and sort by cheapest option first
Have more flexible travel options while searching instead of purchasing bundles or packages
SECONDARY RESEARCH
Competitive research to see what other existing travel booking websites meet users’ needs, what they offer and if it is working or not
GENIE has no direct competitors since it’s a hypothetical non- existent booking website for now. For that reason, I conducted my secondary research with existing travel booking websites.
Summary of Findings
Based on SECONDARY RESEARCH, users want a travel booking website to;
Have modern-looking UI design and properly working tools
Show popular destinations in the explore section
Include price comparison with other websites
Have detailed reviews, possibly including photos/videos
2. DEFINE
DELIVERABLES
CARD SORTING
I created an open card sort through Optimal Workshop software.
8 participants completed my study, created a total of 30 categories, with a median of 4 categories.
My participants grouped items in the card either according to time periods or types of event/activity. It helped me to develop search options for users - search by time period, by interest, by place and by keyword.
SITEMAP
Based on card sorting experience, I created proposed screens/pages on my sitemap to allow users navigate easily within the site.
TASK FLOW
I sketched out the task flow for a new user who wants to book a time travel through GENIE and isn’t familiar with the concept and how it works.
For details, visit:
3. DESIGN
Based on research findings, card sorting, sitemap and user flow, I sketched out pages necessary to complete a task and created wireframes.
I worked on branding and UI design including moodboard, brand logo, style tile and icon sets.
WIREFRAMES
SKETCHES - HOMEPAGE
Based on previous research and design processes, I understood that (1) getting information about the concept of time travel, (2) being easily able to search for trips and (3) explore both most popular and most affordable deals are important for users to see on the homepage. So I prioritized these must-have sections and sketched out the homepage.
MID-FIDELITY WIREFRAMES
I digitized my sketches considering necessary sections and their order of priority.
Homepage
Search Results Page
Product Page
RESPONSIVE WIREFRAMES - HOMEPAGE
Desktop
Tablet
Mobile
HIGH-FIDELITY WIREFRAMES
I created high-fidelity wireframes as close to the finished product as possible to be able to conduct a usability test later. I created all other necessary pages for the traveler to search for a trip and complete a booking.
Homepage
Search Results Page
Product Page
UI DESIGN
MOODBOARD
As in the concept of time travel tourism, I brought inspiration at the intersection between past and present, historical and modern looking UI features. I got references from old newspapers and antique and vintage pieces for the historical part. Then, I combined them with images representing modern times, such as continuous one-line drawing, minimalistic abstract graphics, and a trendy pastel color palette.
BRAND LOGO
By sticking with the mood board and the entire brand identity, I came up with four concepts that are (1) time turner necklace, (2) spiral path to past, (3) black hole, and (4) distorted/melted time. First, I sketched out my ideas and then iterated on 3 of them I liked the most. Similar to the mood board, I reflected on the concept of past time combined with a modern UI look such as line drawing and graphic presentation.
STYLE TILE
I aim to combine old and new UI styles, consistent with the entire brand identity.
5. TEST
-
• Evaluate overall usability and user interaction of the website in terms of navigation, searching, filtering, and sorting
• Understand confusing and/or missing parts as well as pain points
• Observe whether users have difficulty interacting with the website when getting informed, searching, browsing through results, filtering, and sorting.
-
Mid-fidelity prototype for Genie Time Travel desktop website.
-
I tested my prototype with 1 user in-person, and 2 others online through Zoom.
-
Number of Participants: 3
Age Range: Young Adults (25-35)
Personality: Frequent travelers, time travel enthusiasts, explorers, and curious minds about history
-
I recruited participants through my contact list and social media channels.
TASKS
Task #1: Getting informed about the concept of time travel as well as safety procedures.
Task #2: Searching for a particular trip to Uruk by keyword through using open-ended search bar.
Task #3: Searching for other trips in the category of ‘Art/Architecture’ through using by interest dropdown menu.
SUMMARY OF SYNTHESIS
I analyzed the findings of usability testing to see if there were common comments/feedback I received from 2 or more participants
PRIORITY MATRIX AND REVISIONS
Based on synthesis of user testing, I identified improvements needed for Homepage and ‘Search Results’ Page.
Following that, I created a priority matrix and categorized improvements according to user value and time & effort.
Then, I worked on revisions of three prior improvements with high user value and low time&effort
CHALLENGES, LESSONS LEARNED AND INSIGHTS
Designing user interface and branding for the company that can be modern and historical at the same time was challenging. But it was the stage that I enjoyed the most while challenging myself to reflect a modern technology with a link to the past.
Working on a time travel booking platform taught me how to work on any innovative environment, trying to create things that have never existed before. So I believe lessons learned from this challenge as well.
In terms of user research, I was supposed to understand users needs and pain points without mentioning them time travel. I tried to be as creative as possible to make them think about current experiences and problems when they book a trip online or travel in ordinary ways.
I would have started recruiting my users for both research and testing way earlier not to behind of my schedule. I completed the project timely as I anticipated, but I had to work harder and quicker for stages after user research.