Savings Hub
Creating a mobile app for a site that helps people manage expenses and save money.
Overview
Savings Hub is a site that helps people manage their subscriptions and find opportunities to save money.
Problem Statement
Managing multiple subscriptions can be difficult and lead to people being surprised by renewal fees and charged for subscriptions they no longer need. While a website for managing subscriptions is helpful, it lacks the easy accessibility and convenience of a mobile app. Additionally, existing subscription managers fall short of their full potential to help people manage their money.
Project Scope
This project aimed to translate Savings Hub’s subscriptions management and savings benefits to a mobile app and to find ways to make Savings Hub stand out from competitors by adding additional features to support users' money management. The end result was a high fidelity interactive prototype of a Savings Hub app.
Roles and Responsibilities
I served as the UX/UI designer for the project. This included completing research, conducting usability testing, and creating a high fidelity interactive prototype.
Defining the User
Previous research showed that Savings Hub users are mainly middle class adults over thirty who use their phone and desktop equally and would like to be more budget conscious.
Competitors Research
A review was completed of three competitor sites: Track My Subs, Trim, and Truebill. This review sought to find features that Savings Hub may want to include in its app. The review revealed that users appreciate being able to categorize their subscriptions and like having charts to clarify their spending habits.
Since only one of these competitor sites has a mobile app, brief additional reviews were performed on four mobile apps for money management: Mint, Hiatus, Bobby, and Subscription Manager. These reviews demonstrated several positive approaches to money management apps such as having a budget tab, lots of pie charts, and a cheerful color scheme.
All of these features of competitor sites were kept in mind when determining which features to include in the Savings Hub app.
Secondary Research
Online secondary research was completed to see if Saving Hubs’ competitors missed any opportunities to support their users’ money management. This research found that one money management strategy that might work well alongside subscription management is the 50/30/20 rule.
The 50/30/20 rule suggests that, after taxes, people should spend 50% of their income on needs, 30% on wants, and 20% on savings or paying off debt. Although there are other useful budgeting strategies, the 50/30/20 rule works especially well alongside Savings Hub since it requires users to categorize their spending, which Savings Hub already does, and it works best for middle class people, which is most of Savings Hub’s users.
Including a template for using the 50/30/20 rule could help Savings Hub stand out from its competitors who fail to teach users any budgeting strategies. Additionally, research showed that users may benefit from having a spot on the app to set specific financial goals.
Affinity Map
An affinity map was created by writing points from the research on post-its and placing them in groups as they seemed to naturally fit. These groups were then assigned appropriate titles.
This process helped organize information from research and pull out common themes that should be kept in mind as the Savings Hub app was developed.
During this process, a clearer understanding emerged of what users like in existing subscription management sites, what strategies help users manage money, and of the different ways of categorizing and visualizing finances.
User Flow
A user flow was created to lay out an initial idea of how users would navigate the Savings Hub app. Creating this user flow helped clarify which pages and buttons were needed in order to include all the features that research suggested Savings Hub should have for meeting users’ needs.
Sketches
Sketches were used to quickly consider different ways of implementing ideas that came up during research. Through a series of sketches, the ideas were refined and a layout was worked out for Savings Hub. Sketching allowed for decisions about the basic design and app features to be made without being distracted by final design details, such as color choices. It also allowed for a suitable layout to be determined and tested in user testing before too much time was spent on the design details.
User Testing: Round One
User testing was performed in person on five participants. Usability testing aimed to learn if users felt Savings Hub’s layout and features were clear and included everything users were looking for in a subscription management app.
During testing, participants were especially excited about the features included on Savings Hub's Budget and Report pages and expressed interest in seeing the pages further expanded to allow them to predict the impact of possible subscription changes. They also wanted the in-color prototype version to use color to draw more attention to action buttons so that, with very obvious buttons, completing tasks on the app would be even easier.
All of these suggestions were taken into account when designing the low fidelity prototype of Savings Hub.
UI Kit
A UI kit was chosen to simplify the low fidelity design process. This UI kit gave Savings Hub a starting point for icons, font, and color scheme. A few of the colors of the UI kit which complemented Savings Hub’s goal of being a friendly, casual, and trustworthy brand were chosen as Savings Hub’s main color scheme. These colors and UI kit components were then built off of to create a low fidelity prototype of Savings Hub.
Low Fidelity Prototype
A low fidelity prototype was created using Adobe XD. This prototype built off of the layout and features developed during research and sketching and incorporated the UI kit that was chosen to guide the color scheme and icons creation.
The low fidelity prototype allowed all of the previous design work to be reviewed together and for necessary adjustments to be determined before moving on to high fidelity.
Some changes that were decided on, were to improve the contrast of some of the buttons and to add to the Report page so that users could better interact with their budget report information.
High Fidelity Prototype
After making adjustments to the low fidelity Adobe XD screens, InVision was used to create an interactive high fidelity prototype. This interactive prototype allowed for the function and feel of the Savings Hub app to be more accurately tested with users.
Usability Testing: Round Two
Usability testing was performed on five participants. These tests were performed remotely over skype.
Usability testing aimed to learn if users felt Savings Hub was easy to use and incorporated all the features they were looking for in the app.
Some of the feedback from usability testing was that participants felt the Budget page should be called Goals, and that the term ‘subscriptions’ was too limiting for an app that can really function as more of a general money management app. Participants also talked about how much they appreciated Savings Hub’s various progress bars. As well as how much they liked being able to set goals and how this feature could be further expanded by allowing users to easily set up a regular expense to help them set aside money for meeting their savings goals.
Check out Savings Hub in the interactive prototype above.
Final Outcome and What's Next
The final result of this project was a polished high fidelity interactive prototype that is founded on careful research and includes user friendly improvements based on feedback from usability testing. For now this project is complete. There are, however, a few areas for a possible future Savings Hub project.
1. Now that Savings Hub has a great app design, a future project could consider website improvements.
2. Savings Hub could continue to simplify how users track their spending by conducting usability testing to compare several possible options for how users add miscellaneous and irregular expenses to the app.
In the meantime, the Savings Hub project has been wrapped up and the prototype has successfully met Savings Hub’s original goals of creating a competitive app that goes beyond basic subscription management to support users’ finance management in ways their competitors fall short.