UX/UI Case Study — Current Project · 2026

Missouri
DESE School
Finance

Redesigning a legacy financial management system serving 500+ school districts — cutting task time in half, eliminating errors, and transforming user satisfaction across the State of Missouri.

Client
State of Missouri
Role
UX Designer
Timeline
Jan 2026 – Present
40–50%
Faster task completion
20 min → 10 min
60%
Fewer data entry errors
15% → 6% error rate
+36
NPS score increase
32 → 68 satisfaction
95%
Faster page loads
2–5 sec → <100ms
The Challenge
How might we modernize a complex financial system to reduce user time-on-task by 40% while maintaining all functionality and improving data accuracy?

The Missouri DESE was running a legacy School Finance Management System serving 500+ school districts — plagued by disconnected pages, dense table layouts, and workflows consuming 15–20 minutes for routine monthly tasks.

What Users Said
🗺️  "I get lost trying to find where to enter monthly data"
🖱️  "It takes too many clicks to run a simple calculation"
👁️  "I can't tell at a glance which calculations are complete"
📅  "The interface looks like it's from the 1990s"
📂  "I have to open multiple tabs to complete one workflow"
Understanding the Users

Three Primary
User Groups

Research began with mapping who uses this system daily — their goals, frustrations, and where their time goes.

🏫
School District Finance Officers
60% of users
Monthly ADA/WADA data entry
Payment calculations
Report generation
🏛️
State Finance Administrators
25% of users
System oversight & monitoring
Bond payment management
Transmittal processing
📋
Auditors & Compliance Officers
15% of users
Report review & verification
Historical data analysis
Compliance verification
Research & Discovery

What the Data
Revealed

70%
of user time was spent on just 3 core workflows — pointing directly to where redesign effort would have the highest impact
80%
of errors occurred during manual data entry — a clear signal that smart validation and auto-calculation were essential, not optional
#1
most requested feature was visual status indicators — users needed to see system state at a glance without navigating anywhere
45%
reduction in support tickets is achievable with contextual help — validating inline guidance as a design priority, not an afterthought
Research Methods
01Stakeholder Interviews with 8 participants — district finance officers, state administrators, and IT staff
02System Audit — documented all features, mapped user flows, identified technical constraints
03Analytics Review — most-used features, common error points, time-on-task metrics
04Competitive Analysis — modern finance platforms, government portals, SaaS dashboards
Information Architecture

From 20+ Scattered Pages
to 8 Logical Sections

Restructured the entire navigation hierarchy to match actual user workflows — not the system's internal data model.

📊
Dashboard
System overview & KPIs
🧮
Payment Calc
Calculation workflows
📝
Data Entry
Monthly ADA/WADA
📑
Reports
Parkway Phase II
🏦
Bond Payments
Bond management
📅
Est. ADA
Estimated attendance
📤
Transmittal
Payment transmittal
Interface Design

The Redesigned
Dashboard

90% of users now begin their session on the dashboard — up from 10% before. A single screen communicates system state, pending actions, and key metrics instantly.

Missouri DESE — School Finance Management System Jefferson City USD #1 ▾
Navigation
Dashboard
Payment Calculations
Data Entry
Reports
Bond Payments
Est. ADA
Transmittal
Help & Guidance
Good morning — May 2026 monthly cycle
$4.2M
Payments Pending
18/22
Districts Submitted
4
Warnings
1
Errors
ADA Completion by Month
January
February
March
April
May
Calculation Status
ADA/WADA EntryComplete
Payment CalcPending
Bond PaymentsComplete
TransmittalNot Started
Phase II ReportError
New dashboard — 90% of users now start here vs. 10% before the redesign
Key Design Solutions

Six Changes That
Transformed the System

Solution 01
Unified Dashboard
Problem: Users had no overview — no way to know what was complete, pending, or broken without clicking through every section.
Created a comprehensive dashboard with KPI cards for payment totals and district completion counts, trend charts for ADA completion, a color-coded status panel for all calculation states, and quick action buttons for the most frequent operations.
90% of users now start on the dashboard vs. 10% before
Solution 02
Persistent Navigation
Problem: Users got lost navigating between 20+ disconnected pages with no consistent wayfinding or context cues.
Implemented a persistent navigation system with an always-visible top bar with organization switcher, a left sidebar with clear section labels and icons, and breadcrumb navigation at every level. Users can now jump to any section without losing their place.
60% reduction in back-button usage · 40% fewer navigation support calls
Solution 03
Visual Status Badges
Problem: Text-only status labels made it impossible to scan system state — users had to read every entry to understand what needed attention.
Built a color-coded badge system used consistently across all pages. Green = Complete/Verified. Orange = Pending/Warnings. Red = Error/Attention Required. Gray = Not Started. The same system appears in tables, sidebars, modals, and the dashboard.
Assessment time reduced from 3–4 minutes to 10–15 seconds
Solution 04
Inline Actions & Modals
Problem: Every action — viewing a result, applying an override, confirming a change — required loading an entirely new page.
Replaced page-load navigation with contextual actions: modal overlays for results and overrides, inline editing directly in data grids, and confirmation dialogs for destructive actions. Users stay in context and never lose their scroll position.
50% reduction in page loads per session
Solution 05
Smart Data Entry
Problem: Manual entry errors caused calculation failures that cascaded into downstream reporting problems and increased support calls.
Redesigned data entry with real-time validation, clear inline error messages, a "Copy Previous Month" function for recurring entries, auto-calculation of derived fields, save draft capability, and logical field grouping with visual separators.
Data entry errors reduced 60% — from 15% to 6%
Solution 06
Contextual Help System
Problem: Users relied on external documentation and support calls for routine questions, breaking their workflow entirely.
Built in-context guidance throughout: instruction panels on complex pages, tooltip hints on form fields, error messages with resolution steps, and links to help articles anchored to the exact section in view.
Support tickets reduced 45% — from 40/month to 22/month
Before vs After

Workflow Improvement
by the Numbers

Every core workflow was redesigned with a single goal: fewer clicks, less time, same result.

TaskBeforeAfterImprovement
Enter monthly ADA data15+ clicks · 20 min6 clicks · 10 min50% faster
Review calculation status8 clicks · 10 min2 clicks · 3 min70% faster
Generate report8 clicks · 10 min3 clicks · 4 min60% faster
Apply calculation override12 clicks · 15 min5 clicks · 6 min60% faster
Actual Interface Screens

The Real
Application

These are the actual screens from the redesigned Missouri DESE School Finance system — built in React, TypeScript, and Tailwind CSS.

Dashboard — Main Overview
Dashboard — Main Overview
Payment Calculations
Payment Calculations
Calculation Reports — Current Year & Prior Year Cards
Calculation Reports — Current Year & Prior Year Cards
Estimated ADA — 5-Year Trends & Data Entry
Estimated ADA — 5-Year Trends & Data Entry
ADA Data Entry & Overrides Modal
ADA Data Entry & Overrides Modal
Parkway Phase II Calculation
Parkway Phase II Calculation
Bond Payment Schedule
Bond Payment Schedule
Reports — Favorite Reports & Categories
Reports — Favorite Reports & Categories
Payment Transmittal
Payment Transmittal
Design System

40+ Components,
One Cohesive Language

Built a complete React component library — enabling consistent UI across all pages and rapid feature development.

Color System
Primary
Accent
Success
Warning
Error
Professional blue for government authority. Each semantic color maps to a specific system state — used consistently across badges, alerts, and charts.
Status Badge System
CompletePendingErrorNot Started
Four states cover every calculation scenario. Color + label ensures accessibility for users with color vision differences.
Component Library — 40+ Components
DashboardLayoutPageHeaderSidebarBreadcrumbKPICardStatusBadgeDataTableChartContainerTextInputSelectDatePickerAlertToastModalConfirmDialogNavLinkTabsPagination
Design Tokens
Spacing Scale8px base unit
Border Radius4px · 8px · 12px
Shadow Systemsm · md · lg
Transitions150ms · 300ms
Results & Impact

Measurable Outcomes
Across Every Metric

40–50%
Faster task completion
15–20 min → 8–10 min
60%
Reduction in data entry errors
~15% → ~6% error rate
+36
NPS score increase
32 → 68 satisfaction score
60%
Fewer page loads per session
25–30 → 10–12 loads
45%
Reduction in support tickets
40/month → 22/month
95%
Faster page load speed
2–5 sec → <100ms
This is like going from a flip phone to a smartphone. I can finally see everything at a glance.
District Finance Officer
The new dashboard saves me at least 30 minutes every month. I love the visual status indicators.
School Administrator
Training new staff is so much easier now. The interface is intuitive and self-explanatory.
State Finance Administrator
Technical Implementation

Built for Performance
and Scale

⚛️
React 18
Component architecture with hooks for clean state management
🔷
TypeScript
Type safety across 40+ components — fewer runtime errors
🎨
Tailwind CSS v4
Utility-first styling for rapid, consistent UI development
📊
Recharts
Data visualization for ADA trends and payment analytics
🔀
React Router v7
SPA navigation — eliminates full page reloads entirely
🖼️
Lucide React
Consistent iconography across all components
♿
WCAG 2.1 AA
Keyboard nav, ARIA labels, screen-reader tested
📱
Responsive
Desktop-first · Tablet-optimized · Mobile-capable
Lessons Learned

Reflections on
the Process

✅
What Worked Well
User-centered approach with regular stakeholder check-ins kept design aligned with real needs. Three rounds of iterative testing caught issues early. Visual feedback dramatically improved usability. Progressive enhancement ensured MVP success.
🔧
Challenges Overcome
Balancing feature richness with simplicity — solved with progressive disclosure. Migrating users from the legacy system — solved with side-by-side before/after training materials. Complex validation — solved with reusable validation hooks and clear error messaging.
↩️
What I'd Do Differently
Conduct 8–10 usability sessions instead of 5. Include dark mode in the initial scope rather than Phase 2. Prioritize tablet experience earlier in the process. Engage an accessibility expert sooner — at the design phase, not after development.
Phase 2 Roadmap

What's
Coming Next

Collaboration
Real-time multi-user editingConflict resolution UI
Intelligence
ML-based ADA/WADA forecastingPredictive analytics
Reporting
Custom report builderScheduled exportsAdvanced filtering
Accessibility
Dark modeOffline mode with syncNative iOS & Android
Automation
Scheduled calculationsAutomated report deliveryCustomizable dashboards