Tuition Estimator Redesign

A tuition estimator for Northern Illinois University with improved responsive design and accessibility

Northern Illinois University

NIU provides a web-based tool that lets students estimate their tuition, room, and board expenses, and plan how financial aid will cover those expenses. I updated this tool to work with their new Bootstrap theme, and also made it responsive and compliant with the Illinois Information Technology Accessibility Act and current accessibility standards.

Fewer Decisions to Make

When possible, I applied Hick’s Law, limiting the number of initial decisions a student needs to make and therefore decreasing the time needed to make a decision. Hiding fields or information that the student couldn’t use until they complete other fields was a good way to accomplish this.

Before: Credit hour questions are always visible.

Responsive Design

A sticky or floating cost summary area makes the best use of available screen space on both desktop and mobile.


As a public university, it’s important that Northern Illinois is in compliance with the Illinois Information Technology Accessibility Act. During the redesign I improved accessibility compliance over the previous version of this page with:

  • Appropriate semantic use of headings and form elements
  • Buttons with self-descriptive names
  • Form inputs wrapped in approprate <label>s
  • Elements given aria-label values when appropriate. For example, question mark icons linking to pages with more information were given a descriptive aria-label value to represent the meaning that was communicated visually by that icon’s proximity to other information on the page.

A Great Print View

The client also noted that students often want to print this information, so they wanted a print view that was as good as the on-screen view. CSS media queries make this possible. The student can use the browser’s native print function on this page to get a great print view.