As a part of 4 person team, my main role was UX designer and Project Presenter.
Overview
Trackr is an application that allows users to track bills, personal finances, and savings in a visual way. Trackr also enables users to split bills with others. Users can request payments from other users on the application or pay other users through the application.
Goals
The goal of this project is to create a product that allows users to stay on-top of their bills, work to pay off their bills, split bills between people, and shows users a clear visual representation of their usage, payments, and debt balances. Specific features include:
- Split bills with other users
- Pay other users directly
- Send reminders for upcoming bills
- Track expenses against income
- See pending and paid charges
To achieve this, the team developed a multi-channel application with a desktop component and a mobile component.
To begin the design process, the team worked together to create personas, scenarios and a mood board for the product. Creating the personas and scenarios allowed the team to get a better understanding of who would be using the product and how it may be used in the real world. The mood board provided inspiration for the lo-fi prototypes the team created in the next step.
Personas
Kelly Smith
Kelly is a 34 year old mom who wants to manage her spending to be able to save up for a family vacation. Kelly wants to be able to track her spending more accurately so she can get a good idea of how much she can save each month and be able to maintain their lifestyle. It is hard for her to keep track of their household bills along with extra spending, and the kids extracurriculars. She wants something to get a better idea of how much they are spending on additional bills throughout the month that can be hard to keep track of. This way she can save throughout the month for the trip.
Goals
Save enough to go on a family vacation
Track disposable income throughout the month
Maintain spending lifestyle
Michael Gontarek
Michael is a 22 year old college student who lives with 3 roommates. As of his 21st birthday, his parents have put all of his bills in his name and he is still trying to navigate paying everything on time and accurately. It becomes difficult when trying to pay utilities because some are in his name, and some are in his roommates’ name. He often mixes up who owes what amount. It has also been difficult for him to budget, and he is often late in bills because he has to wait for his next paycheck to pay a bill he forgot about.
Goals
Pay all of his bills on time
Accurately divide utilities between roommates
Be able to save instead of living paycheck to paycheck
Scenarios
Scenario 1
In this scenario, Michael is arguing with his roommates over who owes what for the utility bills. Michael believed that his roommate owed the remaining $62.03 of their utility bills, but the roommate claims to have already paid for the month. Michael is not sure what to do and the roommate says it is on him to figure it out, since it was his turn this month to take care of it. Michael is stuck figuring out where the remaining balance comes from, which will be very difficult, or paying it himself.
Scenario 2
In this scenario Kelly is telling her family that she thinks they should go on a family vacation. Her husband is skeptical because he is not sure they can afford to go on the trip. Kelly wants to know what their monthly income vs spending is but neither of them have a good way to track it. Kelly thinks that by finding an app or website that helps them compile all their spending they can know how much money they have and what they can save each month for their vacation. Being able to track what they are spending and how much they can realistically save makes her husband and her feel better about knowing where they can take their family on a trip.
Mood Board
Lo-Fi Prototypes
After taking into account the personas, scenarios, and mood board, each member of the team created a desktop and mobile sketch of the product. The team then came together to discuss what features to pull from each sketch to move forward into the mid-fi prototype.
Desktop prototypes
Mobile Prototypes
Mid-Fi Prototype
Based on the analysis of the lo-fi prototypes, a mid-fi prototype was created for both mobile and desktop versions of the application using Axure.
Desktop prototypes
Please view the full responsive desktop mid-fi prototype using following Axshare link: https://iqb5dx.axshare.com
Mobile Prototypes
Please view the full mobile mid-fi prototype using the following Axshare link: https://2cp6b2.axshare.com
Usability Testing
To test the usability of the proposed design, 3 participants were recruited to test the mid-fi prototypes. Each participant was given 3 tasks to complete. To ensure consistency, tests were conducted using the same script and tasks for each participant.
Details about participants, test script, tasks, test recordings and test results would be provided on request.
Findings & Recommendations
Please find below the summary of our findings and recommendations based on our usability test. The following recommendations were implemented for our hi-fi prototypes.
Hi-Fi Prototypes
After usability testing on mid-fi prototypes was complete, the team discussed the changes that would be implemented to the hi-fi prototypes. The hi-fi prototype is fully adaptive for iPhone and desktop.
Changes from Mid-Fi Prototype
Ultimately, the team decided on the following changes:
- Move the income and savings buttons to the bottom of the buttons on the homepage.
- Create two separate pages for “Request Payment” and “Make Payment”.
- The Request Payment page will allow users to request payment from others, show the user what they have been paid, and what requests are still yet to be paid.
- The Make Payment page will allow users to make payments to others, show the user who they have paid, and what requests the user still has to fulfill.
- The Expenses page will be renamed “Expense Analytics” and will show graphical representations of the data on the Monthly Bills page.
- The Auto and Split buttons on the Monthly Bills page will be made larger and the colors will be changed.
- The “Total Amount” on the Split Bills page should read Total Bill.
- Another line should exist that says “Total Requested” to show how much of the total bill is being split.
- Remove the account activity button.
Style Guide
To give the hi-fi prototype a consistent look and feel, the team created a style guide.
Desktop Hi-Fi Prototype
Below are a few screens of the desktop hi-fi prototype with the discussed changes implemented.
Mobile Hi-Fi Prototype
Below are a few screens of the mobile hi-fi prototype with the discussed changes implemented.
The full responsive desktop/mobile prototype can be found here.
Summary
Trackr helps users to track their bills, see their bill analytics - breakdown with graph visualization of all the expenses made in a particular month. Trackr also allows us to pay the bill and split a bill with more than one user at the same time i.e. we can add multiple recipients when requesting a split bill.
By conducting user testing on the mid-fi prototype, our team was able to get a better idea to implement changes in the design of our final prototype for better user experience. Along with other changes, we also added a new page to our design to directly make a payment and reduce user tasks instead of going to split bills page and making the user fill unwanted information again.
Our final mobile and desktop version prototype of this application is a result of the design process that we followed and kept refining our designs according to what was learnt from the class, by creating personas, scenarios, having design charrettes, developing low-fi prototypes to mid-fi prototype, user testing and finalizing our hi-fi prototypes.
Next Steps
As we have made changes to our mid-fi prototypes according to the recommendations from user testing round one and have created our hi-fi prototype, the next steps would be to:
- Conduct a second round of user testing on the hi-fi prototype.
- Summarize the findings and recommendations from the users.
- Make changes in the hi-fi prototype by implementing the findings from the second round of user testing.
Trackr app | Jan 2020 - March 2020
