

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 goal of this DesignLab project is to boost subscriptions for guidebooks and tours by creating an engaging web and mobile experience. Navigation should be clear and informative, ensuring users can easily access destination details on the go.
SOLUTION
-
Boost subscriptions by providing personalized tours and guidebooks.
-
Ensure clear, user-friendly webpage navigation.
-
Refine the landing page to showcase the brand’s identity and mission.
Design Process
EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TEST
Empathize
Research
After two years of strict border regulations due to COVID, many countries are gradually reopening to tourists. With a surge in tourism expected, this research aims to understand the information users seek and the new details they want in this post-pandemic travel era.
Research goals:
​
-
Identify key factors influencing trip planning decisions.
-
Understand travelers' concerns before traveling.
-
Investigate information specific to the current epidemic situation.
-
Analyze existing features for potential improvement.
User Interviews
To determine the features most important to users when choosing a destination or trip, I conducted phone interviews with questions like:
-
What information do you look for when choosing a destination?
-
What concerns or resources do you wish you had known before your trip?
Based on the user interviews, the following insights were gathered:
Save time and money
Features that offer clear 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 when cheaper options are available.
Transportation and Accessibility
Knowing if attractions are accessible by public transport is essential. Destinations without public transport options are often less desirable, as they limit travel experiences and increase the hassle of renting a car.
Better planning with daily costs
Travelers value knowing the overall expenses of a trip. Information about daily costs—covering transportation, food, attractions, and activities—helps users plan effectively.
​
Cash vs Card
As society moves towards cashless payments, users want to know whether cash or card is more commonly accepted at their destination. Information on the local currency is also helpful for preparation.
Things to do
Travelers primarily seek to experience what a destination offers. Users want to know about popular tourist attractions, local food, and events, but many are also interested in discovering hidden gems 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.
-
Discover new destinations through local recommendations for a more authentic experience.
User Needs
-
Find off-the-beaten-path locations and activities.
-
Access detailed destination information for a smooth and convenient travel experience.
Frustrations
-
Solo female travel may not be safe or practical for all destinations.
-
Limited public transportation to lesser-known locations.
-
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
-
Enjoy exciting activities and great food without worrying about expenses.
-
Create lasting memories from remarkable trips.
User Needs
-
Try new adventures and food unique to each destination.
-
Access all necessary information to create a well-rounded itinerary.
Frustrations
-
Lack of information about currency and payment methods.
-
Repetitive tourist attractions with no unique suggestions for places or activities.
-
Preference for personalized tour options over rigid, set schedules.
Competitive Analysis



I compared three well-known travel sites to identify key features for users. All sites highlight destination offerings and allow for customization based on specific needs, using user reviews and photos to promote destinations and activities.
​
However, I was surprised to find that general destination information, which users identified as essential in interviews, was not prominently featured. Instead, the focus was on itinerary suggestions with brief location summaries, likely reflecting the services the providers emphasize.
​
​
"Users' travel experiences are used to promote destinations and activities through customer reviews and photo memories."

Define
Defining the Problem
Based on my research, these sites tend to offer theme-based trips and fixed tours, limiting users' ability to customize their trips. To improve, I concluded that providing more detailed destination information and customizable options would benefit both users and the company.
"Suggesting a variety of itinerary plans to appeal to a larger target user group and create more pathways to introduce other app services."
Information Architecture
Wayfarer aimed to increase user subscriptions through their app. To achieve this, I focused on creating an accessible structure that effectively displays tour information, ultimately boosting subscription rates.


User Flow
This user flow illustrates the process for a user customizing the flights of a tour package. Given that customization is a frequently used feature, I chose to highlight this task. I considered the decisions the user would need to make and the actions required to complete the process.

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 face difficulty navigating the website
-
Observe if users can complete tasks effectively
-
Identify areas for improvement to enhance 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 on the mid-fidelity prototype. Here's a summary of the findings:
Findings
-
All users easily used the advanced search to find popular destinations.
-
One user noted the lack of a return option from the Venice page to search results.
-
Users mentioned the flight customization page didn’t navigate back to the flight section (a known limitation).
-
The sign-up page was praised for its simplicity.
-
Some users were unsure where to click for transportation info.
-
Two users found the "Where are you traveling from?" CTA unclear.
-
All users found the mobile site useful and were likely to subscribe.
Revisions
After usability testing, users found tasks easy to understand but noted some unclear features that disrupted navigation. I revised several screens to improve clarity but couldn't modify one feature due to Figma limitations—navigating back to a specific section on a different page.
Before

On this screen, I initially focused on providing a pathway back to the destination detail page for users to explore more features. However, after testing, I realized it would be more beneficial to also include a direct navigation option to the search screen for quicker access to other destinations.
Before

After

Before


To address confusion about accessing transportation details, I added a shadow effect to clickable icons and category titles for better navigation. Initially, I focused on allowing users to return to the destination detail page, but testing revealed the need for a direct path back to the search screen for quicker browsing.
After

After

Several users found the weather information too limited and suggested a search function for specific dates to better plan their trips. Additionally, more users prioritized drinking water safety over crowd levels.

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








Animated transitions create a cohesive design, enhancing user engagement. The mobile version features a sliding carousel for easy browsing. Users can explore destinations by most searched, most popular, or recent searches.
Animated Sign Up
Web Responsive Home Page
Destinations include ratings and descriptions, helping users assess trip options before exploring further. The design ensures quick access to information without opening multiple pages.
Advanced Search Tool
The advanced search tool reduces browsing time by directing users to their preferred page.
Search Recommendations with ratings
Destinations feature customer ratings and descriptions, providing users with valuable insights before exploring further. Ratings help users assess whether a destination is a suitable trip option.
With the search tool, users can:
-
Quickly navigate to their preferred destination page.
-
Discover new destinations through most searched, most popular, or recently searched categories.
-
Access relevant information without opening multiple pages.



Background Information and Pre-trip Preparations
The destination page provides essential trip information, helping users plan and immerse in new cultures. It includes general details like transportation, water safety, and weather, along with real-time updates on visa news and COVID-19 guidelines. For first-time travelers, "what not to do" tips help avoid common pitfalls. The page also highlights key recommendations, such as monthly events, local cuisine, and must-see attractions.



Recommended Routes Based on Current Location
In my preliminary research, many users cited accessible public transportation as a key factor in choosing a destination. This page offers suggested transport options for popular attractions, along with rental options for those visiting remote areas or traveling in groups. To simplify planning, nearby attractions are recommended based on the user's location, reducing search time.


Tour Reservation Options with Detailed Itinerary
For users who prefer a hassle-free experience, tour packages are available, categorized by budget and featuring detailed itineraries. A map highlights the destinations covered in each package.
Customizable Options for Specific Travel Details
To accommodate different travel needs, customizable options allow users to adjust accommodations or flights to match their preferences.



Photo Memories and Reviews
Customer reviews provide valuable insights, helping users make informed decisions. Additionally, a photo gallery showcasing past travelers' experiences offers a glimpse of what to expect and aids in trip planning.
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 categorizing festivals by month instead of specific dates.
-
Sign-Up Page Animation: Most users liked the animation on the sign-up page, feeling it fit well with the app's overall visual theme.
-
Overall Usefulness: All users found the app highly useful, especially for its detailed information and customizable features.
​
​
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 started as a 10-hour UI challenge during my DesignLab bootcamp. To expand on it, I rebuilt the app with a stronger UX focus, allowing me to gain a deeper understanding of the design process—from research to the final prototype.
​
​
1. Individual Obstacles Can Be Solutions for All
In the original version, I included features inspired by common elements found in other travel websites. However, through user interviews, I discovered less common but valuable features, like the weather function, which one user specifically requested. After adding it, many users appreciated not needing to visit a separate site for weather information.
2. Multiple Testing Reduces Iteration Time
Testing the app in both mid-fidelity and high-fidelity versions was incredibly useful, as it helped me quickly identify design issues and refine the final product. This iterative process also revealed new problems I hadn’t initially noticed.
3. Small Details Can Lead to Bigger Functions
My initial design was simple, with just a home page and search function for exploring destinations. User feedback highlighted the need for additional features that would save time and provide more flexibility. As a result, I added a transportation page with suggested routes and nearby attractions, along with customizable tour packages.
Future Improvements
If I were to redo the project, I would include:
​
-
Tour Guide Options: Allow users to book a tour guide for a more personalized experience.
-
"Surprise Me" CTA: A feature that suggests interest-based tours based on user preferences.
For future user testing, I would create a more detailed questionnaire to gather deeper insights for further improvements.