Statistical Modeling Tutorial

A guided, interactive exploration of linear regression for students of the NYU Stern MS in Quantitative Management

Project summary

This project was born out of two needs. First, I was working on a Statistical Modeling course that could benefit from more interactive formative assessment. Second, I was starting to learn Java Script and wanted to find a project to apply my emerging fluency. This is my first web development project outside of a well structured assignment as a part of a course.

Role

Learning design & code

Project website

https://best-fit-lines.netlify.app/

Code

https://github.com/seanlucano/best-fit-lines

Inspiration and prototyping

As a brand new Java Script developer, I wanted to try and build something I had been imagining for a while; when learning technical subject matter like statistical modeling, students will often be presented with static images that support written text or lectures. But the web gives us so many rich affordances to pair with the visual display of information. I wanted to give students the ability to reach out and touch a graph or chart, manipulate it directly, and then be able to see how it responds to them. I was heavily inspired by the idea of explorable explanations, which leverages the mechanics of play to teach complex subjects.

I started with some hand-drawn sketches to test my idea with subject matter experts, then gathered some inspiration, and a built a very simple Figma prototype to sequence the content and mockup some of the proposed user interactions. Test users generally liked using the prototype, and gave really useful feedback, but they also said they needed a more clear idea of how exactly some of the interactions would work, so the next step was to quickly built a working prototype that I could get in front of users for more testing.

During this prototyping phase, I was so fortunate to begin collaborating with Ross Jaffe, who became a regular contributor to the project.

Refactoring as a 'Single Page App' with Svelte

One recurring note we got from users during prototype testing is that they wanted the changes they made to the interactive part of the tutorial to persist as they progressed through the steps. On the one hand, this was really encouraging feedback...because it meant that learners were feeling engaged by the interaction enough that they were upset if it "reset" while navigating. On the other hand, this meant that the structure of the code would have to change pretty significantly moving forward, and that the project would benefit from some refactoring.

I decided to turn to a Java Script Framework called Svelte, which was known in JS communities as a great framework for new developers. While this meant more work in the short term, taking advantage of a component-driven framework like Svelte would allow me to be much more efficient in implementing future changes based on user feedback. With help from Ross, we had started to get a lot more detailed and nuanced feedback from users and started tracking project status in a more organized way with Notion. Users suggested some key features that included a requests for a progress bar, as well as more intuitive, fluid feedback interactions that included animation.

A work in progress

The experience of creating this tutorial has been SO exciting for me, and I'm eager to continue expending some of these ideas by continuing to work on this project, and to build more tutorials for this course using this framework.

As we continue to get feedback and plan new iterations, some key areas for improvement will be to add tooltips to the progress bar, allow users to generate new datasets or upload their own datasets, and explore some 3D options for analyzing data with 3 variables rather than just 2.