Perdiem

• GIF

Inspiration

If you live in Toronto or Vancouver, chances are on a normal day to the office everybody you pass by is literate. Yet at the same time, among those very same people, 6 in 10 rate their financial literacy as poor. Our app aims to change this for Gen Z by teaching one of the most fundamental skills on the path to financial literacy: budgeting. Per diem is commonly known as a business term where a company reimburses employees for expenses by each day. However, its latin origins directly translate to "for each day," aptly describing how we break down budgeting into manageable and visually pleasing chunks, so that we can help others manage their expenses on a day by day basis.

Going into university often means managing your finances alone or with little guidance from others. This new and unfamiliar experience can add a lot of stress to an already difficult transition, and often correlates to a lack of financial direction. Currently, most budgeting applications, even industry-leading ones like “You Need a Budget'' have outdated UIs that are both unappealing and overly complex for most users. Most of Gen Z has instead turned to just winging it without a budget, using spreadsheets, or even old fashioned paper - resulting in a lack of free resources with a low barrier of entry and time commitment.

What it does

Perdiem is a free resource that integrates with your bank account and expense tracking. Instead of keeping receipts or manually entering costs, everything is automatically synced with this web app.

I and many of my friends enjoy Spotify Wrapped because it gives you an overview of your listening over a year and makes it easily shareable on social media. This helps me keep track of how my tastes have changed, something you can similarly do with Per diem. Users can look at daily, monthly, or yearly purchases, offering a time capsule that captures your expenses with minimal annoyance. You have your top 4 spending sections with indicators of how they have changed over time. These categories are further broken down into places with the most money spent of each section, plus a quick weekly, monthly, and yearly breakdown. We also give the user the option to see how they performed with their budget over time, all tied together with a final emoji rating. We have the option to see a more detailed breakdown in order to help them make more informed decisions on their budget.

At Perdiem, we believe that users own their data. We implemented a function to export all purchase data as a spreadsheet. They can then archive this or even share it with a friend. The calendar itself uses a color scale to show you how much you spent today. The lighter the color- the less you spent (hover to show example), making keeping tabs on your spending extremely easy. To view your daily spending, simply click on a date, or view your weekly and monthly overview from the left sidebar. If you want to set personal goals, the “your budget and goals” section lets you enter and change numbers, while allocating money to goals without logging on. For example, if you put your monthly budget to $400, our algorithm will calculate how much you should ideally be spending per day to make the budget. If you spent less than our recommended calculation, the extra difference will be deposited in the goal of your choice at the end of the day. Contrastingly, the buy your mom a present goal is restricted by the same algorithm. If you go over, money will be removed from the goal and added to the budget to keep you on time. Although these goals are examples that can easily be user modified with the edit icon, they create the idea of both commitment and long term gratification. Positive or negative feedback keeps the user accountable with goals that they choose to personalize their experience.

How we built it

We started on Figma and created our design system on a 16px grid, using components like daily messages and emojis. Our main font is Manrope, a grotesque font that conveys friendliness and readability. We reinforced the approachability of the design with a clean white layout, soft greys, and rounded edges. The website itself was built with Next.js, with Framer motion for animations, Chart.js for visualizations, and a mix of Tailwind and plain CSS for styling. Backend API requirements and static page generation were all handled by Next. Data was managed through a redux-like store we wrote and integrated with Localstorage. Deployment was done with Vercel and Domain.com.

Challenges we ran into

In regards to design, data visualizations can often be non-friendly for those with visual disabilities. We chose 2 colors that were easily distinguishable and tested for many different vision conditions, including Tritanopia and Deuteranopia. In the future, we would implement a screen reader, skip to main content, high contrast mode, customizable colors, and font size control. CSS implementation for complex SVG card layouts was particularly time-consuming and data fetching with Next.js was often confusing on which parts of the application were part of the client and which were the server. Dashboard layouts took a long time to build due to the intricacy of the CSS grids we were using, while the tooltip presented interesting issues with regard to managing the flow of elements in the DOM.

Accomplishments that we're proud of

All in all, financial stability is hugely important, especially for the surprisingly high number of financially illiterate. Perdiem fulfills a market gap for an uncomplicated and easily accessible resource that is made just for those new to the world of finance. We are proud of being able to accomplish so much in such a short amount of time, and hope Perdiem would help with the stress of university finances.

What's next for Perdiem

Our MVP lacks many features that we want to include, such as a search bar for expenses, more than one option for data visualization, exports, and a rewards saving program. We would also want to refine the design system and make UX changes were weren’t initially able to do. We think the design would look more polished if the number of components were standardized and reduced, as well as the colors and text styles. Due to time constraints, we couldn’t add user accounts, bank APIs, or 2FA. And of course, I wouldn’t be a designer if I didn’t ask for dark mode.

Built With

• chart.js
• figma
• framer
• javascript
• next.js
• react