---

What I Gained From Designing SpendCal

Problem

Managing personal finances effectively is a common challenge for many individuals, couples, and families. Existing budgeting tools, such as You Need A Budget (YNAB) and EveryDollar, provide helpful insights into spending but fail to integrate with the calendars that users rely on daily. Additionally, these apps often lack flexibility for joint budgeting without forcing users to share a single login. This gap creates frustration for users seeking a seamless, collaborative, and proactive way to plan their finances in tandem with their daily schedules.

Actions

1. Research and Planning:
   • Conducted informal research on user pain points with existing budgeting tools, focusing on calendar integration and joint financial management.
   • Reviewed competitor apps to identify their strengths and weaknesses, with an emphasis on UI/UX design and feature gaps.
   • Developed Project Brief
2. Design Phase:
   
   • Developed a sitemap to structure the app’s navigation, ensuring logical and intuitive user flows.
   • Created wireframes to outline the core functionality, such as calendar integration, spending heatmaps, and notifications.
   • Iterated on wireframes based on peer feedback, refining the layout and user interaction pathways.
3. Prototyping:
   
   • Built an interactive prototype using Figma, focusing on:
     
     • Calendar views (monthly, weekly, daily) integrated with budget items, categories and reminders.
     • Real-time bank connection setup.
     • Joint budgeting features, allowing individual and shared financial management.
   • Conducted two rounds of prototype revisions informed by user testing and stakeholder input.
4. Validation:
   
   • Tested the prototype with peers in discussion groups to gather feedback on usability, clarity, and satisfaction with features such as heatmaps and calendar integration.

Results

• Delivered an interactive prototype showcasing all key features, including calendar integration, spending trends, and joint budgeting capabilities.
• Created a seamless and visually appealing UI and easy-to intuit interactions that users found easy to navigate.
• The final prototype received positive feedback from peers.

Lessons

1. Software Competency: Figma is a robust tool with many similarities to tools with which I am familiar, such as the Serif Affinity & Adobe Creative Cloud application suite. However, it requires just as much dedication to become familiar with and “master” in practice. I intend to continue personal exploration of the software in order to increase my competency.

2. User-Centered Design is Key: Feedback from peers highlighted the importance of outsider insight.

3. Iterative Processes and Collaboration Improve Outcomes: Regular revisions and peer critique significantly improved the prototype beyond my initial vision, ensuring user needs and expectations were met as well as a review of interactive functionality.

4. Prototypes are Powerful for Validation: A well-executed prototype effectively communicates the app’s potential to users and stakeholders, allowing for early feedback and course corrections before committing resources to development.

---

Project Brief

SpendCal
Integrated Budgeting Calendar

20 October 2024

 

Table of Contents

Executive Summary

Company Information

Client name

Product Description

Suite or Standalone

Budget & Time

Timeline

Budget

Key Features

User Base

Target users

User Decision Factors

Competition

Functionality

Platform.

Platform choice

Rationale

Design & Visual Considerations

 

 

 

Executive Summary:

SpendCal is a multi-platform financial management tool that integrates with users’ calendars (Google, Outlook) to provide an intuitive budgeting experience. By securely connecting to users’ bank accounts through Plaid, SpendCal offers real-time tracking of balances and expenses, helping users gain better control over their finances. The app differentiates itself by displaying spending trends on a calendar, highlighting when expenses are highest and when bills are due. Additionally, it visualizes spending through heatmaps and provides reminders for upcoming financial goals or commitments. Unlike its competitors, SpendCal offers unique functionality for joint and separate budgeting, allowing users to collaborate with a spouse without sharing a single login. The app is accessible across devices—whether on mobile (iOS, Android), tablet (iPadOS, Android), or desktop browsers—offering a consistent and seamless experience.

Company Information:

Client name

• SpendCal Solutions (aka SpendCal)

Product Description

• SpendCal is a cross-platform web-based application, designed to simplify budgeting by integrating financial data with users’ existing calendar tools. SpendCal focuses on creating personal finance tools that streamline day-to-day financial management and promote proactive financial planning through predictive insights and integrated scheduling Its key feature is the integration with users’ calendar service of choice, allowing users to visualize spending patterns, track upcoming expenses, and set reminders for financial commitments.

Suite or Standalone

• This is a standalone app, with potential for further expansion into a suite of financial management tools (e.g. savings planning, tax assistance, self-employment/freelance financial management).

Budget & Time

Initial scope of project is for proof of concept through wireframes and prototyping. Further development will be a separate, subsequent project at a later date.

Timeline

This project is on a fast-paced deadline, estimated to conclude no later than 8 December 2024.

• Sitemap: 27 October 2024
• Initial Wireframes: 3 November 2024
• Feedback Revised Wireframes: 10 November 2024
• Initial Prototype: 17 November 2024
• Stakeholder review, interactive prototype development: 24 November 2024
• Final Prototype: 8 December 2024

Budget

The below estimates budget for the user experience design phase of SpendCal, including sitemap creation, wireframes, prototyping, and prototype revisions, is between $22,000 and $30,000:

1. Sitemap
   1. Description: Creating the sitemap that outlines the structure of the app, its pages, and user flow across the platform.
   2. Estimated hours: 20–30 hours
   3. Cost estimate: $2,000–$3,000
2. Wireframes
   1. Description: Developing low-fidelity wireframes for primary devices, including the dashboard, calendar integration, transaction views, and notifications across devices.
   2. Estimated hours: 60–80 hours
   3. Cost estimate: $6,000–$8,000
3. Wireframe Revisions
   1. Description: One round of revisions based on feedback from stakeholders and/or usability testing.
   2. Estimated hours: 20–30 hours
   3. Cost estimate: $2,000–$3,000
4. Prototyping
   1. Description: Creating an interactive prototype that simulates the full user experience across platforms.
   2. Estimated hours: 60–80 hours
   3. Cost estimate: $6,000–$8,000
5. Prototype Revisions
   1. Description: Implementing revisions based on user testing and stakeholder feedback to fine-tune the prototype.
   2. Estimated hours (per round): 30–40 hours
   3. Cost estimate (per round): $3,000–$4,000
   4. Total for anticipated two rounds: $6,000–$8,000
6. Total Estimated Budget for Design Phase
   1. Low estimate: $22,000
   2. High estimate: $30,000
7. Breakdown:
   1. Sitemap: $2,000–$3,000
   2. Wireframes: $6,000–$8,000
   3. Wireframe Revisions: $2,000–$3,000
   4. Prototyping: $6,000–$8,000
   5. Prototype Revisions (2 rounds): $6,000–$8,000

Key Features:

1. Calendar Integration: Syncs with users’ existing calendars to display spending habits and highlight important financial dates, like bill due dates.
2. Heatmaps and spending trends: Offer visual representations (heatmaps and graphs) of spending patterns to help users identify periods of high and low spending, or trends in unplanned expenses.
3. Secure Bank Integration: Use Plaid or similar service for secure, real-time transaction and balance updates.
4. Notifications & reminders: Use connected calendar service to notify users about upcoming bills, spending patterns, and savings goals.
5. Spouse Access and Joint budgeting: Allow users to collaborate with a spouse by providing both a joint account and individual budgeting accounts, so they can manage share finances while affording for users to keep individual budgets separate (e.g. gifts, hobby savings, or business expenses).
6. Cross-platform consistency: afford users a uniform experience across mobile, tablet, and desktop application and browser environments, as well as the integrated calendar service, allowing users to access their financial data from any device.

User Base:

Target users

• Young Professionals: Busy individuals managing multiple financial commitments, looking for a seamless way to integrate budgeting with their daily schedules.
• Freelancers & Gig workers: independent workers whose income may fluctuate but need to track and predict expenses tied to specific dates.
• Families and couples: couples looking to manage both shared and individual finances more effectively, with separate and joint budgeting features.
• Tech-savvy budgeters: users who are already comfortable with apps and online tools, and are looking for a more comprehensive way to manage finances and scheduling.

User Decision Factors

• Convenience: users value tools that integrate with what they already use (calendars, online banking).
• Security: Financial data security is a top concern, which is why a trusted platform should be utilized for connecting to users bank accounts.
• Collaboration: Couples will appreciate the ability to budget together while maintaining separate user accounts and privately plan expenses, like gifts or individual business costs, as needed.
• Visual Insights: Users are influenced by easy-to-understand visuals like heatmaps or graphs and spending trends that offer clear, actionable insights.

Competition

• You Need A Budget (YNAB): YNAB is a proactive budgeting app that requires adherence to “four rules”: give every dollar a job, embrace your true expenses, roll with the punches, and age your money. focuses on ease of use and provides data on spending trends, but does not afford calendar integration or joint/separate budgeting options. Basic budgeting features are free for a time, but requires a subscription after 34 days. Couples are required to use single login connected to all accounts to be viewed.
• EveryDollar: focuses on proactive budgeting by assigning “every dollar a job” using Dave Ramsey’s philosophies and reducing debt. It focuses on paying off debts utilizing the “debt snowball” method of using extra funds to pay off the lowest balance debt then using that debt’s minimum payment to pay off the next lowest balance debt faster, until there are no debts left. The app is tied heavily to Ramsey Financial’s “Financial Peace University”, and can be unwieldy for those utilizing alternative methods of debt repayment or those who have little-to-no debt. There is no calendar integration, and basic budgeting features are free but advanced features (such as connecting to bank accounts for real-time transactions and balances, or spending insights) requires a subscription. Couples are required to use single login connected to all accounts to be viewed.
• Improvement areas: Unlike existing apps, SpendCal’s key differentiation is its seamless integration with users’ calendars and its ability to support joint and separate bugeting, offering flexibility for couples managing shared and individual expenses. Formatting calendar entries for calendar services/clients will allow for users to view and create new budget items directly from their preferred calendar service. SpendCal will improve on its competitors’ offerings by allowing users to visualize spending on specific dates, access easy-to-understand insights in graphs and heatmaps, and collaborate with a partner/spouse without sharing logins. Competitor’s subscription-based models are a barrier to entry, an ad-based free model with option to subscribe to remove ads would be advantageous for cost-conscious users and promote wider adoption.

Functionality

SpendCal will include the following core features:

• Sign-up & Login: Secure sign-up with email, Apple ID, Google, Outlook, other account and select a calendar for integration (and log in if service is different from sign-up credentials).
• Home/Dashboard Screen: Centralized view of the user’s financial summary with calendar views for monthly, weekly, and daily.
• Bank Account Integration: Real-time transaction and balance tracking via secure service.
• Category list View: display budget items or transactions in a sortable list, filtered by assigned category or specific bank account and vendor
• Spending trends: Visualize spending trends with graphs and heatmaps to identify high and low spending periods, top categories or types of spending, and progress toward savings goals.
• Notifications & Alerts: Customizable notifications for bill due dates, high spending alerts, and savings goal reminders.
• Spouse Access and Joint Budgeting: Allow users to create joint accounts for shared budgeting, while keeping personal budgets separate.
• User Settings: Users can set preferences for notifications, connect or disconnect bank accounts, and customize financial goals.
• Account Deletion: Clear option for users to delete their account and data.

Platform

Platform choice

Multi-platform web application: SpendCal will be developed as a mobile-first web-based application with consistent interfaces and functionality across mobile, tablet, and desktop device environments. This allows users to access their budgeting tools from any device, ensuring seamless cross-platform experiences.

Calendar service integration will afford users to utilize their connected calendar to manage and create budget items as well, formatting will require consistency and templates will be available via an email client plugin.

Rationale

A web-based solution offers broad accessibility across devices without requiring dedicated app store downloads, but these will be offered for as an option. With uniform experiences across platforms, SpendCal maximizes user flexibility and reduces development complexity for cross-device compatibility, ensuring users have the same access and experience whether they’re using a phone, tablet, or desktop. The key feature will allow users to manage their budget directly in a calendar service/client of their choice (e.g. Outlook, Google calendar, iCloud, etc.).

Design & Visual Considerations

SpendCal’s brand guidelines will be utilized to define design language to include typographic system and color palette.

---