PlayMix

A web application that creates Spotify playlists

based on your favorite media.

(2025)

create a playlist based on…

the social network by

david fincher

Project Overview

PlayMix’s main goal was to create a functional web application that generates Spotify playlists based on the theme and mood of a film or novel. The key outcome was a responsive, user-friendly application that successfully connects media content to personalized music playlists.

Client: Digital Narrative and Interactive Design Capstone (University of Pittsburgh School of Computing and Information)

Timeline: 16 weeks (2025)
My Role: Project manager, fullstack engineer, UX designer

Technology Stack:

Frontend: React Web, Tailwind CSS
Backend: Python, Flask
Other: Figma

design thinking

full-stack engineering

end-to-end dev

ui/ux designing

project management

Information Architecture

PlayMix integrates external APIs (Spotify and OpenAI) alongside internal backend routes to support authentication, media understanding, recommendation generation, and playlist creation.

The system separates user interaction, AI-driven interpretation, and third-party media services. A backend layer orchestrates authentication, recommendation generation, and playlist creation, while the frontend focuses on interaction flow and presentation. This architecture allows the product to remain flexible, maintainable, and extensible as new features are added.

Takeaway: We learned to leverage different technical skillsets and comfort levels, and I stepped up to the challenge of full-stack engineering.

Design Process

Though Spotify has increasingly pushed their auto-generated playlists based on a user’s listening habits, the ability to generate playlists based on existing forms of media does not exist on most music streaming platforms. While platforms such as LetterBoxd overcome this discrepancy (even accidentally) by pushing unique user-generated “lists” of films, Spotify has not. There is no way to generate playlists based on other forms of media.

With this clear interest in creating playlists based on a specific “vibe,” as well as a collective passion for film, books, and apps like LetterBoxd and GoodReads, we created PlayMix to be an accessory to Spotify that users would want to come back to and share with friends.

Our team found an opportunity with PlayMix to fill a gap for users who wanted more ways to immerse themselves in their favorite media in a customized way. We first had to identify a target audience and decided to focus on users of platforms such as Goodreads and Letterboxd.

Early Wireframes & Prototypes

Our Priorities

Usability
Every choice, whether it was layout or components included on a page, was made so that users could intuitively make their way through the application.
Accessibility
Color palette passes WCAG requirements.
Clean Style
Designed a trendy aesthetic that characterizes our product as a fun companion to the apps they love.

We performed two rounds of user testing to get to know our audience and hone our own understanding of the design thinking process. Once we decided on a target audience, we outlined assumed user needs based on our intended goals of the project, as well as our current understanding of typical Spotify playlist generation.

We prioritized a simple and clean interface that was intuitive enough for first-time users to navigate through.

User Testing

Key Design Takeaways

Clarity of Purpose and Interaction

🎤 User feedback:
Early users were unsure what kind of system PlayMix was—some interpreted it as a mood-based recommender, while others expected a direct soundtrack extraction from the source text. They asked for more explanation about the product and how it worked.

👩🏻‍💻 Design choice:
I reframed the interface to clearly position PlayMix as interpretive rather than authoritative, using concise framing copy at key moments in the flow. We added an About page and worked on how we pitched the project to users.

✨ Takeaway:
Design to align expectations.

Using Copy as an Interaction Tool

🎤 User feedback:
Small shifts in wording significantly affected how users interpreted both the system’s confidence and their own expectations.

👩🏻‍💻 Design choice:
I treated copywriting as a core interaction design component, iterating on tone to remain playful without overstating system intelligence. We also tested different button labels and taglines!

✨ Takeaway:
Language shapes interaction.

Visual Redesign

The visual redesign prioritizes clarity and accessibility while intentionally introducing moments of play. Color, typography, and spacing were refined to improve legibility and reduce cognitive load.

At the same time, subtle motion, friendly copy, and light visual accents were used to make the interaction feel inviting rather than procedural. We wanted to take the opportunity to use playfulness as a way to sustain attention and encourage exploration without obscuring system behavior.

This redesign treats visual language as part of the interaction itself, reinforcing transparency and approachability while maintaining accessibility as a baseline rather than a tradeoff.

Takeaway: I love design! Javascript is fun!!