January 2019 -
Prototyping and Usability
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.
This project was done in collaboration with Jasmine Acebes & Riley MacIntosh.
Design Challenge —
How might one design an intuitive app where users can seamlessly plan, budget and keep track of their trip expenses?
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 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 —
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.
Phase Two —
Ideation & Initial Prototype
Site Map & Wireframes
A general hierarchy map was created after establishing possible user tasks and scenarios for the app. After the site map was created, our team began to develop wireframes that showcased the main features of the proposed mobile app.
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.
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.
Phase Three —
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.
Phase Four —
Refined Prototype & Project Takeaways
SEARCH HUB —
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 —
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)
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.