Data visualization for learning insights

Clusive

Clusive is a free, flexible, adaptive, and customizable digital learning environment. 

Project attribution: CAST, Inc

This content was developed through a grant from the U.S. Dept. of Education 

Context

Project overview: Clusive is an adaptive and accessible web-based reader designed to engage students in independent reading. Based on the inclusive principles of Universal Design for Learning (UDL), Clusive scaffolds the development of reading skills for students in grades 5 through 12. Learn more at cast.org.

Scale: 20,000 user accounts (March, 2024)

A quick demo of Clusive from the 2023 EdGames Expo (2:30)

One learner's story 

Ray, a learner with dyslexia, barely finished high school and was ready to do anything but continue on to college. He found Clusive, loaded up his text books, and then realized he could actually read and learn independently in this environment. So, he changed his plans. He decided to go to Community College, now has a 4.0 average, and was just offered a merit scholarship to his state university. Clusive is a tool that is life-changing!

Highly motivated learners, like Ray, clearly achieved positive learning outcomes using Clusive. Our goal was to maximize this potential for all learners, and to ensure classroom teachers were able to effectively support their students in the classroom in real time.

Challenge: Understand teacher needs for monitoring student performance data and develop a customizable dashboard for visualizing data and identifying appropriate teaching interventions. 

Role: UX Designer

Skills: User Interviews, Data Analysis, Landscape Research, Wireframing, Participant Co-design, Prototyping, Usability Testing

Tools: Figma, Qualtrics, Jira, Google Analytics

Analyze

I collected teachers' insights through interviews, surveys, and focus groups. In analyzing their responses, my team identified the following teacher needs:

Teacher interview data (aggregated & coded using Google Sheets)

I also surfaced key metrics that would need to be refelcted on the dashboard:

Clusive's "Your thoughts" affect feature

From previous feedback we understood teachers would be viewing the dashboard on desktop devices as well as on tablets and phones, so we needed to consider optimizing for responsive design. 

Finally, to better understand existing dashboard conventions with which users would be most familiar, I conducted extensive landscape research to identify examples (and non-examples) we could draw from in establishing our own layouts.

Problem statement

Teachers need to quickly access and interpret student reading data in order to improve learning outcomes. Clusive must help teachers identify where students are making gains and where they are encountering barriers. 

Ideate

I collaborated with subject matter experts (SMEs) to pinpoint the data points our dashboard would need to capture, and to better understand the range of possible visualizations we could produce. I took an atomic design approach in this process, starting with individual components, and building toward "data constellations"  (metrics that, taken together, could reveal insights about student learning). I concentrated on strategies that could show a range of data granularity, from an individual student's engagement with one particular reading, to class-level trends. I also created user flows to explore the interactions required for teachers to easily navigate between these types of data, as well as to filter by discrete time periods. 

If I had to pick a favorite part of the process, this would be it! I started with quick and messy sketches, and progressed toward higher and higher fidelity prototypes as we zeroed in on a core set of components to test with teachers. 

Test

As part of our Agile process, we decided to test the emerging dashboard designs in a mid-fidelity state, so that we could get critical feedback on the actual content of the data displays before moving into a final UI design pass.

The research team did not want our own assumptions to inhibit teacher feedback, so during a remote testing session, instead of working with a complete version of the dashboard, teachers were presented with individual pieces of data displays. They were then asked to drag and drop the components onto a blank frame, picking and choosing the elements of student progress monitoring they would find most useful. Technology note: we used a Google Draw canvas at the time, but if I were to redo this activity with access to the industry-leading tools of today, I would use Miro instead.

The activity was moderated in 4 concurrent Zoom breakout rooms, so we ended up with 4 different versions of potential dashboard layouts. Considering both the pieces assembled in the final compositions and the teachers' rationale for selecting them, we then created a final aggregate version: a high-fidelity clickable prototype to explore with teachers in a round of usability testing.

A sample teacher dashboard variation that was created using a Google Draw canvas.

Final UI design for the Clusive teacher dashboard (L: class overview; R: individual student)

Refine

We received very positive feedback on the teacher dashboard and felt confident we had met our users' needs. While the dashboard was designed to be intuitive, and prioritized simplicity and clarity in the presentation of student data, we decided to develop scaffolds to further support teachers in making sense of these data.

I helped develop a resources area for teachers that provided research-based guides (job aids) to better interpret the information on the dashboard, and most important, to prompt instructional change. We wanted to empower teachers to take action on the insights gleaned from the dashboard.

We also acknowledged that teachers would not always have time to read an article, so we provided quick tooltips to highlight key information.

A tooltip with video content embedded

Reflect

Outcomes: The teacher dashboard quickly became an essential feature in the Clusive tool (evidenced by page views in Google Analytics) and user feedback continued to validate our design decisions. 

By centering the users' needs, we were able to develop a meaningful enhancement to our product that significantly improved learning outcomes for students.

In subsequent design sprints, we developed a parallel dashboard for the student side of the reading tool. This feature gave learners the agency to track their reading progress and better understand their own learning journey.