Project Overview
ROLE
UI/UX Designer
TIME
10 hours challege
TASK
DesignLab project to create a web responsive design
TOOLS
Figma
Figma Animation
CHALLENGE
The main goal is to increase subscriptions for guidebooks and tours by creating an engaging web and mobile experience. Navigation should be straightforward and informative, particularly allowing users to access destination information while on the move via the mobile app.
SOLUTION
-
Increase subscriptions by offering customized tours and guidebooks.
-
Make webpage navigation clear and appealing to users.
-
Enhance the landing page to better highlight the brand’s identity and mission.
Design Process
EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TEST
Empathize
Research
After two years of strict border-crossing regulations due to COVID, some countries are slowly reopening to tourists. A surge in tourism is expected as people are more likely than ever to satisfy their travel cravings. In this research, I aimed to understand what information users seek and what new details they would want to know in this new era of epidemic travel.
Research goals:
​
-
Identify key factors that influence trip planning decisions.
-
Understand the concerns travelers have prior to traveling.
-
Investigate information that is unique to the current epidemic situation.
-
Analyze existing features that could be improved or refined.
User Interviews
To understand the features that are important for users when deciding on a destination or trip, I conducted several phone interviews and asked the following questions:
-
What information do you look for when choosing a destination?
-
What concerns or resources do you wish you had known prior to your trip?
Based on the user interviews, the following insights were gathered:
Save time and money
Features that provide clearly stated pricing comparisons for flights, hotels, or packages by date help users save time and make informed decisions. Users are more likely to be flexible with travel dates if they find cheaper options.
Transportation and Accessibility
Users find it essential to know whether attractions are accessible via public transportation or the best way to get there. Destinations without public transport options are often seen as less desirable, as they limit the travel experience and increase the hassle of renting a car.
Better planning with daily costs
Travelers are money-conscious, and knowing the overall expenses of a trip is a key deciding factor. Information about daily costs, including transportation, food, attractions, and additional activities, is crucial for travelers to plan effectively.
​
Cash vs Card
As society becomes increasingly cashless, users find it essential to know whether cash or card-based payments are more commonly accepted at their travel destination. Additionally, information about the local currency is a helpful feature that users appreciate when preparing for their trip.
Things to do
The primary reason people travel is to experience what a destination has to offer. Users want to know about popular tourist attractions, local food, and events at their chosen location. Many travelers are also interested in exploring beyond the well-known tourist spots, seeking out hidden gems that are known only to locals.
User Personas
Based on my research, I created two personas that reflect the general opinions of users and current travel trends, highlighting their varying interests and frustrations.
Clara
Solo-traveling enthusiast
"I love exploring new places and interacting with the local people. There's so much more to experience and learn through the people who live there!"
Motivations
-
Promote solo traveling for female travelers.
-
Explore new destinations based on recommendations from locals for a more authentic experience.
User Needs
-
Discover more off-the-beaten-path locations and activities.
-
Access comprehensive destination information to ensure smooth and convenient travel.
Frustrations
-
Solo female travel may not be safe or practical for every destination.
-
Limited public transportation options to lesser-known locations.
-
Frustration with hidden fees and unclear pricing comparisons on travel websites.
Mac
Life of the party
"What's better than unwinding from months of work stress with good food, fun activities, and exploring new places with your friends?"
Motivations
-
Experience exciting activities and good food without holding back on expenses.
-
Building fond memories of remarkable trips.
User Needs
-
Experience new adventures and food unique to the destination.
-
Access necessary information about the location to create a complete itinerary.
Frustrations
-
Lack of information about currency and available payment methods.
-
Repetitive tourist attractions and activities, with no unique suggestions for places or things to try.
-
Tours have set schedules; prefers more personalized options.
Competitive Analysis
I compared three well-known travel sites to identify key features that are useful to users. All three sites have similar components that highlight the destination's offerings and increase customization for specific needs. Users' travel experiences are used to promote destinations and activities through customer reviews and photo memories.
Surprisingly, I did not immediately notice the general destination information that participants in my user interviews stated as must-haves. Instead, all three competitors seem to place more emphasis on itinerary suggestions and opted for a short summary of the location. This may differ based on the services the providers are focusing on.
​
​
"Users' travel experiences are used to promote destinations and activities through customer reviews and photo memories."
Define
Defining the Problem
Based on my research, similar travel websites highlight theme-based trips tailored to the different travel styles of users. A summary of the destination is usually provided; however, the focus of the sites ranges from promoting fixed tours to destination guidebooks. As such, existing travel websites often only offer information connected specifically to the tours or guidebooks, limiting the users' ability to customize their own trip. Thus, the general information that users identified as important is not always displayed on these travel sites. After this observation, I concluded that it would be more beneficial for both the users and the company if the site provided detailed information about the destination and included customizable features for users who may not want to follow a fixed itinerary.
"Suggesting a variety of itinerary plans to appeal to a larger target user group and create more pathways to introduce other services of the app."
Information Architecture
Wayfarer wanted to increase user subscriptions through their app. With this goal in mind, I aimed to create an overall structure that would be accessible to users and effective in displaying tour information to boost subscription rates.
User Flow
This user flow shows the path of a user who wants to customize the flights of a tour package. Since customization is a feature that would be used frequently, I decided to depict the process. I considered the decisions the user would need to make and the actions they might have to take to complete the task.
Testing Usability
Overview
To better understand how users would interact with my design, I recruited participants to test the mid-fidelity prototype.
Objective:
-
Test if users have difficulty navigating the website freely
-
Observe if users can carry out tasks effectively
-
Take note of areas that can be improved for better usability and efficiency
Tasks:
-
Use the Advanced Search tool to find the most popular destinations
"You have a long vacation coming up and want to go on a trip but have no idea where to go. How would you use the search bar?"
-
Learn more about the transportation details on the general information page for a destination
"You want to know how accessible public transportation is in Venice and if you can easily get to popular attractions with it."
-
Select a specific tour package for a destination and customize flight information
"Imagine you are going on a trip to Venice and have chosen a medium-budget tour. You want to fly Thai Airways at an affordable price. How would you do that?"
Usability Testing 1
I conducted the first round of usability testing to gather feedback for the mid-fidelity prototype that I created. Based on the results of the testing, here is a summary of the findings:
Findings
-
All users were able to easily use the advanced search feature to navigate to the most popular destinations on the website.
-
One user mentioned the lack of a navigation feature to return from the Venice page to the most popular destination result page.
-
Users noted that the flight customization page did not directly navigate back to the flight section (a limitation I was aware of prior to the testing).
-
Users appreciated the simplicity and straightforwardness of the sign-up page.
-
Some users were confused about where to click for the transportation information.
-
Two users expressed that the "where are you traveling from" CTA was a bit obscure.
-
All users said they found the mobile site useful and were likely to subscribe to the service.
​
​
Revisions
After the usability testing, users indicated that the tasks were easy to understand. However, some features were a bit unclear, making the flow of the pathway confusing. I revised the following screens to create clearer indications for the features. However, one feature I was unable to revise, due to the limitations of the Figma application, was the ability to navigate back to a specific section on a different page.
Before
In this particular screen, I initially only thought about providing a pathway back to the destination detail page so users could explore other features on the screen. However, after the testing, I realized it would be more beneficial to allow users to navigate back to the search screen as well, for those looking for a quicker way to view other destinations.
Before
After
Before
Users mentioned that it was unclear where they were supposed to click to access more information about transportation. As a result, I decided to add a shadow effect to the icons to indicate that they are clickable. I also added category titles to make it easier for users to navigate.
After
After
Several users expressed that the weather information seemed too limited. In short, a function that allows them to freely search for specific dates would be more useful for planning their travels. Additionally, more users preferred knowing about the safety of drinking water rather than how crowded the destination is.
UI Design
Logo
Colors
Buttons
Typography
Primary
Secondary
Neutrals
Normal
Hover
Disabled
Body 1
Inter 16px Regular
Body 2
Inter 14px Regular
Body 3
Inter 12px Regular
Body 4
Inter 10px Medium
Body 5
Inter 10px Regular
Body 6
Inter 7px Medium
Body 7
Inter 7px Regular
Mobile Version
The font INTER was used in varying weights ranging from Regular, Semi Bold, Medium, to Bold for botht the mobile and webpage version of the application.
Webpage Version
Header 1
Inter 50px Bold
Header 2
Inter 25px Bold
Header 3
Inter 18px Semi Bold
Header 4
Inter 16px Semi Bold
Header 5
Inter 14px Semi Bold
Header 1
Inter 120px Bold
Header 2
Inter 80px Bold
Header 3
Inter 70px Semi Bold
Header 4
Inter 50px Semi Bold
Header 5
Inter 45px Semi Bold
Header 6
Inter 40px Semi Bold
Body 1
Inter 50px Regular
Body 2
Inter 45px Regular
Body 3
Inter 30px Regular
Body 4
Inter 20px Regular
Body 5
Inter 18px Regular
Final Screen
The animated transitions help create a cohesive theme throughout the design, guiding users through a visual journey and making the app more enticing to sign up for.
Animated Sign Up
Web Responsive Home Page
Users can navigate the main pages based on the type of destination they are looking for. To enhance accessibility for users on the go, the mobile version features a sliding carousel, making browsing easier. The design has been adapted for efficiency on smaller screens.
Advanced Search Tool
The advanced search tool minimizes browsing time by taking users directly to their preferred page.
Search Recommendations with ratings
Destinations include customer ratings and descriptions, offering users helpful information before they decide to explore the page further. Ratings help users determine if a destination is a potential trip option.
With the search tool users are able to -
-
Get ideas of new destinations by searching for most search destinations, most popular, or recently searched categories.
-
Quickly access the destination they are looking for without needing to open multiple pages.
Background Information and Pre-trip Preparations
The main goal of any trip is to engage in various activities and experience new cultures. To support this, the destination page includes essential information that users can review before their trip. This includes general details such as transportation, water safety, and weather, as well as more specific, current updates like visa news and COVID-19 guidelines. For first-time travelers, tips on "what not to do" in a given country can help prevent unnecessary issues. The page also features common recommendations, including monthly events, food, and must-see attractions.
Recommended Routes Based on Current Location
In my preliminary research, many users mentioned accessible public transportation as a key factor in choosing a destination. On this page, users can view suggested transportation methods to reach popular attractions. For those planning to visit more remote locations or traveling in larger groups, rental options are also provided. To make searching easier, attractions near the user's current location are suggested, minimizing the time spent searching for things to do.
Tour Reservation Options with Detailed Itinerary
For users who prefer not to plan everything themselves, tour packages are available. These packages are categorized by budget and include detailed itineraries, making it easier for users to select the most suitable plan. A map is also included, showing the destinations users will visit during their trip.
Customizable Options for Specific Travel Details
Recognizing that every traveler has unique needs, customizable options are provided within the tour packages. Users can modify accommodations or flights to better align with their preferences.
Photo Memories and Reviews
Customer reviews play a significant role in influencing user decisions. A review section has been added to offer users additional reference points for choosing a destination. To further enrich the experience, photo memories from previous travelers are included, giving users a better sense of what to expect and helping them plan activities during their trip.
Usability Testing 2
After doing some revisions based on the first user testing, I showed the final prototype to users for a second round of testing. Overall, users find the visual and information features suitable and enticing. All users said that the visual hierarchy was clear and helpful in the accessibility.
Findings
​​
-
Festival Page: One user suggested adding a festival page categorized by months instead of specific dates.
-
Sign-Up Page Animation: Most users liked the animation on the sign-up page, finding it well-suited to the overall visual theme of the application.
-
Overall Usefulness: All users expressed that they found the app highly useful, particularly for its in-depth information and customizable functions.
​
​
​
Responsive Renditions
The original goal of the project was to create a web-responsive site for a travel website. I first designed the desktop version of the site and later created the mobile version.
Iphone
Macbook
Learning Outcomes
This project began as a 10-hour UI challenge during my DesignLab bootcamp. To expand on it, I decided to rebuild the app using the same prompt but with a stronger focus on UX. This decision allowed me to learn more about the entire design process—from research to the final prototype.
​
1. Individual Obstacles Can Be Solutions for All
In the original version of the application, I added functions I thought would be useful, based on common features seen in other travel websites. However, through user interviews, I learned about features that are less commonly found but still enhance the user experience. For example, the weather feature was something one user specifically mentioned. After incorporating it, many users appreciated not needing to visit a separate site for such information.
2. Multiple Testing Reduces Iteration Time
Testing the app in both its mid-fidelity and high-fidelity forms was incredibly valuable. It allowed me to quickly identify issues and glitches in the design, giving me time to refine the final version. This iterative process also helped me uncover new problems that I hadn’t noticed before.
3. Small Details Can Lead to Bigger Functions
My initial design was simple, with just a home page and a search function to explore destinations. However, user feedback revealed that certain features were crucial to enhancing their experience. While the design had basic information, users wanted functionalities that would make their trips easier and save them research time. They also wanted flexibility in customizing their plans. As a result, I added features like a transportation page with suggested travel routes and nearby attractions, as well as customizable tour package options.
Future Improvements
If I were to redo this project, I would include additional features such as:
​
-
Tour Guide Options: Providing users with the option to book a tour guide for a more personalized experience.
-
"Surprise Me" CTA: A feature that suggests interest-specific tours based on user preferences.
Regarding user testing, I would create a more detailed questionnaire to capture users' opinions in greater depth, which would provide more specific insights for further improvements.