Travelr is a mobile application targeted for travelers with the purpose of easing the planning and budgeting process of a trip.

Travelr is a mobile application that is targeted towards travelers with the purpose of easing the planning and budgeting process of a trip.

Travelr is a mobile application that is targeted towards travelers with the purpose of easing the planning and budgeting process of a trip.

image1_travelr

ROLE

Ideation
User Research
User Testing
Visual Design
User Experience
Prototyping

TIMELINE

January 2019 -
March 2019
[3 months]

COURSE

User-centred Design:
Prototyping and Usability with Borxu

TEAM

Jasmine Acebes
Riley MacIntosh

TOOLS

Adobe XD
Figma
Overflow
ProtoPie

Design Objective

The purpose of this project was to design a mobile application while utilizing complex problem solving and user research techniques in which problems are identified and analyzed in individual and team settings.

Within the span of three months, the application was developed and refined through a series of phases — envisioning the conceptual framework, implementing a working prototype, and evaluating and improving the prototype based on user testing results. 

DESIGN CHALLENGE —

DESIGN CHALLENGE —

How might one design an intuitive app where users can seamlessly plan, budget and keep track of their trip expenses?

How might one design an intuitive app where users can seamlessly plan, budget and keep track of their trip expenses?

How might one design an intuitive app where users can seamlessly plan, budget and keep track of their trip expenses?

Pain Points

Pain points based off individuals who are passionate about travelling for leisure and business related purposes include —

1. Foreign exchange rate & tourist pricing

When travelling and spending money in a different currency, some locals tend to take advantage of how they price goods and services for tourists. 

2. Too busy to keep track

Users may find that it is hard to keep track of a budget on a trip since they are constantly spending, and may be using various purchasing methods, such as cash and credit. 

3. Last Minute Decisions

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.

Proposed Solution —
Travelr

Travelr simplifies the process of planning the budget for a trip based on various price points, while simultaneously being capable of tracking the user's spending habits during the trip itself. It also automatically converts the exchange rate to the user's selected home currency, which makes it easier to track transactions and understand its effect on the proposed budget plan.

PHASE ONE —

PHASE ONE —

Research Analysis

Research Analysis

BENCHMARK ANALYSIS

A benchmark analysis was performed on existing travels based apps and services such as Trail Wallet
& Lonely Planet.

A benchmark analysis was performed on existing travels based apps and services such as Trail Wallet & Lonely Planet.

PACT ANALYSIS

A PACT analysis was performed to analyze possible activities involved within the app.

SYSTEMS REQUIREMENT CHART

The MoSCoW method was developed in order to thoroughly understand what features of the app should be prioritized. 

User Research & Personas

User related studies were conducted in order to learn more about our target audience, and to further develop our systems requirement chart to determine key functions of the app. In the user study interviews, the participants were asked questions regarding their experiences with travelling, current budgeting methods they use, and the functions required to encourage the usage of a budgeting app. We created user personas based on the answers we received, which helped us get a better idea of the needs of our target audience.

PHASE TWO —

PHASE TWO —

Ideation & Initial Prototype

Ideation & Initial Prototype

Site Map & Wireframes

A general hierarchy map was created after establishing possible user tasks and scenarios for the app, which we did by anal analyzing our user interview results and the needs of our user personas. The most challenging aspect of this process was figuring out what features should be easily accessible through the navigation system. After the site map was developed, our team began to develop wireframes that showcased the main features of the proposed mobile app. 

bluesitemap

Visual Research

Our team performed UI/UX research in which we developed several moodboards to get a better understanding on which design style best suited our app design. Our main inspirations were light and minimal card based designs that heavily used pictures to showcase the travel destinations, and simple ways data visualizations that were easy to understand. 

Visual Compositions

By stitching together the UI/UX research and the wireframes we developed, we designed and prototyped the first set of visual mockups that were based around the user tasks and journeys from our research. We also began developing our design system on Adobe XD so we can seamlessly make changes and collaboratively work on the app.

View our initial prototype here →

PHASE THREE —

PHASE THREE —

User Testing

User Testing

User Testing

Our team tested the initial prototype on three passionate travelers who belonged to various age groups in order to test our user tasks and propose insightful questions regarding our product and its key functions. This involved the participants to go through tasks that were based around five 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 layed 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.

View user testing analysis here →

travelr_iterations3

PHASE FOUR —

PHASE FOUR —

Refined Prototype & Project Takeaways

Refined Prototype & Project Takeaways

SEARCH HUB —

Discover Destinations

Users can search through recommended trips, as well as destinations based on their interests through the search hub. Each destination provides an average cost for daily spending habits.

MANAGING TRANSACTIONS —

Add Photo/Manual Transactions

When the user takes a photo of their receipt, the app uses Optical Character Recognition (OCR) technologies to fill in transaction details, and 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.

FILTERING TRANSACTIONS —

Budget Breakdown

Users can view their daily and overall trip budget based in their home currency. From this, they can filter through their transactions based on predefined categories.

Project Takeaways & Final Prototype (Adobe XD & ProtoPie)

This project was extremely rewarding as it gave us as a team an industry level experience for designing a product, in which we also implemented Apple's iOS Human Interface Guidelines in the design. We spent the semester conducting research, brainstorming, creating and revising iterations, creating a design system and a brand guideline book, user testing, and making final changes for a marketing video.

Woking in a team was challenging as we all had different schedules for school and work, but we made sure that each group member was held accountable by tracking weekly hours put into the project using a time sheet. This project involved several roadbumps for us as a team as some group members ended up dropping the course which was difficult to deal with and at times demotivated us. We also made dramatic changes to the app for our final presentation, but it was definitely worth it when compared to the first iteration of the app. During our final presentation, we had the opportunity to pitch the idea to a mobile app producer, where we learned about the development process that an app such as ours would entail.

Overall, this project has given us as a team essential experience in properly and ethically conducting user testing in order to improve and test the functions of our app. It has provided us with insight on UI/UX elements that we can improve on, and that there is always room for improvement — in both visual and experience manners. 

transparenttravelr

© Heena Chudasama 2020
Dribbble - Instagram - LinkedIn