Cashflow
A gamified tool for improving financial literacy
My Roles
UX Designer / Researcher
Graphic Designer
Tools
Figma
Adobe Illustrator
Project Timeline
December 2019
(3 Weeks)
About
Cashflow is a web application prototype designed to teach financial literacy through gamification. Our prototype had three stages: A paper prototype, interactive wireframes, and finally an interactive high-fidelity mockup. The app employs gamified lesson modules and in-app currency to practice budgeting, investment and other important finance skills. While not able to prototype the lesson modules themselves, the prototype showcases the system hierarchy and visual design. We used the hi-fi mockup to determine the product’s desirability, usability, and practicality.
Cashflow Product Commercial Edited by Khadijah Jordan and Directed by M.Nicole Washington.
Financial Literacy
As young adults entering the world of financial responsibility, our team resonated with feeling unprepared. Tasked with creating a prototype for a course project, we decided to learn about the needs of the user for an app that aims to teach financial literacy and responsibility. A quick survey immediately showed the high demand and interest in such an application.
A New Lesson Plan
As an app that aims to teach financial literacy and responsibility, Cashflow includes features that allow income and outcome monitoring, budgeting, and planning, and easy to navigate visualizations. With the Cash Flow prototype, we wanted to evaluate the desirability and usability of our product. In addition, we wanted to better understand usability practices through creating an interactive wireframe.
All In One Place
The dashboard enable easy access to the lesson modules and other helpful features while providing a simple overview of the users progress.
Level Up Your Learning
We envision learning modules that would employ gamification to make a fun, engaging and memorable learning experience.
Zero Risk Environment
Learn the ins and outs of finances without putting your money on the line. The in app currency system would let users explore investment with no real world costs.
Design Process
Research
We began with a simple survey to gauge users interest and need for a finance learning app. After receiving several enthusiastic responses we moved into designing the system hierarchy and prioritizing possible features.
Design
Next we created paper prototypes of the basic layout and then low fidelity mock-ups using Figma. We conducted quick hallway usability tests to get basic feedback on the layout, terminology and overall design.
Define
With user feedback we began iterating on the applications design and honed in on the final layout and core design themes. We finally created the final interactive prototype in Figma and did a final round of usability testing.
Research
How do we prepare for financial responsibility?
While brainstorming problem areas to address, we ended up discussing our own difficulties in navigating the financial world. Tasks like budgeting, doing taxes and building credit have always been sources of anxiety and frustration. We wondered just how many other young adults and others experienced these difficulties. And if so, what could we do to be more prepared?
Despite the short project timeline, we wanted to further investigate other students experience with financial literacy skills. We designed a brief survey to gauge college student's familiarity with financial management terminology and the understanding of financial institutions. It was not surprising to see that other students were in the same boat as us.
Our study showed that 77% of students were not taught any subjects of financial literacy in their k-12 education and that many students were not comfortable with their current level of financial literacy. After receiving many excited comments about a financial literacy learning tool, we were eager to pursue the project. We began brainstorming design features and refined a proposal for a financial literacy learning application.
Design
Features and Content
Using the survey data, our team started to brainstorm what features the application should include. Knowing this project would only end in a hi fidelity prototype, we couldn’t get too deep into the specifics of the lesson plan's content. But we still wanted to present something that addressed the major pain points the surveys reported. We decided to think globally and design something that could be a hub for general financial knowledge. We would include subjects that covered taxes to budgeting, investment to retirement plans, and financial emergencies.
Primary Design Features
Paper prototype of the Cashflow Dashboard.
Login
Overview page
User progress
Lesson modules
Proficiency Scale / Tracker
In App currency mini-game
Lesson module pages
Intro and summary of topics covered
Progress tracker
Pointers to external resources
Dictionary
Quick look up
Pointers to external resources
Account settings
Prototyping and Implementation
With the primary content decided, we moved into brainstorming the layout and hierarchy of the application. After some preliminary sketching, we created a paper prototype consisting of the primary pages and layout. We then conducted quick hallway usability tests to get some initial feedback on the layout and terminology used. We also asked testers their opinion on the selection of features available.
Feedback from the tests was used to make higher level changes including adding a new feature to introduce investment and stocks using in app currency. With these edits made, our team moved over to Figma to begin mocking up the system hierarchy and finalize the layout. We then had another quick round of usability testing to ensure navigation was intuitive and efficient.
Refine
Visual Design and Interactivity
We continued to refine our application as we moved into working on the visual design. Together our team developed icons, color schemes and other graphical elements to make a sensible yet engaging visual style.
We finalized the design elements and put it all together. Using Figma’s interactivity features, we set up a usable version of the app that allows users to navigate through the main pages. And with that, our prototype was complete.
Presentation
The final prototype was displayed at a showcase where students had the opportunity to try it out. We were able to discover where our app succeeded and failed in terms of usability. The information architecture and overall user-friendliness succeeded. The visual design and system navigation was easily understood. Overall, the Cashflow prototype was well received and we were glad to see such enthusiasm towards it's development!
Evaluation and Reflection
As college students, we are quickly entering the real world without any strong knowledge of financial issues. Navigating society without basic financial literacy can be frustrating and a major point of stress. After showcasing our product, we found that students feel very unprepared and would like a set of resources to further develop their understanding in this area of knowledge. We received a few comments about the fidelity of our product; some mentioned that it was very well laid-out, especially the text-heavy content. In addition, people mentioned that they liked the color scheme and felt that it was calm and inviting. There were also comments made about the professionalism of our product. Because Cashflow was designed to be friendly, but professional, students felt as though they could trust the information being provided.
If we had more time, we would have liked to design the games and conduct more research on the best ways to teach financial literacy through gamification. We may have been able to expand our hi-fi prototype and make it more interactive and immersive. In hindsight, it would have been nice to include the feature of being able to click through a few frames of a game. Otherwise, we found our prototype succeeded in all other aspects including desirability and usability. We also learned some things about the feasibility of a real-world implementation Cashflow. With a basis for the sites design and architecture, the next major piece would be the lesson game's design. While those on our team do not possess the necessary knowledge to build such lesson plans, it would be entirely possible to collaborate with someone who did. Overall, we learned a lot about the value of prototyping and testing through designing Cashflow.