TRavelr
a travel budgeting app designed to prevent both travel stress and financial pressure.
Project Brief
The purpose of this project was to design and prototype an app, conduct user testing, and improve the apps function based
on the results.
Topic
We chose to design a budgeting app specifically tailored to help people save up for the purpose of traveling, and stick to their budget while on a trip with helpful in app tips.
Role
Ideation, Research, User Testing, Visual Design, User Experience,
Prototyping
TOOLs
Adobe XD
Figma
Overflow
Adobe After Effects
Team
Jasmine Acebes
Heena Chudasama
Design Challenge
Create a travel budgeting app comprehensive enough that it’s the only app you need to plan your trip, but usable enough to quickly track spending on the go.
The Solution: Travelr
Phase 01
Brainstorming
The idea
Travelr was inspire by the experiences my team and I have had when traveling abroad. As students we were looking to stick to a tight budget, but we didn’t want to miss out on the best experiences. We realized just how many different elements there were to planning a good trip and how difficult it could be. We knew there had to be a simpler a way, so we drew from our own personal experiences, and interviewed other travellers, to determine the key functions we could provide that would make a real difference in the way they travel.
Paint Points
FOREIGN EXCHANGE RATEs
It’s hard to keep track of how much you’re spending when using a currency you’re not used to, users shouldn’t have to do mental math every time they buy something.
Too busy to track
It’s hard to keep track of how much you’re spending when you’re so busy exploring a new city. Multiple payments methods make things even more complicated, it would be easiest to track everything in one place.
Last Minute plans
Tourist attractions may sell their tickets at a higher price when it is closer to the date you wish to book. In order to avoid this, users may need to plan correctly and book well in advance to avoid higher costs.
our Solution
CUSTOMIZED PRICE RANGE
Users can search up a city, input their prices range and the app will recommend accommodations and restaurants that will keep them within their budget.
Financial tracking
While traveling the user can input all the costs and how much money they spend on certain things. The app will automatically adjust the currency rate depending on where the traveler is. The user can either automatically input the data or take a picture of their receipts.
Data visualization
Users can see where and what they are spending most of their money on, and what they can do to keep with their trip budget.
CONNECT TO BANK ACCOUNT
This way users will only have to manually input their cash spending, so they have one less thing to think about.
Phase 02
Research
SWEETS
Benchmark
Analysis
We did research to gather information on the existing product market.
Benchmark
Analysis
We did research to gather information on the existing product market.
SWEETS
PACT
Analysis
Helped us understand the contexts in which our app would be used.
PACT
Analysis
Helped us understand the contexts in which our app would be used.
SWEETS
Systems Requirements
The MoSCoW method was used to prioritize features and simplify our initial idea.
Systems Requirements
The MoSCoW method was used to prioritize features and simplify our initial idea.
user research
We created a System Requirement Chart outlining the most important features of our app, so we would know which functions to prioritize in our prototype. To help us determine this, we conducted a series of interviews, with subjects we felt reflected a diverse group of our target audience. We came up with a series of questions to gage consumer interest in the list of functions we thought the app could have.
Through our interviews we discovered our target market was most interested in exchange rate conversion, and the ability to track spending by photographing a receipt. One subject said optical character recognition of receipts to track spending would be the main reason they would use the app. All subjects agreed locations services and filters would be necessary. They also agreed that showcasing restaurants was unnecessary and it would be more efficient to partner with an existing restaurant review app in the future. Additionally, people were interested in a summary of the average spending per day in each city, as well as suggested locations based on your budget.
The full summary of our user interviews can be read in this analysis.
We used this information to adjust our System Requirements Chart
and to create our site map.
user personas
Phase 03
Ideation & Initial Prototype
Site map
Once we used our System Requirements Chart to determine the must have functions of Travelr, we were able to create a basic site map. This allowed us to better understand how we would need to structure the app to make sure the core functions were easily accessible.
This was especially useful when designing the navigation system, in our first version we tried to emphasize our ‘add transaction’ button, but instead we made it hard to find by removing it from our established design system. So on our second attempt we were able to prioritize the button more clearer in the visual hierarchy.
Low fidelity Wireframes
These are some of our low-fi wireframes outlining simple visual elements and beginning to create a consistent visual language.
Visual research
Our team decided we would each make some initial moodboards, including the visual style and colour scheme we thought would work best. This was an effective strategy as we were then able to combine elements from the different styles to create our high-fidelity mocks.
We ultimately decided we wanted Travelr to have a very sleek, modern, minimal visual style, and use a lot of photographs to highlight all the amazing destinations. But we also wanted to incorporate some fun pops of colour, this was especially difficult because we needed a fairly wide range of colours to effectively showcase the budget data clearly, but we didn’t want to overwhelm the user by bombarding them with too much visual information.
High Fidelity Wireframes
Using our moodboards and low fidelity wireframes we worked as a team to create this high fidelity prototype for user testing. However, because it was created for the purpose of user testing it is only set up for the user to complete specific tasks.
initial Prototype
Phase 04
User Testing
User testing
We conducted our initial user tests on 3 subjects of various ages and backgrounds, all with an interest in travel. We hoped this would give us insight into how different people would approach the app and understand the visual cues. The tasks we set for our subjects focused on completing 5 key objectives;
-
Adjusting finance related settings
-
Browsing for destinations
-
Customizing a trip budget
-
Recording transactions
-
Viewing transaction breakdowns
The user testing allowed us to get a better understanding on what aspects of the app worked, and which could be improved. A prominent suggestion in all the user tests was to improve the positioning and appearance of the add transaction button so that it wasn't similar to other features of the app.
Other suggestions involved improving the overall hierarchy of how the elements of our app were laid out. Based on these user tests, our team performed a synthesis of the test results that broke down how the user interface and experience can be improved, which we then used to develop the most recent edition of our product.
Phase 05
Revised Prototype
Search & Discover
We recommend destinations to users based on their interests and restrictions. Each destination gives users an average daily spending based on the past data of other users that have been on trips within a similar budget to yours.
Budget Breakdown
Users are able to view breakdowns of the their budget for each day, or for their overall trip. The app sorts expenses into predetermined categories so if you're overspending on something, you'll know, and you can adjust your budget accordingly for the rest of the trip.
Record Transaction Manually
When the user takes a photo of their receipt, the app uses Optical Character Recognition (OCR) technology to fill in the details. Users can also manually enter their transactions in case they didn't get a receipt. For both scenarios, the app automatically converts the transaction into the user's selected home currency.
Final Prototype
Mock ups
Phase 06
Promo Video
Promo Video
I was responsible for the promotional video, we were required to feature different functions of the app. I chose to use some upbeat, slightly unconventional music because I think it would appeal to our target audience of young travellers.