CS4800 · Sprint 1 · Assignment 1

Interactive UX Prototype & Storyboard

A clickable proof-of-concept for a personal finance app — built with React, designed for real users, and grounded in a full business plan.

Student
mirabhakta
Course
CS4800
Sprint
1 — Planning
Submitted
March 2026
Tools Used
React · Claude AI
Primary Deliverable
📱
Interactive UX Prototype
A fully clickable React app prototype with 6 screens, working modals, fake data, and real navigation flows.
4-step onboarding walkthrough
Dashboard with spending charts
Add transactions with live form
Budget limits with visual warnings
Savings goals + contribution modal
Debt payoff planner with slider
Open Prototype →
UX Narrative
📖
A Day in the Life
A scenario-based walkthrough explaining why each screen exists, told through a full day in the life of Alex Rivera — our primary user persona.
Primary user persona profile
6 timestamped moments (7am–10pm)
"Why this screen exists" for each page
UX design decision rationale
Screen-to-scenario summary table
Read the Narrative →
Submission Checklist
✓
Interactive clickable prototype
React · HTML file
✓
Screen-by-screen navigation (6 screens)
Prototype
✓
Buttons, modals, fake data, transitions
Prototype
✓
No backend, databases, or real API calls
Requirement met
✓
"Day in the Life" UX scenario narrative
HTML file
✓
Business plan source document attached
.docx file
✓
Viewable link via GitHub Pages
This page
Built with React + Tailwind · AI-assisted development using Claude · CS4800 Sprint 1