Penn Playbook


Penn Playbook is a digital exhibit with 4 main installations showcasing different aspects of Penn life through the lens of current students.


Marcel Kida, Andrew Jiang, Anna Xia, Ethan Zhao, Claire Zhang, Olivia Zha


Background


Spring of 2022 has been a whirlwind of classwork, conversations, and covid exposures for most of us, but as we reach the last few days of this semester we find ourselves wanting to take the time to look back and reflect on the moments that made the last couple months.

Penn Playbook is meant to be exactly what it sounds like - part play and part book. Through this digital exhibit, we hope to present an assemblage of snapshots and stories that paint a picture of life@penn this semester while allowing you to play around and interact with our site.

Penn Wrapped
Inspired by Spotify Wrapped, Penn Wrapped is a compilation of survey data on the experiences of Penn students this semester.
Penn inTouch
This is a space for confessions, celebrations, and everything in between.
By the Button
By the Button is a quiz that tests how ~quirky~ you are in the Penn community.
Class X
10 seniors, 10 interviews, and 21 days of mood and energy tracking. This one’s for the class of 2022: the seniors who have made it through four years of Penn.

Technologies used: React.js, React Redux, MongoDB, Node.js, Express, Figma



Demo




Timeline


Feb 27. 2022: Initial Figma designs created

Mar 13. 2022: Physical space not secured => pivot to website only

Apr 24. 2022: Website deployed at pennplaybook.com



Challenges


One challenge we faced was trying to reserve a physical space for an event. When asking around, all the event spaces were either too expensive or already booked. We learned that if we are to plan a physical event, we need to look into spaces months in advance.

Another challenge we faced was the technical challenge of creating an infinite canvas for the Penn inTouch section of the website. We decided on a solution that emulates scrolling and selectively renders text that would appear on screen to reduce load on the client.



Takeaways


  • Marcel K: Try to book event spaces months in advance to have any chance of getting a location.
  • Andrew J: Mobile-friendly development and horizontal scrolling really suck :(
  • Ethan Z: Making screens mobile friendly
  • Olivia Z: Thinking creatively about the possible directions of each installation and learning videography/video editing
  • Anna X: I learned how to connect the frontend and backend of a website using React and MongoDB.
  • Claire Z: Coming up with creative ways to visualize and display data on page



Looking Forward


In the future, we are looking to add new pages and exhibits to the website. In addition, we are looking to secure a physical space to host an in-person event next semester.