Tally Up Your Savings

The Problem

“I work a middle class job and I’m trying to take control of my finances. I’m hoping to buy a home and start a family within the next few years, so I need to watch my spending. Making cuts, even small ones, in my budget would be very helpful. I am technologically-inclined and I have subscribed to a lot of services throughout the years. I wish there was a way to see and manage all of my subscriptions at once.”

Tally helps users keep track of their subscriptions and gives them the ability to cancel them. The subscription information can be pulled automatically when the user provides their bank information or they can add each subscription manually.

The Fix

Scope Out the Competition

I started my research by testing some of the leading  products in the area. I checked out TrueBill, MySubscribe, and Hiatus.

TrueBill goes above and beyond and offers budgeting and credit services. TrueBill had unique UI features as well. Whenever I added a new account to my profile, confetti fell down from the screen. I thought this was a clever touch to let users know that their action was successful. They also used language that is friendly to the user. I knew I wanted Tally to speak to the user as if it were a friend and guiding them to achieve their financial goals.

Learn What the User Needs

In order to find a solution, I needed to learn directly about people’s habits when it came to managing their subscriptions. I conducted an online survey using Google Forms to learn more about people’s subscription habits. I received 24 responses. 

My target user for the Tally app is someone over the age of 30, middle class, budget-conscious, and who use their desktop and mobile devices equally. USA Today defines someone who earns between $51,200 and $153,000 as part of the American middle class. 75% of the survey participants earn at least $40,000 per year.

When I asked users if they considered themselves budget-conscious, 79.2% of them said yes. I was a little surprised by this answer as I thought more participants would say yes.

I wanted to find out how useful others would think an app like Tally would be. When I asked survey participants if they would find it helpful to see all of their subscriptions in one place, 91.7% said it would. This gave me more motivation to create Tally.

Survey Results

The Target User

After conducting my research, I thought about what kind of person would benefit from using my product. As I mentioned above, the target Tally user is a person in their 30s or 40s who uses technology regularly. They are middle class and keep track of their finances.

Let’s meet Harry:

Harry is a 37 year-old high school chemistry teacher. He earns $55,000 a year, which is considered middle class. He and his wife are expecting a baby #3 soon. He is looking to cut his spending so he can afford to move into a bigger house. Tally would be a great solution for Harry so that he can track and cancel his subscriptions and save money.

I thought about my target users and their needs and created three main red routes: My Subscriptions, Dashboard, and Settings. Users could view, add, edit, and cancel their subscriptions in My Subscriptions. The Dashboard shows users how much Tally has saved them in both USD and Euros. Since Tally is expanding to the German market and some people pay for subscriptions in both Euros and USD, I wanted to create a comprehensive experience where users can use both currencies. Another feature on the Dashboard is a visual showing the breakdown of the kinds of subscriptions the users pay for. In Settings, the user can add or remove their bank information, change their login information, and log out of Tally.

I wanted Tally to be seen as trustworthy, caring, friendly, and casual. When I was deciding on a color palette, I wanted to include these attributes in my primary color. I found a psychology article that explained that green is relaxing, associated with growth and renewal, and promotes optimism and balance. I chose a dark shade of green for my primary color to promote accessibility. I want everyone to be able to use Tally. When proper accessibility techniques are used, everyone wins.

The Design

The Flow

I had a general idea of how I wanted Tally to flow. From my research of other apps, I discovered how convenient it was to log in using my Google credentials. I wanted to incorporate this into my new creation to create an easy experience for users to login.

Also from my research, I learned that in order for a user’s subscriptions to show automatically on the app, they would need to enter their online banking login. I knew some users would be uncomfortable with this so I added an option for them to enter their subscriptions manually. I wrote a disclosure assuring users that their information was safe with Tally.

In order for Tally to automatically retrieve your subscription information, we must have access to your bank account.

This will save you time so you don’t need to enter your subscriptions manually.

You may also discover subscriptions you forgot you had!

Your information is safe with us!

We will not share your data.

I was originally going to have the user go to a home screen after logging in that would contain links to My Subscriptions, a spending summary, a calendar, and settings.

In the end, I chose to have the three main red routes, My Subscriptions, Dashboard, and Settings on the bottom navigation bar.

I included the spending summary in the Dashboard and chose to show the date of a subscription’s next renewal as text instead of a calendar image. Showing it as text is easier to view than clicking through a calendar.

I removed the option in settings for a user to change their currency. Since some users pay in both Euros and USD, I decided to have that choice when the user manually adds their subscription information.

Sketching

I sketched the main screens for Tally. It was important to me to use friendly language. Instead of an “OK” button, I used “Let’s Go!” instead. By doing this, I made the user feel as if they and Tally were a team working together on their finances. This also boasts Tally’s brand of being trustworthy, casual, and friendly.

Wireframes

I used my sketches as a guide when I created my wireframe prototype. It was important to me to have every screen I needed in order to lay the foundation for the high fidelity prototype.

Usability Testing: Round One

In order to validate my wireframes, I needed to test real users. I conducted five in-person moderate tests.

One of the tasks was for the user to tell me the type of subscription they most subscribe to. At this point in the testing, the user was at the screen confirming their bank information from the previous task. The only action items were “take me to my subscriptions” and “add another bank account.” Since the user had just made their account, I did not include the bottom navigation on this screen so Dashboard wasn’t a choice. All of the users had minor to moderate difficulty getting to the Dashboard from there. I knew this was a critical problem with Tally and needed to be fixed.

High Fidelity Mockups

After conducting my first round of usability testing, I knew which areas of Tally needed improvement. In order to fix the problem where the user couldn’t find the dashboard after confirming their bank, I edited the test script so the user would be led to My Subscriptions instead. I realized that the test script I made did not follow the flow I created and did not make sense. I made this change because My Subscriptions contained the bottom navigation menu where the user could then get to the dashboard. 

As part of the high fidelity design, I wanted to show Tally’s brand in all aspects. I used the dark green company color for most of the text and icons. I used mostly lowercase text in order to create a more friendly and casual vibe.

I gathered some UI elements from UI kits I found from the Figma Community. Using pre-made UI elements saved me valuable time as this was a fast-paced project.

When I created the logo for Tally, I wanted a clean and simple look that exuded both friendliness and a hip flare. I chose to use a simple, white background and included the company name in lowercase. I also added an icon similar to the My Subscriptions icon. The dollar sign and arrows are a great visual for what a subscription is.The circle of arrows represent a cycle of renewal and the dollar sign represents the cost of subscriptions.

Here is my style guide:

Most of my screens stayed consistent from the sketches to the high fidelity mockups.

I did make some changes to my design. On the initial sketch for the Dashboard, I included information about the user’s upcoming subscriptions. When creating my mockup, I removed that information. Instead, I added when the subscription’s next renewal is under My Subscriptions, This made the Dashboard less crowded and more visually appealing by adding additional white space.

I also added tabs so the user could view their savings in both USD and Euros.

Usability Testing: Round Two

I conducted moderated usability tests with five participants. Three of the tests were conducted via Zoom. The majority of the feedback I received was positive. Users liked the flow of Tally and said it had a clean look. All of them said it was user-friendly.

One of the participants I tested remotely has a background in professional graphic design. She had some great advice on how to improve my user interface. She noted that when a user uses their Google login to sign into a third party app, they do not enter their login information. She also pointed out some minor inconsistencies in the alignment. I considered these changes as I iterated my final design. 

The same testing participant also alerted me to the issue with the colors in the graph on the Dashboard. They were very light and could be hard to see. In order for Tally to be accessible to more people, I had to change this. Instead of the pastel colors I initially used, I changed the diagram to jewel tones that are easier to see.

Another participant said when an app gives the user the option to sign in through another party, the options are already on the page. In my original design, the user would have to tap “create account” and then they would be given the option to select Google, Facebook, or Apple. When iterating my final design, I added these options to the main login page.

My Experience

This was the third major design project. I chose the timeline of this project and set real deadlines for myself. I am proud of myself for finishing this project ahead of schedule. When I put my mind into something, I know I can achieve my goal.

Even though I was given parameters at the beginning of this project, I truly feel like I created Tally from the ground up. I was surprised how easily this project flowed through me. The process felt natural and more easy to me than my previous projects. I included a lot of features in Tally but would definitely add more had this project been extended. If I were to continue the development of Tally, I would add additional features such as a budgeting component, financial goal-setting, and animations.

Check out my prototype!