Every Penny

We help you save, down to EVERY PENNY.

INTRODUCTION

This project was an opportunity to consolidate all the knowledge I gained over the semesters and collaborate with a team to develop our own budgeting application. We divided tasks among team members, and I took on the role of UX Designer.

My responsibilities included conducting competitive analysis, creating personas, developing a sitemap, designing the logo, selecting color palettes, and crafting both low and high-fidelity wireframes. Additionally, I was responsible for front-end development, applying styling using Bootstrap once the website was built.

COLLABORATORS

Jake Cottam, Michael Lattin

ROLE

UI/UX Designer and Web Developer

TIME

Jan 2024 - April 2024

TOOLS

Figma
Illustrator
HTML
Django
Bootstrap

Process

SITEMAP

I first started working on a sitemap using a website called Lucid that shows how each page is connected as well as the flow of the application. This helped the team get organized and structure the architecture of the application to ensure all the necessary components are included.

This phase also helped the team envision the navigation paths to ensure that users can easily find what they need. It helped us communicate among team members to align everyone's understanding of the application's structure and flow.

Potential Problem: With this sitemap, the team was able to identify some potential challenges and dependencies early in the process. We noticed that the Budgets page was going to need some additional cards on the page showing the incoming and outgoing planned incomes.

COMPETITIVE ANALYSIS

I then performed a competitive analysis on three companies, Rocket Money, EveryDollar, and Honeydue. I found that while all these applications had their strengths on how their app worked, I found that there was still a way we could create our own application and still make it our own even when there are dozens of budgeting applications out there.

PERSONA

It was then important to create a persona to build our application around to keep our goals straight and know what types of things we needed to include in our application. This will help us keep in mind any pain points for users.

WIREFRAMES

The wireframes were tricky for my this time because it wasn't a basic website displaying content. This project pushed me to think about how things would link together and how a user would use the application. How pages would link together to make sense for a user's budgeting needs.

The following images are an example of the high fidelity wireframe we decided with as a team. There is an example of the login page, the home or dashboard page, the budgeting page and an example of a modal popup to edit any transactions entered.

Problem: Our team encountered an issue with time commitment when one member was not completing their tasks. Despite a month passing and multiple offers to assist, the tasks remained undone. To meet our strict end-of-semester deadline and secure our grade, I stepped up and took on a significant portion of the coding responsibilities.

REFLECTION

This project provided valuable insights into working in a professional environment. I was assigned tasks with specific deadlines, ensuring we completed our project within the given timeline. I learned a great deal about teamwork and the importance of compromising on different directions for the project.

Overall, I discovered that there are multiple ways to approach a task, and I enjoyed collaborating with my group. We learned from each other and built upon each other's ideas. Although we occasionally had differing opinions, we worked together professionally and successfully completed the project. The end result was a project we were all proud of.

PHOTO CREDIT: Photos on this page are from Unsplash.

Previous Project

Next Project