PhrasePack Case Study

Overview

PhrasePack is designed to help travelers confidently navigate foreign countries with essential phrases, intuitive categories, and quick-access features—all tailored to real-life scenarios. Whether you’re asking for directions, ordering a meal, or checking into a hotel, PhrasePack is your pocket-sized travel assistant, ensuring that language is never a barrier to adventure.

My Role:

UX/UI Designer, UX Researcher

Tools Used:

Figma, Webflow

Duration:

4 weeks

Test Prototype

High-fidelity login screen for PhrasePack.

Problem

Traveling to a foreign country can come with the challenge of overcoming language barriers, making essential interactions difficult. Many existing translation tools fall short in key areas, leaving travelers without a reliable solution when they need it most. Key challenges include:

Difficulty communicating in common travel scenarios like asking for directions, ordering food, or seeking help.
Existing translation tools can be complex, slow, or require internet access, limiting their reliability.
A lack of quick-access, contextual phrases makes real-time conversations frustrating.

Project Goal

The goal of this project is to design an intuitive and user-friendly mobile interface that equips travelers with the essential language tools needed to navigate foreign countries confidently in any situation.

Research

User Interviews

Three user interviews with target users were conducted to explore their experiences and challenges. Interviewees included: a solo traveler, a business traveler, and a first-time traveler.

Examples of Key Questions

What are your biggest struggles when traveling to a country where you don’t know the language?
How do you currently prepare for language barriers before a trip?
In what situations have you needed immediate language help?
What do you value most in a travel app or tool?

Insights & Pain Points

Through the user interviews, I identified key insights and pain points that target users face while traveling.

Travelers may encounter situations where they don’t have reliable internet access, such as in remote areas or during transit.
Users emphasized the lack of time to learn a language fully before a trip. They expressed a need for an app that provides curated, essential phrases instead of long grammar lessons or vocabulary lists.
Users may struggle to pronounce phrases correctly and feel misunderstood or embarrassed when trying to communicate. They want clear audio guides from native speakers to improve their confidence.
Users want a dedicated section for critical phrases to handle emergencies, such as “I need help,” “Call a doctor,” or “Where is the embassy?” Accessibility and clarity should be prioritized.

Convenience

“I really don’t need to learn an entire language. I just need to know how to order food or ask for things.”

Pronunciation Assistance

“Even when I know the words, I’m not sure if I’m saying them correctly.”

Emergencies

“If I’m in trouble, I won’t have time to search for what I need. I want it to be right there.”

Offline Mode

“There’s situations where I can’t rely on Wi-Fi like when I’m on an overnight bus and translation apps are useless without it.”

User Persona

Using the defined goals and key insights gathered, a user persona was crafted to represent the target audience, ensuring design decisions align with their needs and challenges.

Sam Nevara

Age:

Family:

Single

Location:

Los Angeles, CA

Education:

California Institute of Arts

Occupation:

Freelance Photographer

Travel Style:

Solo Backpacker

Bio

Sam is an avid traveler who loves exploring new cultures and taking incredible photographs all over the world but often struggles with language barriers. As a detail-oriented and organized professional, she likes to plan trips thoroughly but still enjoy spontaneity.

Goals

Communicate effectively in local markets, restaurants, and public transportation.
Gain confidence in pronunciation to avoid misunderstandings.
Find language solutions that work offline.

Frustrations

Struggles with pronunciation and feels embarrassed when speaking to locals.
Often visits rural or remote areas with no internet access.
Finds traditional language apps time-consuming and not convenient.

Competitive Analysis

To better understand what language and travel apps are available, a competitor analysis was conducted to identify strengths, weaknesses, and opportunities.

What are competitors doing well?
Where do existing solutions fall short?
How can PhrasePack stand out?

Key Takeaways for PhrasePack

These insights along with previous user research helped define the essential features that would make PhrasePack more effective and user-friendly.

Bite-sized, easily accessible essential phrases for travel.
Emergency situation section that is accessible when offline.
Audio features for pronunciation purposes.

Design

Wireframes

To kick off the design phase, I sketched low-fidelity wireframes to explore key layouts and user flows, ensuring the design prioritized intuitiveness and simplicity.
These initial sketches were then refined into the final wireframes as shown in the examples below. This iterative process allowed me to validate design decisions early and make adjustments based on user feedback.

User Feedback

After reviewing the wireframes with target users, I gathered feedback to refine and improve the design even further.

Key User Feedback

Clarity & Readability – Some text and labels were too small making them harder to read.
Cluttered Layout – Some users felt that the overall layout felt cluttered.

Style Guide

A style guide was created to ensure consistency and a cohesive visual identity. This guide defined PhrasePack’s typography, colors, buttons, iconography, and spacing. This foundation streamlined the high-fidelity design process, maintaining usability and brand cohesion across the platform.

High-Fidelity Designs

Based on feedback from previously interviewed users, I began designing the first iteration of the high-fidelity prototype. Throughout this process, I created a mood board by drawing inspiration from various design platforms, including Dribbble and Behance, to refine the visual and functional aspects of the app.

After completing the initial draft of the high-fidelity design, I conducted another round of user feedback sessions. Some questions included:

Is there anything missing from the design that you expected to see or any features you would like to have?
How do you feel about the overall design? Is there anything that is visually appealing or unappealing to you?
How intuitive did you find the navigation? Were there any points where you felt lost or unsure of what to do next?

Key Insights from User Feedback

“The color palette feels too masculine.” PhrasePack’s initial color scheme was a crimson red and gold combination.
“Some text, especially the phrases, is difficult to read.”
“The cards feel a bit cramped.”
“The categories are intuitive, but could you add examples of what’s included in each one?”

Using this feedback, I implemented several design improvements to enhance usability, readability, and visual appeal. Below is the final result, reflecting these iterations.

Prototype

With the high-fidelity designs finalized, the next step was to bring them to life by creating an interactive prototype. This allowed for realistic user interactions, enabling usability testing and refining the experience before development. This was achieved in Figma through:

Building reusable components to streamline prototyping and maintain consistency.
Designing intuitive user flows based on research insights.
Refining interactions through multiple iterations to enhance usability.

View Prototype

Prototype Demo

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Test

Usability Testing

After finishing the prototype, a round of usability testing was conducted to validate improvements and identify any remaining pain points. Users were asked to navigate the app, complete key tasks, and provide feedback on clarity, accessibility, and overall usability. This round focused on testing the effectiveness of the refined color palette, improved readability, and enhanced category organization.

Key Insights

Navigation Simplicity Matters – Users found the app intuitive overall but suggested that category labels and icons could be more visually distinct for quicker recognition.
Readability Concerns – Some users struggled with text legibility, especially within dropdown translations. Adjustments to font size, contrast, and spacing were recommended.
Favorites & Quick Access Were Highly Valued – The ability to save frequently used phrases and access them quickly was one of the most praised features, confirming its importance for real-world usability.

Potential Impact of PhrasePack

Empower Travelers with Confidence

Users will be able to communicate essential phrases effortlessly, reducing anxiety and enhancing their overall travel experience.

Break Down Language Barriers

Users can have smoother interactions with locals, fostering better connections and cultural appreciation.

Improved Access to Vital Knowledge

Provides a streamlined, user-friendly way to access vital travel phrases in seconds, especially in time-sensitive situations.

Increase Convenience for Offline Use

Reduces reliance on Wi-Fi or mobile data by offering an offline mode, ensuring accessibility in remote or low-connectivity areas.

Project Key Takeaways

Creating PhrasePack was both a challenging and rewarding experience that reinforced key UX principles and deepened my understanding of user-centered design. Through multiple iterations—driven by research, feedback, and usability testing—the app evolved into a streamlined solution that helps travelers communicate effortlessly in foreign environments. My biggest insights from the process:

Simplicity is crucial – Users preferred a clean, intuitive interface that allows them to quickly access essential phrases.
Readability impacts usability – Even small adjustments to typography, color contrast, and spacing improved comprehension, accessibility, and the overall aesthetic.
Personalization enhances engagement – Features like Favorites and Frequently Used improved user retention by tailoring the experience to individual needs.
Context improves usability – Including examples and contextual hints within categories helped users better understand and navigate phrase selections.

Biggest Lessons Learned

The Power of User Research – Conducting interviews and usability tests showed me how critical user feedback is in shaping a product that truly meets people's needs. Assumptions were often challenged, and real insights came from listening to users.
The Importance of Iteration – Design is never truly "finished." Each round of feedback led to meaningful improvements, from adjusting the color palette to refining navigation for better usability. Small tweaks often made a big impact.
Balancing Aesthetics and Functionality – While I wanted PhrasePack to be visually appealing, I learned that clarity and usability should always take priority, especially in a high-stakes environment like travel.
Wearing Multiple Hats – Taking on all roles, UX research, UI design, and prototyping, was a fantastic learning experience. While I would’ve loved the opportunity to collaborate with a team—because I believe different perspectives could have enhanced the final product—I’m proud of the outcome achieved.

Next Steps

A product is never truly “finished”. To improve PhrasePack even further, here are a few key enhancements and features I would like to implement next:

Further Usability Testing – Broaden testing across diverse traveler demographics to refine interactions and identify edge cases.
Expand Homescreen – Include more sections with relevant features and information while maintaining clarity and simplicity.
Expanding Learning Features – Introduce bite-sized learning tools to help users retain key phrases before and during travel.
Expanded Functionalities – Explore potential features like voice recognition, cultural insights, and currency conversion for a more comprehensive travel tool.
Localization & Accessibility – Expanded language offerings and ensure the app remains accessible across different user needs and devices.

Thank you for viewing!

I truly appreciate your time and interest in my work and the opportunity to share my design process, challenges, and learnings. I hope this project gave you a more clear image of my approach to UX/UI design, problem-solving, and user-centered thinking.
‍
If you have any questions at all or just want to chat, I’d love to connect. 😃

Let’s Work Together

PhrasePack: A Smart Travel Assistant for Effortless Communication