An intuitive web application designed to simplify the way users manage their personal finances. Pocket Change empowers individuals to take control of their spending habits and achieve their financial goals.
Tools:
ReactJS
Bootstrap
Team Size: 4
My Role:
UI/UX Designer
Front/Backend Developer
1.0 Problem to Solve
Previously, I managed my expenses by using a cumbersome Excel spreadsheet that was both time-consuming and frustrating to work with. Its lack of intuitiveness posed a significant challenge.
This experience inspired us to develop Pocket Change, a user-friendly budgeting web-app that simplifies the process of inputting and monitoring financial information.
2.0 Prototyping
Story Board
We created a story board to visualize the user flow along with low fidelity prototypes to help visualize our design.
3.0 Design Strategy
Logo
The color blue represents both a sense of balance and creates a visually engaging impact.
By incorporating a small money bag, our logo effectively complements our branding strategy.
We carefully selected a contemporary san-serif font that aligns seamlessly with our clean and sleek UI.
Layout
The use of cards promotes visual hierarchy and enhances user comprehension.
The grid system establishes consistency and alignment, fostering a seamless and user-friendly experience.
Mobile
For mobile UI, side bar get reduced to display only icons.
Color Pallet
In our color pallet we made sure to include vibrant, powerful colors that would stand out and harmonize with a light and dark background.