TravelCents
UX Case Study
About the Project
As part of an intensive design course through BrainStation, I was tasked with designing a project end to end. I created TravelCents, an expert budgeting and expense-tracking app designed to help travelers keep track of their expenses and stick to their budgets while on the go. This project involved conducting user research, creating personas, wireframing, prototyping, and designing a user-friendly mobile app interface that offers a seamless experience.
UX Researcher, UX/UI, Visual Designer
My Role
Duration
2 months (February 7th/2023 - March 26th/2023)
Tools
Figma, Excel, Paper & Pencil, Zoom, FigJam, Slack
Design Thinking Process
To begin the project, I selected a topic and formulated initial hypotheses about the problem space. Following this, I conducted thorough secondary research to gather additional insights and validate my assumption.
Inspiration:
Problem Space
Gen-z are often money-poor, but time rich, they have difficulties budgeting their trips.
Key Research Insight:
To establish a thorough understanding of the problem space, I conducted secondary research as a crucial first step. This allowed me to gain valuable insights and identify key trends and patterns related to the issue at hand.
Most of the young travellers (15 to 29) of today come from two generational cohorts: generation Y, born between the early 1980s and 2000 and better known as “millennials,” and Generation Z, born after 2000. Roughly 50% of millennial and Gen Z travellers are travelling for the purpose of holidays, but the other 50% are undertaking experiential travel such as work abroad, language study, higher education, au pairing, and volunteering. These experiential youth travellers generally stay longer and spend more.
Gen-z faces different problems traveling.
1. Falling sick
2. Traveling alone
3. Financial constraints
4. Cultural differences
5. Misunderstandings due to a language barrier
6. Unreliable transportation
7. Missing your essential items
8. Preparedness for various climates
Assumptions:
After conducting my secondary research, my next step was to compile a list of assumptions based on my findings. These are some examples of my assumptions.
I assume that Gen Z may be more likely to seek out free or low-cost activities and attractions, such as museums or outdoor experiences, in order to save money.
I assume that young travelers may be more likely to use online travel resources and booking platforms in order to find the best deals and save money on their travel expenses.
I assume young travelers may be more likely to seek out budget-friendly food options, such as street food or local markets, in order to save money on dining.
Interview:
To validate my assumptions and ensure their accuracy, I implemented a research plan that included conducting interviews with 4 potential users. As a starting point for these interviews, I developed a hypothesis based on my initial assumptions.
Methodology
Research method: Phone calls & In-person interviews
Duration: 30min
Age: 16-30
Key Theme 2
Budgeting and planning before their trip. 4/4 of my interviewees said that they spend more time on unnecessary things before their trip ends.
Key Theme 1
Users Seeking out budget-friendly food options while traveling. ¾ of my interviewees said that it is not easy to find budget-friendly food options and end up spending more on high-dining during their trip.
“How Might We”
Following an in-depth analysis of the key themes and challenges faced by Generation Z, I identified the critical pain points and crafted the following How Might We statement as a guiding principle to design an effective solution.
How Might We Statement:
How might we help Gen-z make informed and budget-friendly dining choices while experiencing authentic local cuisine during their travels?
Persona:
Based on the insights gathered from the interviews, a persona was created to represent the target user group.
Meet Melat:)
Expirence Mapping:
After completing my secondary research, my next step was to create a user experience map. This allowed me to gain a deeper understanding of the user's journey and identify pain points and opportunities for improvement.
Task selection:
After creating a persona I wrote 30+ user stories to have an idea of what I should be focusing more on when designing the app. From all these user stories I picked my core epic related to my persona. Decided to focus more on budgeting for their trip.
Core epic:
To be able to see a detailed breakdown of their budget and spending after adding my expenses in order to understand my financial status more clearly.
Task flow:
To better understand the user journey, I created a task flow that outlined each step a user would take to complete a specific task. I chose to outline this task flow that allows somebody to create a budget and attach it to their restaurant so that they can track their finances on their trip because the pain-points that I saw with in my persona were inability to properly spend money.
Before test
Wire frame :
Chosen sketch
To ensure that my wireframes would effectively address the problem space, I first created an inspiration board to gather ideas and insights from other successful designs. This included examining various traveling apps, restaurant apps, and bank apps to identify features that could potentially solve the challenges faced by my target audience.
Why did I choose the sketch
After a comprehensive review of multiple design concepts, I ultimately selected the current sketch as it encapsulated all of the necessary features required to effectively address the identified problem.
Sketches
Low fidelity
Why I didn’t choose the other sketches
-all the sections looks the same
-How much is the logo needed?
-users need search button
-Plain don’t have much information
-It doesn’t invite to look around because it is too vague
Testing:
To ensure the user-friendliness of my design, I conducted two rounds of usability testing with a diverse group of five participants, selected based on their alignment with the targeted user persona and the task flow defined in the project scope.
User testing participants
Oliver, 28
Seattle, WA
Emma, 30
Denver, Colorado
Amanda, 25
Denver,Colorado
Noah, 24
LA, California
Sophia, 37
Silver spring,MD
Revision:
To improve the user experience and address the issues identified during testing, it became clear that changes to the task flow were necessary. With the feedback received, I refined the task flow to ensure that users could easily navigate the app and complete their desired tasks with minimal confusion or frustration.
Task flow:
V1-V3 Lo-Fi:
Upon completing the second iteration of my Low-Fidelity design, I conducted another round of testing with users. This time, all participants were able to complete the assigned tasks without difficulty. However, while the design had improved from the initial iteration, there were still areas that required further refinement.
Home
V2
V3
Changes
Auto currency converter
Implemented a more intuitive, clearer indication of the user's location within the app.
Easy way to check budget before making plans
Bigger Size
Easy and clear information to find budget-friendly places
More similar to the other icons
V1
V1
Restaurants list
V2
V3
Changes
The distance filter was unnecessary as the app could automatically access the user's location.
Implemented a clear labeling system to indicate the current page and prevent users from getting lost within the app.
The additional icon on the tab bar is deemed unnecessary.
V1
Restaurant
V2
V3
Changes
Considering the user persona, it was found that providing detailed information about the restaurant instead of a menu list would be a more effective solution.
A clearer placement of the "Add Expense" button was implemented to address user feedback regarding its difficulty to locate.
V1
Spendings detail
V3
Changes
I added more details to the 23 days left section to make it clearer for users to understand, such as specifying the date when the budget will reset.
To improve the clarity of the expense detail, I made changes to the design to provide more information and context for each expense entry.
I only put 2 screens because there was no difference between V2 and V3
V1
Budget screen
After conducting the first round of testing, I decided to add a budget screen to the app. This feature was implemented to provide users with a clear view of their daily spending activities and to emphasize the importance of budgeting.
V3
Changes
I added more details to the 23 days left section to make it clearer for users to understand, such as specifying the date when the budget will reset.
To improve the clarity of the expense detail, I made changes to the design to provide more information and context for each expense entry.
There was no change between V2 and