Savvy

"Empowering Students: Convenience, Savings, Exploration – One Card,
Endless Possibilities”

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.

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.

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

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

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

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

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.

MOSCOW

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.
Graphic design with a large teal badge featuring a percentage sign inside a map pin icon, and the words 'Customer Discount' with slogan 'SAVVY' along with placeholder text 'Logo'.

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.

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'.
Mobile app screen with proof of residency section, showing country of residence as Australia with a change button, and ID verification documents including driver’s license and passport issued in Australia. On the left side, there are icons representing different country flags, with labels indicating 6 variants, and icons representing documents such as a car and a globe, with labels indicating 2 variants. On the right side, there are icons with arrows and a symbol indicating 4 variants.
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.

Components

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.

Labeling and organizing Screen

Screenshot of a digital interface showing a menu with options like 'Layers,' 'Splash Screens,' 'Find through location,' and 'Explore place screen,' among others.

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

Designed default reusable component

Flowchart diagram with multiple components depicting sign-in options including Google, Apple, current location, and navigate buttons. Components are labeled and include buttons such as 'Change', 'Skip', 'Next', 'Sign In', 'Create One', and options for signing in with Google or Apple, and using current location.

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.

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.

Project Conclusion