Pia Kim
front end developer
Pia Kim

Student Report Wrapped

stack:
  • react
  • Gatsby
  • framer motion
  • gsap
  • Netlify
  • Contentful

Overview

At the learning center where I teach, we provide these reports to parents in the form of PDFs, which I help create in a basic template. They are just as important as always, but they can seem outdated and generic. So I wanted to try building out a web experience so that students and parents can view their reports, grades, and feedback in a more engaging way.

The report consists of two parts: the actual report card and the more detailed feedback.

The report card is just like an actual report card that is just transferred over to a digital form - it provides an overview of the student's grades, averages, and a breakdown of homework, participation, etc. Stylistically this page is mainly grid-based and is broken down into components that may overlap across the different subjects.

The feedback pages gave me more of an opportunity to experiment with animations and building up an engaging experience. I initially took the inspiration from Spotify Wrapped, which is a year-end review of your listening stats on Spotify. It's a fun and interactive experience, and some things that stood out to me were the color palettes used, the myriad of stats and data, and the personalized feeling it provides. I tried to replicate something in this way (but not as witty and interesting).

Realistically, when a parent or guardian wants to see how their child is doing, they would want to get the information in a simplistic, easy-to-understand way, without fancy animations or distractions. More web presence does not necessarily mean a better experience for everyone, and people may simply prefer the traditional method, so it's important to keep both options open for everyone.

This project is more for my own learning and experimenting - trying to develop my UI, UX, design, and CSS skills.

Challenges

  • Organizing - it started as a single page with single files, then expanded to include separate pages for parent and student

  • Design choices - it should not be too over-the-top because it's a report card... but also had to resemble some features of Spotify Wrapped

  • Making it responsive - overall this is optimized for a desktop experience so implementing it onto mobile required a lot of changes

Takeaways

  • Building an informative but also fun experience for students and parents

©2021 Pia Kim