Pia Kim
front end developer
Pia Kim

Student Report Wrapped

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

Overview

As part of my teaching job at my local learning center, I'm in charge of building out report cards and progress reports for students. I took it as another opportunity to work on my development learning. Our report cards had been digitized to PDF and looked about aesthetically pleasing as one can make it using a basic template and document. So I wanted to try building out a web experience so that students and parents can view their reports/grades/feedback on a web page.

For the sake of practicing animations building nice interfaces, I 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 whole look of it.

Realistically, when a parent 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. So for the actual report card, I just transferred the pdf onto a web page made some stylistic changes.

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, then expanded to include separate pages for parent and student

  • Design choices - it could 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