Moneyment

A financial mobile app that empowers users to effortlessly create budgets, gain real-time spending insights, and receive AI-generated suggestions for financial control.

Website Prototype

Moneyment Presentation Feature Deck

Main Roles:

Front-end Web Developer & Video Editor

Project Timeline:

September 2023 – December 2023

Platforms:

iOS
Android

Tools:

Figma
Expo
Visual Studio Code
GitHub

OpenAI
OCR
AWS Lambda
Trello

Illustrator
Photoshop
Premiere Pro
After Effects
Storyboarde

Purpose

Objective

The primary objective of Moneyment is to empower students by leveraging the capabilities of artificial intelligence. By incorporating advanced AI algorithms, the application aims to provide tailored solutions and personalized insights, enabling users to navigate the complexities of their financial obligations more effectively.

Problem

1/3 of Canadians face financial struggles, with 1/4 unable to cover expenses exceeding $500 CAD. High costs of essentials contribute, particularly affecting 18-30-year-olds, who make up 57% of those facing financial challenges. How could an application create a lifestyle that allows users to shift their spending habits.

Solution

Moneyment is utilizing AI to address their specific financial needs. It provides personalized support for managing debt, monthly payments, and overall financial health.

Through innovative OCR technology, users can easily scan and capture transaction details from receipts, improving accuracy and saving time. Furthermore,

Moneyment employs advanced data visualization tools to present spending habits visually, empowering users to identify trends and make informed decisions for improved financial planning.

“Scan Receipt” functionality using OCR

Design Process
Branding Identity

Moneyment believed that having a strong brand identity with core values nurtures trust and security within the application’s capabilities. The responsibilities provided for each team member was understanding the core values, creating and designing any feature or process that follow the brand identity.

The logo illustrates a figurative representation of financial growth — demonstrated by the bar graph, leaf, and gradual change of tonal greens for each bar.

User Research

Moneyment faced the challenge of creating a captivating and trustworthy financial app experience for their target audience. They needed to address user preferences, including visual engagement, personalization, and security concerns, while also tackling common pain points such as complex terminology and error identification.

Through a combination of a user survey and secondary research, key insights were uncovered:

User Preferences:Younger users preferred visually engaging content akin to social media platforms like Instagram and TikTok.
App Usage:While some users tracked finances via bank-affiliated apps, many were not actively using money-tracking apps due to security concerns and complexity.
Desired Features:Personalized features and robust budgeting tools were highly sought after, especially among Millennials and Gen Z.
Pain Points: Users struggled with complex financial terminology, lack of trust in app reliability, and difficulty in identifying errors during data entry.

From the user survey results, Moneyment decided to prioritize the business model valuing security and trustworthiness. Moneyment would focus their efforts on finding potential implementations of features such as application personalization, financial recommendation notifications, goal-setting tools, and a reward system. Overall, the user survey feedback would first gather research to understand the target audience’s pain points — iteratively user testing the application through the development process.

Competitive Analysis

Moneyment conducted an analysis of nine financial budget apps to identify potential competitors. We included Mint, a popular app for tracking expenses and managing finances, and You Need A Budget (YNAB), known for its effective budgeting methodology. Personal Capital was highlighted for its proactive approach to managing finances, while PocketGuard was praised for its insights into users' financial habits. Goodbudget emphasizes the envelope budgeting method, and EveryDollar follows zero-based budgeting principles. Wally offers a simple tool for organizing finances, while Honeydue is designed for collaborative financial management among couples. Spendee provides comprehensive features for tracking expenses and achieving financial goals.

Moneyment identified bank connections as a cybersecurity threat and noted that premium features behind paywalls were a pain point for users, as many essential features were unavailable in the free versions of these apps.

Usability Testing

Usability Testing occurred in four rounds over two months during Moneyment's development. Testers, all post-secondary students, provided feedback on various features. Suggestions included adding more setting options, improving OCR uploading with camera usage, addressing incomplete input fields, and enhancing transaction features such as making transactions clickable.

Third Round of Usability Testing, focusing on main features and functionality
Feedback throughout multiple testing rounds highlighted various usability issues in Moneyment. This included problems with button positions, visual elements, OCR scanning, budget selection, manual transactions, settings, error messages, and navigation. Despite iterative testing, persistent issues remained, such as unclickable elements, transaction confirmation errors, and difficulties with budget modification and creation.

Light Mode

Dark Mode

Prototyping from MVP 1.5 after First Round of Testing for the “New Budget” screens

High-Fidelity Prototyping

MVP 1 Wallet Screen
MVP 1.5 Transactions Screen, revised from user feedback
MVP 2 Wallet Page, subsidiary prototype

Moneyment had three MVP prototypes: one was the original high fidelity that was used for the first and second user testing (MVP 1), the second was the updated version (MVP 1.5), and the third was a revision of the second (MVP 2).

Due to time constraints, the creation of MVP 2.0 was disregarded, as the MVP 1.5 prototype had more potential with accessibility, which later came in handy when implementing the “Chat” feature in the bottom navigation.

Feature Sprints

Feature sprints were taken upon the development team for the remaining one and a half month deadline for the Showcase Presentation in early December. For each week leading up to the presentation day, one major feature would be introduced into the application:
November 7, 2023

OpenAI connection
OCR scanning

November 14, 2023

OpenAI connection
OCR scanning

November 21, 2023

OCR scanning
Camera functionality
Light/dark mode
Firebase connection with web supplement
OpenAI reading data

Following these major feature implementations, Moneyment pushed its focuses on bug fixes and accessibility adjustments that will be viable to present for the showcase presentation. In addition to development, marketing materials such as business cards, brochures, commercial advertisements, and other merchandise were curated for the presentation.

Marketing Materials
Various forms of both print and digital media were created by Moneyment for the preparation for the Showcase Presentation. The deliverables included the following.

Tri-fold Brochure
Promotional Story-based Ad Campaign
Business Cards
Name Tags
Informational Website

Brochure

The tri-fold brochure designed by our design team embodies the essence of professionalism, innovation, and user-friendly design. Crafted with attention to detail, the brochure serves as a gateway to the world of seamless connectivity and productivity enhancement offered by the company's application.

Outside

Inside

The brochure features a sleek and modern design, with clean lines and a harmonious colour scheme that reflects the company's brand identity. Dielines indicated in red dotted lines note the brochures were to be cut along the corners to reinforce the sleek design. The layout is thoughtfully organized, with each panel dedicated to conveying essential information in a clear and visually appealing manner.

Printed on high-quality, glossy paper stock provided at BCIT’s Graphic Communications facility, the brochure exudes sophistication and durability. The tactile experience of holding the brochure further enhances the perception of professionalism and reliability associated with Moneyment.

Promotional Story-Based Ad Campaign

The Moneyment ad campaign consists of a one minute, forty second advertisement that is following the daily life of the main character (Joey) who is a post-secondary student. It follows a storyline where Joey is meeting with friends and brings a homemade lunch, then later commuting to the grocery store after saving enough money to buy her mother a birthday cake. This narrative is demonstrating the values of goal setting and self-control with personal finances.
Storyboards using sketches and Storyboarder software

Sketches

Original

Behind the Scenes ProductionCamera WorkTwo cinematographers were led by a director who meticulously planned and executed every shot in the ad. Both cinematographers were equipped with iPhones, utilizing their tactility and versatility.
Production DesignThe entire team meticulously crafted the sets and props for each scene, ensuring that every detail contributed to the overall aesthetic and narrative coherence of the ad. From the exterior of a school campus to the cozy interior of a small-town home, every location was carefully curated to evoke a specific mood and atmosphere.
Post-ProductionIn the editing suite, skilled editors worked tirelessly to assemble the footage into a cohesive narrative, refining pacing, and sequencing to maximize emotional impact. Color grading techniques were employed to enhance the visual aesthetics of the ad, giving it a polished and cinematic look. Sound designers and other team members collaborated to decide on a soundtrack that complemented the visuals and heightened the emotional resonance of the ad.

Motion designers worked with sound designers to build graphics and animations that replicate phone notifications, price tags, and brand logo banners. Sound designers composed sound effects for the visual graphics by the motion designers that would assist the implementation of motion graphics.

Final Promotional Campaign
Director: Kaitlyn Cameron
Camera Operators: Corey Rutt, Sara
Video Editors: Giovana Birck, Jacob Skilling, Justin Wu
Motion Designers: Jacob Skilling, Justin Wu
Sound Designers: Jacob Skilling, Jenny McMahon, Giovana Birck
Actors: Joey Nip, Sara Shiojima-Ali, Giovana Birck

Business Cards

The business card design for Moneyment embodies professionalism, sophistication, and connectivity. The front side features the company logo and name prominently, along with the job title and name, establishing a sense of credibility and authority.

Contact information including a LinkedIn URL, email address, and website URL is prominently displayed, making it easy for potential clients or partners to reach out. The back side of the card includes the company logo with a dark background including a transparent mobile application logo.

Similar to the brochure, the business cards were printed at the Graphic Communications facility at BCIT, utilizing a slightly thicker — yet high quality card stock.

The business cards are hand-cut to form the shape the leaf included in the logo, providing a connection to our branding identity.

Front

Informational Website

Website

The Moneyment informational website stands as a pivotal component of its marketing strategy, serving as a comprehensive hub for educating and engaging its target audience. Through a user-centric design and high-quality content, the website effectively communicates Moneyment's unique financial solutions tailored for post-secondary students.

Visitors to the site are greeted with intuitive navigation, allowing them to easily access valuable resources, including articles, guides, videos, and interactive tools aimed at enhancing their financial literacy and empowering informed decision-making. Furthermore, the website showcases Moneyment's expertise and thought leadership in the higher education and financial sectors, fostering trust and credibility among its audience.

By providing valuable information and resources, the Moneyment informational website serves as a powerful tool for attracting and converting prospects into loyal users, driving brand awareness, and establishing the company as a trusted authority in the industry.