Product Designer
Allot           
Tags:
iOS Concept, Budgeting, Interaction Design
Tools: Figma, Principle
Project Type: Personal

Allot is a budgeting app concept with a focus on privacy. Unlike most popular budgeting apps on the market, it does not require users to give up their transaction data by linking a bank account or provide their personal details. Instead, Allot simplifies the process of adding transactions as they occur.
Project Details
A number of mainstream budgeting apps in the United States (such as Mint by Intuit, Clarity Money by Goldman Sachs, Albert by Albert Corporation) require the user to link their bank accounts to keep track of their expenses and further request the user to share sensitive information such as their social security number to allow them to keep track of their credit score and at the same time, advertise credit card applications, investment options, personal loans, and savings accounts. In the process, not only does their product experience become bloated with non-essential advertising and pop-up notifications, in addition to that, the user effectively gives up the privacy of their transaction data. Unlike such apps, Allot doesn't require the user to link any bank accounts or explicitly provide their personal details and brings the budgeting experience back to basics.


Competitive Analysis
During the ideation phase for this project, I performed a competitive analysis on four popular budgeting apps (Mint, Clarity Money, Albert, and Cleo) and one indie budgeting app (Nudget) based on five essential criteria: the requirement of linked bank accounts, the ability to manually add transactions, the ability to edit the contents of a transaction, the ability to delete a transaction, and the ability to easily adjust category limits. The data gathered from this stage allowed me to analyze the strengths and weaknesses of the competition, identify market gaps, and understand UX standards set by competing apps.


Process Flow
Using the data gathered from the competitive analysis, I distilled key insights that I gained into a high-level process flow from the user's perspective. This stage was useful as it helped me gauge the potential interactions in Allot's product experience. With respect to the budgeting categories chosen for Allot, I referred to the Average Annual Expenditures from 2018, as published by the Bureau of Labor Statistics and using a pie chart created with that data (attached below), I sorted out five core categories of spending: bills & utilities (based on the categories: housing, personal insurance, and education), food & dining (based on the category: food), shopping (based on the categories: miscellaneous and apparel), travel (based on the category: transportation), and subscriptions (partially based on the category: entertainment).


Wireframes
My next step was to come up with some mid-fidelity wireframes by translating the nodes from the process flow into an initial representation of Allot's visual identity.


Walkthrough
The above steps were used to generate the final prototype for Allot, as shown below. The artboards were created using Figma while the interactive prototype was built using Principle.

Onboarding
When a user launches Allot for the first time, four onboarding screens express the core ethos behind the app. Furthermore, since Allot was intended for iOS, in order to maintain the user's privacy, Allot features only one sign-up option: Sign up with Apple. This allows the user to hide the email they use as their Apple ID and if they'd like, alter their name as well. While I did consider having no sign-up option at all and instead save the user's data on their device (similar to Nudget), I realized that if the user were to delete the app itself, they'd be deleting all the data as well. Therefore, if they were to reinstall the app at a later period, they would have to start back at square one as none of their data from the previous install would available at all. With "Sign up with Apple", the user can have their data stored in iCloud and if they'd want to delete all their data, they can navigate to Settings > Apple ID [User's name] > Password and Security > Apps Using Apple ID > Allot > Stop Using Apple ID. Alternatively, the Settings tab in Allot features a "Delete All Data" button which redirects the user to the aforementioned section in their Settings app.


Setting Up a Budget and Adding Category Limits
Allot streamlines the set up process with a consistent user experience across every screen and only features five core categories. The subheadings guide the user to input the estimated amount they anticipate to spend in each category.


The Home Tab
The first tile in the home tab visualizes the user's comparative expenditure in all categories. The comparative expenditure graph shows how much the user is actually spending in each category against how much the user had anticipated spending in each category. As the user scrolls to the Transactions section, a filter tab appears towards the top of the screen allowing the user to filter transactions by date or by category. Each transaction visualizes the total amount spent in a particular category and displays the remaining balance in that category, so that users can make better financial judgments and understand how each transaction in a particular category affects their monthly expenses every step of the way.


Adding a Transaction
Users can add a transaction by tapping the ⨁ button towards the bottom of the screen. Allot streamlines the experience of adding a transaction by asking the user for merchant, amount, and date details in one screen and picking one of five categories in the next screen.


The Month Picker
Users can view transactions and their comparative expenditure from a previous month by tapping the 🗓️ icon in the top right corner.
Note: Users can only view transactions starting from the month they had signed up for Allot, since they hadn't set budgets or category limits for preceding months.


Editing a Transaction
Users can long-press on a particular transaction to access contextual buttons that would allow them to edit every aspect of a transaction. A haptic feedback would confirm this user interaction. Furthermore, they can also choose to delete a transaction once they access the edit form.


The Settings Tab
The first tile in the Settings tab visualizes the anticipated expenditure in each category (derived from the amounts the users had input during the set up process) and the budget for the month. Each tile below the anticipated expenditure graph allows the user to edit the budget amount and category limits. Additionally, users can also view budget and category limits from a previous month for reference but can only alter these limits for the current month.


Dark Mode
Allot features full support for dark mode. The color theme for Allot auto-syncs with the default iOS system theme set by the user. The app utilizes a dark green color palette for all screens and uses more vibrancy to make foreground content stand out against the darker backgrounds.


Interactions


Reflections
A couple of days before I started ideating for this app, I had received a courtesy email from a popular budgeting app I had previously used, apologetically stating that my login credentials had been compromised in a data breach. This event made me actively question the underlying reason behind many budgeting apps requiring the user to not only create a login account within one of these apps but also integrate their personal banking accounts as well. It quickly became evident that the driving force behind such integrations was to automate the budgeting process for the user. However, it also entailed the user giving up their privacy to a certain degree and by effect, running the risk of having their credentials exposed in data breaches.

My motivation behind Allot was to devise a contextual budgeting experience without the need to link any bank accounts. Furthermore, with respect to setting up a login account for Allot, I wanted the user to retain their privacy with the option to not only alter their name but also mask their email address as well.

On another note, this project was my first attempt at using the interaction design tool, Principle. Although I had used similar tools (Framer and Flinto) in the past, I enjoyed using Principle and found it to be pretty intuitive in terms of its "Driver" functionality and creating continuous interactions.

I am really happy that I invested my time and effort in this project as it helped me learn a new tool and generate some out-of-the-box ideas in lieu of the "traditional" experiences found in many budgeting apps today.

© 2021.