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 

Benchmark
Analysis 

 

We did research to gather information on the existing product market.

PACT
Analysis 

 

Helped us understand the contexts in which our app would be used.

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. 

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.

See Summary & Analysis of User Testing Results here >

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.

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. 

Links 

     Promo Video on Vimeo

© Riley MacIntosh