The Challenge
The Blaze Forward Program covers 100% of tuition and mandatory fees for eligible undergraduates with family incomes up to $100,000. While the policy was highly beneficial, conveying complex eligibility rules (enrolled credit hours, TEXAS Grant status, deadlines, and SAI calculations) posed several hurdles:
- Complex Policy Tables: Dense text tables outlining grant distributions and cost calculations were difficult for students to parse.
- "Am I Eligible?" Anxiety: Students struggled to map their personal household financial situations onto complex compliance terminology.
- Mobile Layout Breakdown: Detailed side-by-side financial aid comparison charts broke completely on smaller viewports.
The Solution: Interactive Scenarios
We designed an interactive comparison tool based on clear student profiles (e.g., Alicia and Brian) to illustrate real financial outcomes. Features of this tool include:
Scenario-Based Modeling
Presenting concrete, realistic student profiles to show how Pell Grants, Texas Grants, and scholarships combine to cover tuition costs.
Dynamic Data Layouts
Re-flowing complex desktop comparison tables into simplified card elements for mobile devices.
Technical Implementation
The application utilizes a modular CSS grid and flexbox layout. To keep the interface lightweight and fast-loading, we used standard, optimized vanilla JavaScript to handle responsive layout adjustments:
// Client-Side Scenario Dynamic Calculations
const scenarios = {
alicia: { income: 95000, creditHours: 12, eligible: true, tuition: 12208, totalAid: 12208 },
brian: { income: 45000, creditHours: 15, eligible: true, tuition: 12208, totalAid: 15300 }
};
function checkQualifying(income, hours) {
const isIncomeEligible = income <= 100000;
const isHoursEligible = hours >= 12;
return isIncomeEligible && isHoursEligible;
}We optimized loading times by writing lightweight CSS and structuring page resources efficiently, resulting in strong scores on web performance analysis tests.
Impact & Outcome
The comparison interface helped make financial aid options much clearer for prospective students and their families:
- Improved User Experience: Redesigned card layouts simplified the comparison of complex financial datasets across desktop and mobile screens.
- Increased Trust: Visualizing real student scenarios helped future Mavericks quickly understand tuition-coverage opportunities.
Project Details
- Client: Financial Aid Office
- Role: Front-End Developer
- Platform: Sitecore & Custom HTML
- Accessibility: WCAG 2.1 AA compliant