SaverLife: How to Save Money
SaverLife is a nonprofit organization with the goal of helping people, save money in fun and rewarding ways. SaverLife offers an incentive based platform with rewards and prizes to help motivate spending behavior that leads to positive growth for the users. The people working for this organization have made it their goal to provide meaningful change to the field of financial growth and stability for Americans so they no longer have to suffer and struggle to live through paycheck to paycheck.
With SaverLife’s new budgeting app, people will be able to view their current and past spendings and set goals for themselves to cut back on wasteful expenses. The app will also offer a means to compare trends with other users to help provide insight to how you can allocate where money is being used. Finally, there will be a projected savings feature to the app which will show users where their current spending trends will lead based off current trends shown in their data.
With the development of the application we built out four main pages to help users manage and observe their spendings.
Layout:
The home page offers a dashboard where the user can view their bank account transactions of the last week along with their current balance. A straightforward feature that is useful to help view specific growth and spending as it occurs with each transaction made.
The next page we built out is the budget page where the users can set goals in specific categories where they spend. The page makes use of progress bars that display where one’s spending is in those applicable categories, going from green to yellow to red when one spends too much in said category.
Now the Past Spending and Net Income pages are quite straightforward with the data that is visualized in the charts provided. The Past Spending page shows a bar graph provided by our Data Science team that monitors spending over the past week, giving an alternative take and visualization that is easy to digest and understand.
And finally our Net Income page, which also uses a chart from our Data Scientists, offers a visual for growth and spending for the account.
Access with Ease:
When building out the application, myself and another member of our Web development team went through the processes of creating a working an interactive nav bar, using media queries to create a visual representation that was both easy to use and aesthetically pleasing. The nav bar is essential to any application, allowing users to navigate through the application as well as being able to log out once the user finishes using the app. The navigation includes other features, changing its position depending on the screen size of the device for example.
The layout of the page is something our Web team brought together to create an application that is fluid and adaptable for all forms of media sizes. One key feature is the arrangement and versatility of its header and footer which contain the nav bar and progress bar which contains the data from the Budget page in one condensed bar to observe. We want our user to be keep track of their progress in every page of the application since helping users save money is the major goal SaverLife is striving to achieve.
Myself and another teammate are responsible for building the pages out with the layout we had in mind. The gimmick with the nav and progress bars is to have them swap positions when making use of different screen sizes. For smaller, handheld, devices the navigation would be placed at the bottom of the screen where users would more easily navigate through the app where for larger screens for devices like laptops and pc, the layout would resemble a traditional page layout.
After the implementation of the main program with these set pages, our web team set about completing additional features for the application. In the week leading up to the end of the project’’s development time, we built a react native app for mobile use and we also implemented the use of a dark mode with the user’s ease at mind.
Initially, there were issues in the development of the footer progress bar. First testings showed that the data for the progress bar did not render initially until it received data from the Budget page where the data initially came from. After the initial render, the pages would show the data properly in the progress bar but upon refreshing the page, the progress bar would have no data to display.
To get around this issue we implemented the useEffect feature to bring the data from the budget action to provide the information that is then saved as props for the progress bar.
By implementing this code, the data will be immediately rendered for the progress bar no matter what page the user starts the application on or if the user refreshes the page.
Reflections:
In these eight weeks that were dedicated to building out this application, we were offered an experience that is as close to real life work as one can hope to achieve. This projected offered a real opportunity to work with a dedicated team for an organization that wants to get a product out. We came across complications such as an initial lack of data or information from our stakeholders, forcing us to work quickly adapt and think critically about what we wanted to accomplish and share with the organization. The building process helped hone our abilities to work both independently and with other members of our team. Peer programming was especially prevalent during those weeks leading up to completing the main application. Through cooperation and maintaining an earnest workflow, we built something I am very proud of.
