A9: Final Project
Dime: Your mobile wallet and finance tracker
Concept
Expanding on my idea from the previous assignment (a mobile wallet application), I decided to create a more functional version and use paper prototyping to test the interactive elements of my mobile prototype.
Essentially, I wanted to create a mobile wireframe for an application that would allow the user to add payment methods including credit cards, debit cards, gift cards, PayPal, and be able to pay for items through this application as well as track their spending habits for each card. The main action items are: Pay, Add, and Track.
Goals
With so many finance trackers such as Mint, mobile wallets such as Google Wallet, and the new Apple Pay, I wanted to create an all-in-one application where the functionalities of each of those aforementioned applications were contained in a useable and convenient application.
The idea itself would take considerable research on existing services and brings up a lot of privacy issues, but since this is a prototyping class I decided to narrow my focus to screen layouts, user flow, and the overall screen organization.
Implementation
Initial Sketches
Paper Prototype
After sketching out some screen layouts, I went on to create a paper prototype of the application. This prototype was meant to test out the interactions of the app to determine which elements were most user-friendly and which elements I should change moving forward.
Interactive Mobile Wireframe
Following a user test with my paper prototype, I went on to create an interactive wireframe using Proto.io. The below images are screenshots from the final prototype after having iteratoed on feedback from user testing.
Evaluation
User Testing
I conducted a user test on the paper prototype to evaluate how effective the screen layouts and placement of action items were. I started out by explaining what the mobile application was, although I purposefully did not explain the three main functionalities of the app.
I asked the user to identify the three main functionalities of the app at any point during her test. She was able to do so when I first asked her to open the navigation drawer — which shows that the navigation tabs were clear for the user to understand.
I asked the user the following questions:
- Go to the screen which will show you all of your payment methods
- Go to the screen where you can see all of your purchases
- Go to the screen where you can see all of your purchases on the Visa card
- Edit the expiration date on the Visa card to January, 2018.
- Add a Chase debit card to your payment methods
- Pay for an item using your Visa card
I asked some follow up questions including:
- In what scenario would you use this application?
- Do you use any finance tracking applications at the moment?
Analysis
What Went Well:
From my user test, I learned that the overall structure and grouping of action items was easy to use and understand. The drawer navigation, especially, was an interaction that my user was familiar with from other applications.
The user was also able to complete all of the tasks I asked of her. When I gave her a chance to “play around” with the paper prototype, she noted that it was helpful to have multiple Add and Pay buttons around the app, since those would be the actions that she would perform the most if her phone had this app.
Future Improvements:
My user tried to add a gift card when working with the paper prototype. This is when I realized that there would need to be a different view for adding cards/payment methods that are not credit or debit cards.
Feedback I received from my interactive mobile prototype included adding more finance analytics for each card, adding the payment method used next to each payment in the overall transaction list, and allowing the user to add notes or a budget amount when adding a payment method.
I would also want to add a feature of this app where the user can scan a credit/debit/gift card to add it as a payment method instead of having to manually type in the details.
Analysis:
Overall, the process of sketching -> paper prototyping -> creating an interactive mobile prototype was especially helpful in allowing myself to edit down my idea to a manageable project. The process made me think about what I really wanted the app to do, and this helped my organize each screen with intent. I believe that process made the prototypes more useable and steam-lined the user flow.
