Studylist for Khan Academy

"Custom curated learning."

Web App - Education Tech.

About: A web app designed to help teachers organize and share over 10,000 Khan Academy exercises. I conducted light research & created design artifacts for an EdTech tool that I needed..

Challenge: A tool I wished for when I took Stanford's popular online machine learning course. As a designer, I knew I needed to brush up on my math skills before attempting this CS course from a top tier school, but I didn't know where to start. Khan Academy had 1000s of math lessons but it wasn't clear which ones I needed. I wished the teacher had a studylist called "math just for ML" to help students like me prepare for his class.

Process: User research, competitive analysis, user personas, user scenarios, info architecture, iconography, mock ups, and an interactive prototype.

Research

User testimony: With tens of millions of users KA's forums include years of rich product feedback directly from real users. I was surprised to find dozens of teachers also looking for this exact feature.

Real comments from the forums

Technical feasability: A Sr developer friend assured me building the service should be quite feasible leveraging KA's open api without enormous hurdles. He felt the toughest part would be parsing KA's massive api.

Target users:

• Educators are primary users that create and/or search for study materials to share with students.

• Students are secondary users who search for existing materials or have them assigned by their teachers.

User goals:

• Teachers would like to see a maximum number of students succeed at mastering course material and passing their classes with high scores. They also aim to inspire those students.

• Students aim to pass classes with high scores and learn something cool or useful in each class.

Empathize

User personas: KA's mission statement is "To provide a free, world‑class education for anyone, anywhere." Alhtough skewing towards a US market, I developed a robust set of user personas based on KA's broad teacher/student audiences.

Teacher personas:

Student personas:

User scenarios: Some example scenarios where I could see this app serving many people.

Example 1:
Teaching astronomy? Select and assign the essential chemistry concepts that your astronomy lessons rely on. With these prerequisits out of the way, in class you can focus more on teaching actual astronomy. Or mabe a ”chemistry for baking” study-list would be different courses?

Example 2:
Teaching political science? Maybe there's a perfect history lesson that your students can familiarize themselves with before you meet in person to discuss present times, or the future!

Example 3:
How about a studylist on ”Stats for Machine learning”? This is what actually inspired me to design this project. Entrepreneurs say that you should design to solve your own problems because it's the sure way to empathize.

Create

Feature ideas:

• Search Exercises - Including the ability to filter results by subject and title keywords. Maybe also a convenient exercise preview.

• Search lists - Toggle the search results between KA exercises and existing SL lists. Example: If I created a ”math for machine learning” list, other teachers / students could also use and share this for their classes.

• Create lists - Add any exercises you like to a new a new list.

• Edit lists - Re-organize and add/delete exercises as you please. Also add descriptions to make your lists more discoverable.

• Forking - Create forks by copying an existing list and adding/deleting or re-organizing the exercises.

• Share study-lists - Invite your class or study friends!

Mood: Looking to my favorite education platforms for inspiration I snagged visual samples and put together a moodboard.

Info architecture: User flow diagrams to help keep the designs focussed and on track.

Custom icons: I found some inconsistencies in KA's own subject icons...

...and decided to re-design my own for the app. The goal with the below icons was to be more bold at any size and more consistent between all subjects (like sciences and history).

Mockups: I created hi-fidelity app screens in Adobe XD and applied them to rendered hero screens in Photoshop.

Interactive prototype: The XD mockups were translated into an interactive prototype.

Conclusion

Still dreaming: After a few discussions with my engineering colleague, we took a stab at parsing the api and creating an MVP. We tried for 2 days straight to pull together an MVP but we probably needed 5-8 days and unfortunately we both have full-time jobs and busy lives. All-up this was a fun design exercise and learning experience but I still hope to take this further one day.