Springboard UI/UX Design Bootcamp, Prompt Based Capstone
End-to-end product design - user research, art direction, wireframes, high fidelity mockups, prototyping, microanimations, and usability testing.
Cate is a subscription tracking service that provides users an easy way to follow where there money is going and allows them to maximize the cost of their various subscriptions.
For the past decade, subscription services have been on a meteoric rise. While some of these services provide an invaluable positive effect on users' lives, some may sit and be forgotten. Cate is designed to save our users' money spent on forgotten and underused subscriptions.
Reduce Unnecessary Notifications
Several of our respondents stated that they did not utilize a third party finance application in order to track their spending. While some mentioned that they do keep their own spreadsheets, others stated that they felt overwhelmed by the amount of options within popular finance apps. While TrackMySubs does keep their scope to simply subscriptions, our other competitors had many other features that took the emphasis away from their key purpose of tracking your subscriptions. This includes tracking your net worth, bill negotiation, and several other "pro" features available to subscribers only. From this, we realized that we should focus on a small yet crucial set of core capabilities and not try to add superfluous features.
When discussing subscriptions, most respondents had a positive outlook towards them: they provide continual access to a product or source of goods without much thought on their part with renewal. While certain subscriptions provide more benefits over others, their inherent value is not universal amongst respondents. Of the 5 interviews, 2 had recently canceled their Amazon Prime not because of dissatisfaction with the service but instead due to the knock-on effects of spending more money on products available with Prime shipping. From this, we determined that it may benefit users to understand more about their subscriptions, as it may provide more added value to the subscription than what they are currently aware of (i.e. Prime Video being included in Amazon Prime).
Our client, Cate, is an established subscription-tracking service that provides users an opportunity to track their subscriptions utilizing a web-based client. In this client, users were able to view their active subscriptions in a list or calendar format as well as a simple bar graph of the overall total the user spends on their subscriptions.
Cate approached us asking for our assistance in helping to expand their offerings by crafting a mobile application geared towards their target demographic of users in their 30s and 40s that will supplement their current offerings as well as appeal to a larger audience. Further, they hoped this mobile application would appeal to a German audience, seeing that they are entering the German market at the same time as the launch of the application.
While Cate had a strong initial product in the form of their web application, we began looking for ways that we could augment their product in ways that benefited their target demographic. To do this, we began performing interviews to determine what users' were interested in getting from a mobile application like Cate as well as their general attitudes towards subscriptions and finances. Further, we performed a competitive analysis to determine what our main competitor's (Truebill, TrackMySubs, and Trim). From this, we determined that, when designing Cate's mobile presence, we should focus on three things: not being too overbearing, focus on a few core features, and be more intuitive about why a user might unsubscribe.
Focus on Core Features
Throughout our interviews, respondents stated that, if they used a third party finance application, they received too many notifications and emails regarding their financial status. When asked how they felt about this, the respondents said they didn't appreciate the constant nagging about their finances and wished they received fewer or no notifications. This was echoed during our competitive analysis, as all three competitors tend to send multiple texts, notifications, and emails throughout a single day. With this information, we believe that we should provide a product that is present in the user's life without being overbearing and overly needy in looking for interaction and data.
In order to better understand the subscription tracking landscape, I analyzed three competitors in this realm: Truebill, Trim, and TrackMySubs.
While these services all do the same thing on an extremely base level (help users track their subscriptions), they perform these tasks with varying degrees of success, with Truebill providing the most coherent approach to the problem. Truebill provides seamless integration with your bank accounts and does the best job finding out which charges are recurring and should be classified as a subscription. However, if a subscription charge is infrequent enough, you can manually select the charges and add it to your list. While Trim is able to integrate with your accounts, the classification aspect is lacking. Rather than deciphering which charges are subscriptions, it lumps any recurring charge into subscriptions including weekly grocery store purchases whose pricing may fluctuate. For Trim, the best way to put it is “jack of all trades, master of none.” Funnily enough, the same can’t be said about Trackmysubs. It lacks any connectivity with your bank account, relying entirely on the user to input every subscription. While in a vacuum this makes sense, there is a possibility that the user is not aware of a subscription and will not include it in their list. Further, their mobile design leaves a lot to be desired. In the end, Truebill provides the most utility without being overbearing or providing too much.
Intuitive About Subscriber Behavior
With our focus points in mind, we dove into our designs and began crafting a product that would be a useful addition to user's lives without being too overbearing or complicated.
Following a brief round of sketching to determine which features we would add as well as figuring out the overall progression within the application, we began working on our lo-fi mockups that implement new features derived from our research sessions. These features included a new way to add subscriptions, the dashboard, the Agenda, and more detailed information about each subscription. The dashboard provided a "quick look" at what is going on with your subscriptions this calendar week, allowing you to know what has happened or what is about to happen. The agenda, similarly, provided a two-week snapshot of your subscriptions. The reasoning behind this was to provide as many "quick look" options as possible to encourage frequent user check-ins without overly nagging them with notifications.
Dashboard
The dashboard provides a "quick look" at what is going on with your subscriptions, allowing you to know what has happened or what is about to happen regarding your subscriptions. This is further augmented by the addition of a pie chart showing the breakdown of your different subscriptions into categories. Further, in this initial design we also included a small alert below the user's name if there had been any new subscriptions added since they last logged in. The impetus behind the Dashboard was to encourage passive use of Cate, thereby reducing the need to use persistent notifications and nagging our users.
The Agenda is the first tab view when looking at your subscriptions. It functions in a similar fashion to the dashboard, as it provides a "quick look" into your subscriptions, but expands the range further. Rather than simply what is going on immediately around your current date, the agenda allows you to view your subscription renewals in a two week window. This is once again to encourage passive use by allowing users to check-in on a less frequent basis. Of course, this isn't the only method of viewing your subscriptions: in addition to the agenda, we have a sortable list of all of the user's active subscriptions as well as a full calendar view.
Agenda
As we mentioned earlier, our interviewees detailed how they would cancel a subscription after several months due to knock-on effects of certain features of a subscription. In trying to address this, we decided to add a more detailed subscription info page that shows any change in subscription cost as well as provide more information about what is included in the subscription itself. While this may lead to someone deciding that their subscription is no longer worth the value, others may learn of features that they were not aware. Further, this page allows users to add one time alerts for when their subscription is about to be renewed.
Subscription Information
Outside of branding and imagery, we used this round of designing to fully fill out adding a subscription to your profile. While the original web-based Cate app relied on users manually inputting each of their subscriptions in order to track them, we wanted to make the process even easier while still retaining the user's ability to pick and choose which charges appear as a subscription. To do so, we kept the original method but added a new way to add a subscription through Smart Scan. With Smart Scan, Cate will look for traditional subscription services or repeating charges that are separated by a fixed amount of time. While our competitors may offer a completely "hands-free" way to add any recurring charges by adding all recurring charges, we found during our research that these also included trips to the grocery store, gas station, and bars/restaurants. While that may be helpful to know, these charges do not constitute a subscription and should not be included. By making the process easy and allowing the user to choose what to include in the tracker, it encourages repeat usage of the product without prodding the user.
For the hi-res mockups, we took our pre-existing designs and spruced it up by adding brand colors, subscription imagery, and more interactivity. For the brand colors, we wanted to create an air of relaxation in order to reduce any sense of pressure the user might get while using the app without taking away from the importance of security when it comes to finances. We landed on two shades of blue (#29658F and #1A365B) as our primary brand colors that can also be found in the Cate logo. To augment these shades, we decided to stick with an analogous color scheme as to not distract or annoy the users with extremely different colors. We did, however, decide to include as many brand logos as possible. This is to encourage glanceability within the app so that users feel they can spend a quick moment to check and make sure everything is still okay or to quickly see when a specific subscription is renewing.
After designing our lo-fi mockups, we performed a round of usability testing in order to see how our flows and new features were received with Cate's target demographic.
In all, the subjects responded positively to this initial iteration of Cate. In particular, they appreciated that the app does what it says: track your subscriptions. They also appreciated the information present in the subscription info screen, as it provides information that they otherwise might not know of. While the overall flows were received positively, the subjects noted a distinct confusion when it came to the addition of both the dashboard and agenda. Primarily, they didn't understand why they were both present when they provided essentially the same information. Most of the subjects preferred the dashboard over the agenda, as it was a quicker way to get most of the same information, plus it provided a pie chart that added more information without taking away from the rest of the data presented. From this, we decided to scrap the Agenda from our next round of designs and focus on improving the dashboard further.
As we finished this final round of designs, we began to look towards the next version of Cate and what future features we would like to include down the line.
After completing the final round of designs, we performed a final round of usability testing to make sure our aesthetic choices went over well with our target demographic. All in all, the users were a big fan of what Cate looked like. After completing all required tasks for the test, we asked our subjects their general feelings towards the app and whether they would be interested in using a product like Cate. The answers were a resounding yes, with many of the subjects stating that they would be likely to include Cate in their repertoire of finance applications. The subjects did have a few small problems with certain design elements, in particular how subscriptions were shown in the calendar, but these problems were easy to address and fix with a quick iteration session on our designs.
As we move forward with Cate, we believe there are a couple of features we could add to make it even more robust. The first, and most likely, of these additions is a free trial tracker. Currently, Truebill features a free trial tracker and, during the research phase, several interviewees expressed interest in that type of feature. While we didn't look at having this feature of v1.0, as we wanted to hone in on a handful of crucial features, it would be the first thing we would include in v2.0.
In the end, I am extremely proud with how Cate has come together. While its scope is small in nature, this smaller scope allows for the user to worry less about using a litany of features and instead focuses them in on the true goal of the product: tracking your subscriptions and, by extension, your finances. We began designing Cate with the principles of not being overbearing, focusing on a few key features, and being intuitive about users' habits. I believe that we have definitely accomplished those principles.
Interactive
Prototype
Additional Resources
User
Personas
Lo-Fi
Prototype
Many thanks to all who helped on this project including my interviewees and test subjects.
