Savvy Pig
Savvy Pig is a financial savings app that blends a professional tone with playful design. I crafted the brand identity and app experience, using A/B testing to create an intuitive interface.
UX/UI Case Study | Responsive Web App
The Objective
Savvy Pig is an intuitive financial saving app designed to empower users to take control of their finances. I created the concept, name, brand guidelines and overall design. By blending a professional tone with playful imagery, the app removes the intimidation of money management, simplifying expense tracking and savings goals to help users confidently achieve their milestones.
Mockups
Scroll to view more →
The Process
Concept
I created SavvyPig by formulating a precise problem statement and conducting a comprehensive competitor analysis, enabling me to determine the core features for this responsive financial management application.
Logo and Brand Guidelines
I crafted a professional yet welcoming brand identity for SavvyPig, utilizing primary colors symbolizing trust and growth, and designing the logo for clear legibility across various platforms.
Design
I spearheaded the entire design phase, creating comprehensive wireframes, interactive prototypes, and detailed mockups to build an accessible and engaging financial management experience.
Test
Through A/B testing and user testing I validated SavvyPig's design effectiveness, gathering crucial feedback to ensure the financial management solution is intuitive and highly user-friendly.
Users Can...
- •
Track Expenses and Income: view detailed transaction history, as well as log income within categories.
- •
Set Savings Goals: define a goal name, amount and a target completion date.
- •
Visualize Financial Data: access a dashboard displaying spending categories, saving progress, and view trends in financial habits over time.
User Flows
The highlighted portion represents the flow of the design you are seeing in this case study.
Wireframes
Low Fidelity
Scroll to view more →
Mid Fidelity
Scroll to view more →
High Fidelity
Scroll to view more →
Style Guide
COLORS
Primary Colors
Mint
#A8D5BA
Navy
#0E3655
These colors convey a professional yet welcoming tone, symbolizing both trust and growth.
Secondary Colors
Red
#E74C3C
Blue
#3498DB
Green
#2ECC71
Pink
#E91E63
Yellow
#F1C40F
Orange
#FF9800
LOGO
Desktop Mockups
Scroll to view more →
Conclusion
The Savvy Pig project showcases my end-to-end design process, from the initial conceptualization and branding – including the development of the name and logo – through to the creation of a user-friendly and effective financial application.
Recognizing the intimidation often associated with personal finance, the core objective was to design an intuitive experience centered around clear expense tracking, motivating goal-setting features, and easily understandable data visualization. By carefully blending a professional aesthetic with playful visual elements, Savvy Pig aims to demystify money management and empower users, regardless of their financial literacy, to confidently take control of their financial journey and achieve their savings milestones.
