SchooLinks: Organizing Students into Caseloads

UX, UI Design — Web

01 Background

SchooLinks is an ed-tech startup with a focus on college planning. I worked there as an UIX intern for five months.

As a college planning platform, the website is used by three types of users — students, parents and counselors. For this project, I had to find a solution that would allow counselors to (1) group students into caseloads and (2) generate reports based on these caseloads.

The process for the first part of this task is below.

02 Research

During our sprint planning meeting, I got a brief overview of this task, which is summarized below:

Problem — What’s the best way to group students within a caseload?
User Story — As a counselor, I want to create caseloads in order to: (1) organize students into certain categories (i.e. ‘At-risk students,’ ‘High achieving students’, ‘Students Aa-Ef’) and (2) provide appropriate counseling support for each group.

The design requirements:

One caseload can have many students
Each caseload must be associated with one counselor, but a counselor can have many caseloads
A caseload can have students from different high schools
Each caseload must have a title

• • •

To better understand the purpose of caseloads, I researched competing student management tools and read whitepapers about counselor assignments in high schools. Below are some key findings that drove my design:

A majority of schools assign counselors based on grade level (Source)
Counselors can be assigned to students based on various categories (i.e grade level, academic track) (Source)
Caseloads average about 350 students per counselor (Source)

03 Planning

First, to understand the relationship between student, caseload and counselor, I drew an ER (entity relationship) diagram, which helped me create the mind map (below).

Brainstorming

With the Creative Director, we drew up a mind map of how students are funneled into caseloads. This helped create the user flow for my wireframes.

User Flows

I converted the above mind map into a basic user flow, and made a higher fidelity user flow.

Wireframing

Finally, I converted the flows into wireframes to understand the various steps and states of my ‘Create new caseload’ modal.

I also sketched how the modal would look within the website. Because counselors would revisit these caseloads, I designed a spreadsheet-style log that would display all the caseloads, and added CRUD (create, read, update, delete) functions for each caseload.

C - 'Create new Caseload' btn
R - Click on any Caseload name
U - 'Edit Caseload' btn
D - 'Delete Caseload' btn