Savvy
"Empowering Students: Convenience, Savings, Exploration – One Card,
Endless Possibilities”
UI Design and Prototyping
Team : 4 member
Duration: 4.5 Months
My Role : UI design and Prototypeing
Tools & Process: UI/ Design system/ Dev offs/ Style Guide/ Documentation/ Labeling/ LO-FI, HI-FI Wireframing/ Prototyping.
Overview
Savvy is a mobile application designed to simplify students’ financial lives by integrating their school ID cards into one powerful platform. From exclusive discounts to smart expense tracking, Savvy is your student companion for smarter living.
Situation
College life can be overwhelming – juggling academics, social life, and limited finances. Students often miss out on deals and benefits due to a fragmented system of coupons, ID-based verifications, and scattered offers.
I observed this problem firsthand during user research and realized that students were spending more time managing budgets than experiencing campus life. This insight sparked the Savvy initiative.
Objective
Action
🔹 User Research & Empathy Mapping
Conducted surveys and interviews with 300+ students.
Identified pain points around discount discovery, ID verification, and tracking spend.
🔹 Wireframing & UI Grid
Created low-fidelity wireframes to map primary journeys
(discount discovery, ID scan, spending insights).Applied an 8pt grid system for visual consistency.
Developed component-based layouts using Figma.
🔹 Accessibility
Designed with WCAG 2.1 in mind – color contrast, focus states, large tap targets
Result
The final prototype enabled:
30% faster access to discounts via smart suggestions.
Unified interface for school ID + discounts + budgeting.
Increased student satisfaction (based on usability test feedback).
Shared with peers and advisors for feedback; received praise for clarity, design consistency, and problem-solution mapping.
SWOT
MOSCOW
MoodBoard
Empathy Mapping
User Mapping
Task
To design and prototype a student-first mobile experience that:
Integrates with school ID cards.
Provides real-time access to student discounts.
Encourages financial awareness.
Offers a smooth, modern UI.
Ensures accessibility and usability.
🔹 Design Tokens & Component Library
Developed a token system for:
Spacing (
4pxbase)Typography hierarchy (H1, H2, Body, Caption)
Color tokens (
Primary Blue,Success Green,Alert Red)
Reusable components: Card views, bottom nav bar, CTA buttons, school ID card widget.
🔹 Prototyping in Figma
Designed interactive flows:
Sign up with School ID.
Explore & apply discounts by category.
Wallet integration to track spending.
Created high-fidelity UI with emphasis on youthful color palette, intuitive icons, and microinteractions.
Brand Guidelines & Style Guide
Colors
Clear Space
Grid
Typography
Thumbnail
UI Library
Icon Library
Components
Figma File Screenshots
Applied an 8px grid and 10 Count Column with Gutter 20 for visual consistency.
Labeling and organizing Screen
Flow Of screens
Splash Screen/ Micro Animation
Designed default reusable component
Prototyping screen
Product Concept
Designed for students, our app transforms savings with location-based discounts and an exclusive in-app wallet. Discover nearby deals on food, shopping, and entertainment effortlessly. Streamlining student life, we aim to enhance the college journey and promote in-app wallet usage, providing a comprehensive solution for student savings.
In summary, our app's core objective is to simplify students' lives, offering convenience, savings, and exploration with seamless integration of school ID cards. Strengths include a comprehensive discount directory and a user-friendly interface. Opportunities arise from a growing student population and digital payment trends, with threats encompassing economic instability and data security concerns. The highest priority is seamless school ID card integration to enhance the college experience.