top of page

MONEYMENT

Product Designer

Financial management app that simplifies budget tracking by scanning receipts through Artificial Intelligence (AI)

TEAM

  • 1 Project Manager

  • 4 Designer

  • 4 Developers

TOOLS

  • Figma

  • FigJam

  • Trello

TIMELINE

  • Research: 2 weeks

  • Design & Test: 5 weeks

  • Development: 5 weeks

TECHNOLOGIES

  • OCR Space

  • OpenAI

  • Expo

Woman scanning receipt using the digital app Moneyment

CONTEXT

The Problem

According to Statistics Canada (2023), a notable 1/3 of Canadian residents are struggling to meet their basic financial needs. Also,  youths are the most concerned about their finances , highlighting the depth of the financial problem in society today.

The Hypothesis

We hypothesize that a significant challenge they face comes from a  lack of knowledge and skills in budgeting . We believe that if they have support in developing financial literacy, they will have a better financial life.

Considerations & Constraints

  • Project developed during academic period, meaning the team was not exclusively dedicated to its creation

  • With a tight timeline and little margin for error, we conducted  weekly usability tests  to iterate on the designs

  • No budget was available, which restricted our API and storage options,  limiting the resources  we had access

  • The team was not familiar with implementing AI into applications, which required additional time for research

RESEARCH

Primary Research

To validate our hypothesis, we conducted a  qualitative investigation of budgeting habits among post-secondary students . Tasking 9 participants to create and manage a budget for a week, we examined their unique processes and factors influencing their enthusiasm throughout the budgeting process.

Click on the image to expand it!

9 cards organizing the research highlights based on each participant

Key Findings

CONFUSION

Students are unsure how to budget, highlighting a significant gap in accessible financial resources

intimidating.png

INTIMIDATION

Participants reported finding budgeting intimidating, leading to avoidance due to fear of failure

TIME AND BOREDOM

The perception of budgeting as time-consuming and boring was a prevalent feeling among participants

Personas

Based on the insights from our research, we created two personas that encapsulate the diverse experiences and needs of our users

Liza Chow persona, a 20-year-old student and salesperson who needs to saty on top of her finances
Omar Ali persona, a 28-year-old student and line cook who needs to budget better to save for the future

IDEATION

How Might We?

Thinking about Liza and Omar, our personas, the team came up with possible solutions and features focused on their main pain points by answering the following question 

How might we make budgeting easier and less overwhelming? 

 Automation 

 Segment budgets 

 Clear interface 

 Visualization 

Assign transactions to budgets by  scanning receipts 

Create  budget cards  with progress tracking and information

 Minimalist  interface with moderate colour usage and visual cues

Display  charts  with their essential financial information 

CONCEPT DEVELOPMENT

Information Architecture

With the main ideas in mind, I built the Information Architecture focusing on giving users a non-intimidating, quick and well-structured process for easy budgeting

Information architecture displaying Moneyment's main screens: Transactions, Add, Budget and Settings

Exploratory Sketches

The design process began with sketching key screens. Through a collaborative effort, team members brainstormed, conceptualized, and drew diverse layouts and interactions.

The sketches underwent refinements, exploring various design approaches. As the process evolved,  I synthesized all the ideas into one solution for each screen  so it could be further explored.

Black and white wireframe representing the "Transaction" screen. There're some arrows with notes explaining the main aspects of the interface
Black and white wireframe representing the "Budget" screen. There're some arrows with notes explaining the main aspects of the interface
Black and white wireframe representing the "Add" screen. There're some arrows with notes explaining the main aspects of the interface

Wireframes

design

12 black and white wireframe representing the "Transaction", "Budget", "Add" and "Settings" screens and its flows

1st Iteration

12 high fidelity mockups representing the "Transaction", "Budget", "Add" and "Settings" screens and its flows

Usability Testing

Participants want to  control the time frame  they visualize their financial information

Before and after of the "Transaction" screen. The refined version has a time frame button

To achieve this, I added a button where they can select to see their information for the  week, month or year 

They thought the budget page was confusing and were  unsure how to add new budgets 

Before and after of the "Budget" screen. The refined version is simpler and the "New Budget" button has great findability

To simplify the experience, the information from "manage budget" was  allocated to the primary budget screen 

Before and after of the budget's cards. The refined version is simpler and smaller, which means it doesn't get crowded on the screen

The budget cards were  simplified to be more scannable  and only display necessary information

Some  confusion on the budget cards  also occurred and participants were unsure about the recurrence labels

Participants also expressed the individual budget page was  too crowded and complex 

Before and after of the specific budget screen. The refined version is simpler and the users can click to add a new transaction from this screen

Then, I  removed elements that were not adding value  to our specific user base experience

2st Iteration

12 refined high fidelity mockups representing the "Transaction", "Budget", "Add" and "Settings" screens and its flows

Final PRODUCT

The final interface focuses on simplicity, functionality and visual appeal, intending to provide a stress-free experience.

As we learned throughout our research process, finances are a complex, intimidating and sensitive subject for our users, so  the design aims to portray control and empowerment. 

Log in and register screens
Transactions screen displaying a graph and a list of transactions throughout the month
Add screens displaying the whole process of scanning a receipt
Budget screens displaying the list of transactions and the overview chart

OUTCOMES

Best AI-Driven Digital Application

The team presented a  live demo  at the BCIT Annual Student Innovation Design and Technology Showcase for an  audience of over 300 people.  The app secured the title through a voting process, highlighting its  widespread recognition and endorsement  within the academic and professional community.

Moneyment team posing with Mayor Mike Hurley of the City of Burnaby, BCIT President Dr. Jeff Zabudsky, Kenton Low, the Dean of the School of Business + Media, and Henry Leung

LEARNING

Collaboration & Leadership

I played a key role in  assisting designers and developers , making sure everyone's needs were heard. By actively listening to the unique requirements of both teams, I aimed to  foster a productive and safe work environment  where creativity and innovation could flow. 

Time Management

Creating this project from scratch while managing seven other high-demanding courses was a true challenge. This situation pushed me to develop  effective strategies for prioritization and organization , where I learned to make every minute count, and set clear goals to stay on track.

Designing AI Experiences

In 2023, crafting AI experiences presented unique challenges given their  novelty and potential intimidation  for most people. Achieving a seamless experience required a balance between technology and simplicity, which was crucial for users to understand, trust and adopt the process.

Cozy cafe setting with payment terminal and Moneyment

Future ENHANCEMENTS

Charts

Charts need further work to  enhance their accessibility  to ensure better understanding and readability for a diverse audience. Things to improve involve:​

  • Change bar charts to  100% stacked bars  to better illustrate when users go beyond their budget

  • ​Add  graphic elements  for different categories and don't rely solely on colour to convey information

  • ​Guarantee contrast of at least  3:1  between colours

Scanner

The scanner feature can be challenging for some users and strategies need to be developed to ensure they also have a seamless experience. Some of them involve:

  • Incorporate  sound effects and vibration cues  to communicate when the receipt is correctly framed and ready to be scanned

  • Add  guided scanning assistance  through audio prompts and ensure users can easily deactivate it after mastering the task

Thanks FOR READING IT!

bottom of page