Team

• Brian Powers (UX/UI Designer)

• Busola Babaloa (UX/UI Designer)

My Role

• Lead UX/UI Designer

Process

• Discover

• Define

• Design

• Deliver

Deliverables

• 1st Usability Test

• Survey

• Competitive Analysis

• Persona

• Journey Map

• HMW Statements

• Open Card Sorting

• Tree Testing

• Site Map

• User Flows

• Sketches

• Design System

• 2nd Usability Testing

• Wireframes + Prototype

Duration

• 10 Weeks

Tools

• Figma

• Figjam

• Optimal Workshop

• Maze

• Excel

• Zoom

The Local Tongue is a travel guide started by Jessica Rigg in 2021, after surviving cancer and traveling the world to explore local food and drink recommendations from locals.

The company reached out to our team to redesign elements of their website to better showcase their Unique Selling Proposition of providing non-generic recommendations, attract new travelers, and monetize the site.

The Local Tongue has a strong web designer, but they were looking to improve their understanding of UI/UX, specifically information architecture, as they have a large amount of content to manage. They were in the process of launching their next version of the site when they realized they did not scope the work properly at the start.

Background

The Challenge

Our team was tasked with improving the Local Tongue website to attract a new audience, simplify content discovery and elevate brand identity. The goal was to provide monetization opportunities and establish brand partnerships. After evaluating the client's goals, the team developed a How might we statement through brainstorming.

HMW make discovering where to travel easier and more exciting and reduces the time it takes for users to plan their trip?

The Solution

After 10 weeks, our team of 3 knowledgeable UX/UI Designers came up with 4 solutions so that users can view Local Tongue’s professional guides in an efficient and digestible way and enjoy researching local places. 

Design Process

What were the design processes behind our project?

Discover

• Usability Testing on TLT’s website

• Survey

• Affinity Map

• Competitive + Comparative Analysis

Define

• Personas

• Journey Maps

• Open Card Sorting

• Tree Testing

• Site Map

• User/Task Flows

• Sketches

• Design System

• Wireframes (Mid-Fidelity)

• Usability Testing

• High-Fidelity Prototype

Discover

1st Usability Testing (On TLT’s current website)

To improve the Local Tongue's (TLT) mobile website, we conducted research with 5 users who enjoy traveling and discovering local places to eat.

Our objective was to understand their behaviors and experiences using the website. We assigned three tasks to identify pain points, including exploring the homepage, finding a specific restaurant venue, and locating the About page. We then consolidated our findings into an affinity map to identify key areas to focus on for improvement.

The users reported that the website was lacking in visual elements and was text-heavy, making it a flat experience.

Discover

Survey

Next, to gain further insights into user behavior, our team sent out surveys to understand users' travel planning and navigation habits and their social media usage during trips. TLT's initial target audience was industry experts, but they wanted to expand to attract more users. To this end, we surveyed 41 discerning travelers who are passionate about food and drink. Through qualitative coding, we gained valuable insights into what discerning travelers look for when planning their travels.

Our team also sent surveys to TLT's end users through the client, as some of them may also belong to the discerning travelers’ group. 12 TLT users were surveyed. The key insights from both the discerning travelers and TLT's end users were similar, but there were some differences. We aimed to synthesize these insights to improve our design. The results showed that TLT's end users rely less on social media and prefer recommendations from professional chefs and reliable restaurant websites such as the Michelin guide, Eater, Pellegrino 50 best restaurants, Trip Advisor, etc. However, both user groups placed a high value on discovering authentic local places during their travels.

Discover

Competitive Analysis

Before moving to the define stage, our team conducted extensive research on both direct and indirect competitors. We examined 8 competitors, including Airbnb, Exceptional Alien, Eater, and The Infatuation. These four were the major ones that we wanted to learn from and incorporate into our design. We analyzed each of their screens, key features, and favorite interactions, and brainstormed how to apply these to our design.

• Options to filter search

• Mobile Friendly

• Easy Navigation

Airbnb

Exceptional Alien

• Intentional/ Purposeful Homepage

• Membership Login

Eater

• Detailed Venue Descriptions

• Map Integration

The Infatuation

• Detailed Venue Descriptions

• Intentional/ Purposeful Homepage

• Options to Filter Search

• Easy Navigation

• Membership Login

Define

Persona

After our initial research, I synthesized the key insights to create the persona of "Traveling Taylor." This persona guided us in our design process and kept us focused on solving users' pain points and meeting TLT's goals. Traveling Taylor represents a person traveling to Istanbul, Turkey for work, looking to explore the city and find local food spots, as well as places for business lunches with colleagues.

Define

Journey Map

With the Persona of Traveling Taylor, I generated Taylor's journey as he is looking for recommendations to eat and drink on TLT's website to effectively find Taylor's specific pain points.

Define

HMW Statements

Next, as a team, we developed HMW statements that we refined together. We also opened a workshop with our client to further understand the client's vision of the next version of TLT’s website. 

The solutions

• Save guides and venues to favorites

• Share guides & venues

• Membership

1.“HMW creates an exciting and personalized experience when discovering new places?”

2. “HMW improve the navigation of the website?”

The solutions

• Reduce time on navigating the site

• Refine site map

• Quick access to information

Define

Information Architecture- Open Card Sorting

We tested TLT's website navigation by conducting an open card sorting with 14 participants. The aim was to understand if the initial sitemap with the main categories of Eat, Drink, and Shop and 15 sub-categories made sense to users. Participants were given all main categories, sub-categories, and second sub-categories to freely sort and organize information. After the test, we gathered feedback from the participants about their experience.

We analyzed the results of our open card sort and found that users were overwhelmed with the number of categories provided. After our open card sort, we came together as a team to update TLT's existing sitemap with the applied changes based on user pain points on locating information on the website. 

Define

Information Architecture- Tree Testing

To finalize TLT’s updated sitemap we built together as a team, we conducted tree testing with 11 users. We gave our users four tasks as part of the test.

During user testing, the "wine tasting tour" was not found easily under TLT's existing categorization. To improve navigation, a sub-category "Programs" was added under the "Drink" category, but users still searched for it under the "Alcohol" section, by clicking on "Wine."

Define

Sitemap

Next, we updated TLT's sitemap based on findings from open card sorting and tree testing. The changes aimed to improve users’ ability to locate information on the website. The new sitemap included a fixed navigation bar for easy access to important features.

In the open card sorting, users grouped alcohol programs as experiences, leading to the addition of the "Experience" category as a filter on the destination page for these programs. Desserts and confectioneries were also grouped together and street food was highlighted as its own category. Alcohol was separated from other drinks like coffee and tea. These findings helped to update and improve the sitemap on the destination page.

Design

Sketches

Before we began building our mid-fidelity wireframes, we came up with sketches of user flow and highlighted solutions and a design system that gave us a clear vision and concept of the Local Tongue.

A fixed search bar was placed at the top of the page for quick access, and destination cards were created to scroll and provide more information about the destination.

Design

Design System

I was part of the team that created and directed TLT's design system and wireframes, ensuring the font, color scheme, and accessibility were kept in mind while making design decisions. The main font was kept the same and font sizes were increased for accessibility. The primary color remained Moss green, with secondary and accent colors updated to orange to add warmth to the website. Accessibility was further ensured through an accessibility test on all colors.

Define

User Flows

Finally, our team felt confident in creating user flows. We created five task flows to help Traveling Taylor plan his trip to Istanbul and get recommendations from a professional expert.

Design

2nd Usability Testing (mid-fi prototype)

To begin the usability testing, our team brainstormed together to come up with this scenario.

You are traveling to Istanbul, Turkey in 3 weeks for a business meeting. Since it is your first time visiting Istanbul, you want to find a good and authentic restaurant to go solo and also enjoy with colleagues.

Five users were given 8 tasks to test their experience with our mid-fi wireframes and all completed the tasks successfully with one exception. Despite the single-click failure, we received positive feedback and insights from the users.

The Positive Key Insights

The first pain point that users found was when they were finding guides to Istanbul, Turkey on the destination’s page.

Most users went straight to the search bar to find Turkey, Istanbul because they already knew where they were headed, however, if they wanted to explore, they would click the destination card first and then go to the navigation menu.

While they were in the search bar, They preferred to search by city or country rather than clicking on region first, and desired a shortcut or city names listed in alphabetical order for easier navigation.

Next, on the Istanbul page, we wanted users to find the filter bar and apply barbecue, bakery goods, coffee, wine program, local specialties, and casual dining filters to filter out their search.

Some users were unable to find the filter button because they were not located on top or live in the search bar.

Users found the filter categories on the website to be overwhelming, with too many lists to go through and no shortcuts. Some users even missed categories. Additionally, they could not find the "wine program" under the "experience" section and expected it to be under the "drink" section.

Based on user feedback, key takeaways were moved to the top of the expert page to allow for quicker access without having to read the entire article. The visual design of the website received positive feedback as users found it simple and easy to understand.

Deliver

High-fi Home Screen + Prototype

Our team consolidated usability test data and finalized the design solution by iterating screens. The final high-fidelity prototype is ready for showcase.

Next Steps

• Refine the "perfect for" list to remove duplicates.

• Expand membership features by providing users distinct features like "my trips" or "my experiences" & optimizing space to monetize in the future.

• Explore Experiences - adding more categories and opportunities to connect users with potential brand sponsors.

The End

To know more about my work or just to say Hi, email me at eunmily0922@gmail.com

Discover

1.

Key Insights

Key findings from discerning travelers

1. Found the homepage to be confusing and didn’t understand the purpose of the site/business.

2. Wanted to be able to filter their search results.

3. Wanted more specific details and breakdowns from the destination page.

4. Found it difficult to understand and process the content on the expert page.

5. Could not locate TLT’s about page.

• “I wish there are filters, icons, and keywords to quickly find the information that I want”