Savvy

Enhancing financial awareness, budgeting behavior, and decision-making through a simplified, user-friendly expense management experience

My Role: UI Designer/ Design System

Duration: 4–5 Months

Project Type: NYIT_UXUI_Design_Club x Student welfare SGA

Tools & Process: Figma, Miro, User Interviews, Surveys, UX/UI Design, Advance Research / Navigation / Unity for AR / End-to-end research / LO-FI, HI-FI Wireframing/ Prototyping / User Testing / Competitive Analysis / Data Analysis / Performance Evaluation / Project Management

Overview: 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.

The Objective was to improve:

  • Help users track and understand spending behavior clearly

  • Reduce financial anxiety caused by poor visibility of expenses

  • Improve budget planning and decision-making

  • Create a simple, intuitive financial management experience

  • Increase user engagement with daily expense tracking

A teal-colored circular badge with the word 'SAVE' around the top. Inside, there's a location pin icon with a percentage symbol inside it.

A Quick Peek Into the Solution

We designed a mobile-first expense management platform (Savvy) that:

  • Simplifies expense tracking through intuitive UI and quick entry flows

  • Provides visual insights (graphs, breakdowns) for better understanding

  • Helps users set budgets and track progress in real-time

  • Uses smart categorization and reminders

  • Creates a low-effort, habit-forming financial experience

Woman takes notes on paper at a table with laptop, nearby are scissors, and another person is using a smartphone.

Objective

Icons with words: Partnership, Student ID, User-friendly, Savings, Feedback

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

SWOT

MOSCOW

LOGO

what this logo means ?

A teal-colored circular badge with the word 'SAVE' around the top. Inside, there's a location pin icon with a percentage symbol inside it.
A table with four columns titled Strength, Weakness, Opportunity, and Threat. The table describes the benefits and risks of a business or project, including a comprehensive discount directory, dependence on partnerships, growing student population and digital payment trends, and concerns about economic downturn and data security.
Table titled 'MOSCOW Analysis' with four columns labeled Must-Have, Should-Have, Could-Have, and Won't-Have. Must-Have includes seamless integration with school ID cards; Should-Have features comprehensive discount directory and user-friendly interface; Could-Have suggests in-app wallet for discounts; Won't-Have indicates features not directly related to enhancing the student experience.

MoodBoard

A collage of several scenes including a modern café with large windows and people working inside, a park with trees and a pathway, a person holding a smartphone displaying a city map, a hand holding crumpled euro banknotes, a concert with a large crowd and bright stage lights, a sale sign with denim clothes, and three cups of coffee with latte art.

Empathy Mapping

Mind map centered on a person's needs and behaviors, with a drawing of a man named Mike in the center. The map is divided into four quadrants labeled Says, Thinks, Does, and Feels. The Says quadrant includes notes on financial management, enjoying street food, and New York challenges. The Thinks quadrant highlights prioritizing solutions and balancing expenses. The Does quadrant notes using a scooter, buying winter clothes, and sharing groceries. The Feelings quadrant mentions being satisfied with solutions, stressed about finances, and open to cultural experiences.

User Mapping

Flowchart depicting a student journey of a New York graduate student named Mike, a UX/UI designer, through using a student discount app for managing transportation, groceries, dining, and more, including pain points and solutions.

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 (4px base)

    • 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 :

A woman giving a presentation in front of a projection screen displaying information about UI Faces and coolors on a classroom or conference room wall.

Icon Component 

Button Component 

Colors

A color chart showing three colors with their hex codes: teal (#11A8A8), black (#000000), and white (#FFFFFF). The teal color is selected and displayed as a square next to its hex code.

Clear Space

Graphics showing recommended size and spacing for a location pin icon with a percentage symbol inside, labeled 'SAVEY'. The image includes measurements for maintaining clarity and avoiding crowding, with one icon boxed at 50x50 pixels with a 50-pixel gap, and another at 77x77 pixels with a minimum size guideline.

Grid

Diagram showing a smartphone with measurement guides around it and a highlighted rectangular area on the screen, indicating an app or screen layout.

Typography

Diagram showing a square with dashed lines and arrow pointing to it, labeled 'SQUARE' in a flowchart style.
Three monochrome app icons with a percentage symbol, a location pin, and the word 'SAVVY'.
Black silhouette of a person playing basketball, jumping to make a shot, against a plain black background.

Thumbnail

Three app icons with a white background, featuring a teal logo with the word 'SAVVY' and a percentage symbol inside a location pin, labeled 'Color' below.

UI Library

Icon Library

Smartphone screen showing a grid of various app icons, including home, details, navigation, wallet, share, call, menu, bookmark, shopping cart, utensils, ticket, and film strip icons.
A diagram displaying various icons grouped into categories, representing different functions or services such as communication, navigation, social media, travel, and shopping. The icons are arranged in a grid format with purple dashed borders and blue symbols.
Multiple sign-in buttons for Google, Apple, and current location, arranged in columns with options like 'Skip,' 'Next,' 'Sign In,' and 'Create One' on a dark background with neon border outlines.

Figma File Screenshots

Applied an 8px grid and 10 Count Column with Gutter 20 for visual consistency.

A digital design mockup showcasing different mobile app layout screens for sign-in and homepage, displaying user interface elements such as sign-in forms, icons, text, and promotional banners.

Flow Of screens

A collection of mobile wireframe screens for app design, organized into three groups: screens for showing process and flow, screens for booking and payment, and screens for map and searching places.
Series of mobile app splash screen designs for Savvy, showing app logo, illustrations of people using the app, and sign-in options.

Splash Screen/ Micro Animation

Prototyping screen

A complex wireframe diagram showing the flow and structure of a mobile app or website, with multiple screens, links, and interactions indicated by arrows across a dark background.

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.

Screenshots of a mobile app interface promoting discounts, event discovery, ticket booking, and payment options. Includes illustrations of happy people, concert scenes, and various app screens.

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.