Find a Tutor

A simple, easy-to-maintain application written for Northern Illinois University that allows students to find a tutor for a given course

Northern Illinois University
2016
· View App

The Challenge

"You need a tutor just to find a tutor." That's what NIU was saying to me. There were a number of tutoring centers available across campus, but they didn't all provide tutoring for the same courses. Information about each center was spread out all over the website. They starting to think about how they could make one collection of pages on the website about tutoring, and they wanted some kind of dynamic way to show students exactly which tutoring centers can provide help with their classes.

I was given a spreadsheet that listed courses versus which tutoring centers offered tutoring for those courses. I wanted the solution to be very focused on a great student experience: students don't want to scroll through a long list of courses, or have to read about each tutoring center to find out if it's best for their need. They should just be asked to provide what they already know — and I think I can reasonably expect a student to know which courses they're taking.

The solution also needed to be easy to update with new information, because courses and tutoring center offerings change each year. A client-side-only solution was preferred by the team that would be maintaining this.

Mockups

This solution asks the student for just what they already know: their course number. Then they see a list of tutoring centers for that course, with a message explicitly listing their course number. That gives them reassurance that help with their course is offered at that center.

The Finished Product

Keeping it Updated

The app needed to be easy for an entry level web developer to update with new courses or new tutoring centers.

Each tutoring center element has an attribute containing a comma-separated list of courses taught at that center. The tutoring center select box is populated by the union of all the courses in these attributes, so that there’s only one place that information needs to be updated. The application is a simple jQuery script that can be maintained by the entry level web developers managing this part of the NIU website.

<div
    data-tutoring-courses="ACCY 206,ACCY 207,MATH 108,MATH 109"
    class="panel panel-default"
>
    <div class="panel-heading">
        <h3 class="panel-title">ACCESS/Supplemental Instruction (SI)</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>
<div
    data-tutoring-courses="MATH 101,MATH 210,MATH 211,MATH 229"
    class="panel panel-default"
>
    <div class="panel-heading">
        <h3 class="panel-title">Mathematics Assistance Center</h3>
    </div>
    <div class="panel-body">
        ...
    </div>
</div>