Multiple smartphones displaying financial and budgeting app screens, positioned on teal-colored platforms with a light gray background.

A digital application that makes managing money easier and more approachable to college students who have limited financial education or experience.

Spera

↓

Role

Timeline

Process

Tools

UI / UX, User Research, User Interviews, User Testing *Collaborative Project with Leo Song and Iris Xu.

Discovery & Research: 1 month

Design & Testing: 1.5 months

Overall: 2.5 months

Problem Identification

Research

Ideation

Design

Miro, Figma, Adobe Photoshop, Adobe Illustrator

Problem

Many college students don’t receive proper financial education it leaves them unprepared to manage their finances independently.

As they gain financial responsibility, they often feel overwhelmed by budgeting, saving, and decision-making, which can lead to poor financial choices.

A smartphone screen displaying a budget app with categories for groceries, tennis, gas, shopping, and coffee, showing spending amounts and a message about spending too fast.

Solution

A smartphone screen displaying a financial literacy quiz app with a question about student loans and options to borrow either $7,000 or the full $10,000, along with navigation icons at the bottom for home, learning, tracking, community, and profile.

Spera creates an engaging, personalized financially educating environment that simplifies budgeting, saving, and decision-making while catering to varying starting points among college students. It encourages them to practice, learn, and receive support in their journey.

Prototype

The image features the word 'Spera' written in large white font on a dark textured background with a small, minimal logo below the text.
Screenshot of a webpage titled "What is Spera?" describing an app that empowers students with financial confidence. The page features bold text, colorful accents, and a paragraph explaining the app's purpose for college students.
A black background with a light blue wavy line numbered from 1 to 5, representing steps. Step 1 is 'Engaging & Personalized', step 2 is 'Simplify Financial Education', step 3 is 'Aid Healthy Financial Practices/Decisions', step 4 is 'Interest & Under
Bubble chart titled 'Interview Insights' with various circles representing different reasons for poor financial literacy, such as 'Lack of Financial Education,' 'Parental Controls,' 'Time Consuming,' 'Different Starting Points & Interest,' and 'Manua
A presentation slide showing the onboarding process for a mobile app, featuring a friendly greeting on a smartphone screen, with steps including welcoming the user and setting up primary goals. The slide includes images of three phones displaying the
Mockup of six smartphones displaying a tutorial for a mobile app related to financial tracking and social community features, with the screens showing onboarding steps, dashboard customization, spending overview, badge earning, community interaction,
Design mockup of a mobile app dashboard showing a greeting to Jade, a spending overview with a circular progress bar indicating $294 spent out of $460, top spending categories with amounts, and navigation icons at the bottom.
Guide outlining six steps for interactive learning via mobile app, including choosing experience level, course recommendations, tracking progress, summarizing key points, engaging interactively, and celebrating achievements, with multiple mobile app
A digital presentation slide showing a mobile app interface related to a community platform. The slide explains the purpose of the app for posting goals, tips, advice, and questions anonymously, with a visual of a phone displaying community posts.
A mobile phone showing a financial tracking app with a line graph of spending and account balances. Text on the right highlights features like slide bar graph, adding accounts, and viewing all transactions.
Mockup of a mobile app showing transaction history with categories and amounts. The left side displays a list of individual transactions with dates and values, while the right side highlights total balances and instructions to check transactions easi
Mobile app screen displaying a budget tracker with categories such as groceries, tennis, gas, shopping, and coffee, showing allocated amounts and spending progress, and includes sections for weekly budget management and navigation icons at the bottom
Mobile app interface displaying budget categories with progress bars for Groceries, Tennis, Gas, Shopping, and Coffee, along with a notification about spending speed and a learning suggestion for understanding spending habits.
Mockup of a budgeting app on a smartphone screen showing weekly budget settings with categories such as groceries, tennis, gas, shopping, and add a category. The app interface includes buttons to increase or decrease the budget amount in each categor
Mobile app screens displaying a savings tracking feature, with sections for current balance, adding money, and saving goals, set against a black background.
A mobile app interface demonstrating profile features with two phone screens. The first screen welcomes Jade Turner with user details and a 'Continue' button. The second screen shows profile information, including achieved achievements, goals set, an
Screenshot of a mobile app settings page with options for account preferences, privacy controls, and general settings, with text overlay branding that reads 'Settings - Adjust your Account Settings.'

Process

Problem Identification
A presentation slide titled 'What is the Problem?' listing issues with financial education for students, including no financial education, long-term stress, overwhelming feeling, bad decisions, unengaging methods, no tools, and no support, each with an icon.
Dark-themed infographic page about a college student named Jada Fore, aged 23, studying computer science in Los Angeles. The infographic includes a photo of Jada smiling, with details on her biography, problems and challenges, needs, goals, and a skill progress chart for knowledge, experience, and desire to learn.
A black background image with a table showing assessment criteria and the companies YMCA, Khan Academy, Excel, Shark, Bank of America, and Toss, with ratings indicated by symbols: circles for retails, X's for lacking, triangles for insufficient, and circles for retention.
Flowchart diagram titled 'User Flows' illustrating a process for managing overspending through an app, with steps including welcome, login, dashboard, expense tracking, alerts, and interactive challenges.
A digital color palette with various shades of black, gray, white, cyan, and dark cyan, each labeled with its name and hex code, and a description of the color selection process for an app design.
Educational infographic titled '5 W's' with questions and answers about youth financial literacy, including 'What is the problem?', 'Why is it important?', 'Who is affected?', 'Why does the problem occur?', and 'When does the problem occur?'. The text discusses financial crisis, insecurity, and lack of education in personal finance, impacting youth and young adults.
A black slide with the title 'How Might We Statement' in large turquoise text and a paragraph in white discussing creating an engaging financial education platform for college students to build confidence, reduce stress, and make informed financial choices.

We identified the problem space in which we then brainstormed improvement areas by asking ourselves how might we solve the problems that are encountered. 

Research
A graphic titled 'Interview Summary' features six individual portraits of young people, each with a brief bio and financial management experiences. The background is black with teal-colored text and headers.

Creating a provisional persona and conducting interviews helped clarify what our target audience needs and the challenges they may face. This research proved and disproved our original ideas.

Ideation
Comparison of six financial service competitor analysis slides. Each slide features a logo, competitor name, strengths, and weaknesses. Competitors include Toss, Bank of America, YNAB, Khan Academy, and Excel.

Comparing potential competitors and assessing their individual features was crucial to our process to find what has been successfully designed.

A detailed infographic about feature prioritization for a financial budgeting app, divided into Must Have, Could Have, and Won't Have categories, outlining key features for development. 
User Flow
A digital infographic listing six feature applications related to finance. The features include Expense Tracking, Budget Management, Communication Space, AI-Based Insights, Interactive Learning, and Goal Setting, each with a brief description.

Categorizing specific ideas into what would be beneficial to our application allowed us to condense all our ideas to necessary key features which then led to a unique and research based application.

Flowchart titled 'Scenario 2: Sarah' showing steps for creating a budget and setting personal goals, including app opening, signing up or logging in, navigating to create a budget, connecting bank accounts, setting up categories, and community learning.

Mid Fidelity Wireframes

A graphic presentation of typography styles for 'Space Grotesk' and 'Inter' fonts, including various sizes and weights, on a black background.
Flowchart titled 'Scenario 3: Richard' depicting a user journey for managing student loans and finance literacy, with decision points and actions in various colored shapes.
A visual diagram illustrating the design process, with components such as buttons, navigation bars, text fields, icons, and color options arranged on a black background.
Whiteboard with hand-drawn wireframes and notes outlining the structure of a mobile app. Sections are labeled 'Sign Up,' 'Profile,' 'Questionnaire,' 'Get Started,' 'Dashboard,' 'Account Settings,' 'Set Budget,' 'Community,' and 'Learning.' Red and black handwritten annotations indicate flow and organization of app screens.

Design

Low Fidelity - Thumbnails

A grayscale wireframe of a mobile app or website design process, showing various screens such as sign-in, sign-up, account linking, tutorials, dashboards, profiles, budgeting, savings, and activity tracking.

We chose our color palette and typeface, and began creating core components such as buttons, navigation elements, input fields, and layout structures. This helped establish a consistent visual system and design language that supports usability, clarity, and cohesion across the interface.