Creating a digital product to drive interest in a 50 year old institution

brief

The idea for this project originated from an off-the-cuff tweet someone made, which literally said, "Someone should make letterboxd for SNL." The goal of this project was to hone my interaction and visual design skills in a project of my choosing. I love SNL, so when I saw that tweet, I got the idea and started working.

context

Design Degree Project at Northeastern University — Spring 2025

tools and methods

Prototyping
Brand Design
Design Component Systems

team

Zach Marino — Creator

timeline

14 weeks

insights

Since this is a service for SNL sketches, it would make sense that the branding matches SNL. However, upon further consideration, it made more sense to craft a unique identity without straying too far from the source material. Part of the reason why services like Letterboxd and Goodreads are so successful is that they feel like unique social media services, rather than a marketing arm for a movie studio or publisher.

deliverables

I created an interactive Figma prototype; a brand system featuring a logo, colors, typography, and icons; and a component library that would provide components for future iterations of the prototype.

the challenge

SNL has run for 50+ seasons. In those 50 seasons, there have been 10,000+ sketches and countless cast members. Despite all of this history, there is no way to track and share your favorite sketches — not to mention all of the discourse around which SNL era was the best. If people treat SNL like a sports franchise, how can we extend that experience?

Catalog 8H is a social cataloging platform that lets users rate, review, and discover new SNL sketches. The name is inspired by the studio SNL is filmed in at 30 Rock. A social cataloging platform allows users to catalog interests like books, films, TV shows, music, etc. and connect with similar users (think Letterboxd/Goodreads).

There is no social cataloging platform for SNL sketches.

the deliverables

The goal of this project was to improve my interaction design and branding (visual design) skills, so I decided on three deliverables:

1. A responsive mobile website prototype. I designed a mobile website rather than an app because it could be quickly designed and coded as a desktop site without needing a new repository.

2. A component library of reusable components for the prototype. Components included nested instances, variants, and sizes for different screen sizes and use cases.

3. A branding system to tie the project together. I created a logo, color system, icons, and a typography system for mobile and desktop viewports.