.png)
The Rec Room
We all collect little stories, the shows that comfort us, the books we can’t put down, the music that feels like home. But they live in so many different places that the joy of sharing them gets lost.
The Rec Room lets users track what they love, share recommendations, and connect with friends through the stories that make life feel a little brighter.
Made for book lovers, movie buffs, TV enthusiasts, and music listeners alike.
Project Overview
The Rec Room was designed to bring joy and connection back into everyday media habits. Instead of jumping between separate apps for books, movies, TV, and music, users can log everything they love in one cozy digital space. With features like social feeds, recommendations, and challenges, the platform turns media tracking into a shared experience rather than a solo one.
This project blends UX design, branding, and front-end development to create a digital “rec room” built for discovery and community.
My Role
Brought this project to life on my own, from the first sketch to the final coded experience
Designed the full user experience and interface, including layout, navigation, and branding
Built the site using HTML, CSS, JavaScript, and TypeScript, including responsive components
Animated the landing page experience to create a more playful, engaging first impression
Developed an interactive media-guessing game as a unique feature within the platform
Iterated on branding, visuals, and functionality based on user feedback and personal testing
Tools Used
The Process
Research & Competitive Analysis
To understand how people currently track and share the media they love, I began with a competitive analysis of Goodreads and Letterboxd. I looked at what users appreciated (community, reviews, personal feeds) and what frustrated them, like outdated UI, limited media types, and clunky navigation.
Goodreads users loved the large community and Kindle integration, but struggled with an old interface, a limited rating system, and unreliable reviews.
Letterboxd offered strong social features and a rich film database, but focused only on movies, leaving out TV, podcasts, and books.
These gaps revealed an opportunity for a platform that felt modern, social, multi-media, and genuinely fun to use.
Target Audience & User Insights
The Rec Room is designed for media lovers ages 18–45 who use digital platforms to track what they read, watch, and listen to. This audience values ease, personalization, and community, and often feels frustrated by having to switch between multiple apps to track everything they enjoy.
Through audience research, I learned they want:
-
One place to track all media types
-
A modern, intuitive UI
-
Social engagement (reviews, friends, clubs)
-
A low-pressure, cozy space to share recommendations
-
Personalized suggestions based on taste
These insights shaped the foundation of the Rec Room experience.
User Personas
I created two personas to represent core user motivations and frustrations. These personas helped me design features that support both casual media lovers and more active reviewers who want a thoughtful, all-in-one space.
User Journey
To understand how a user would navigate the platform, I mapped a complete journey from discovery to long-term retention. This helped identify emotional highs and lows, barriers, and moments where thoughtful design could make the experience feel smoother and more joyful.
Site Map
With the user flow clearer, I built a site map to structure how everything fit together: media browsing, challenges, community features, and profile tools.
The goal was to create simple pathways that felt natural whether someone was logging a book, joining a buddy read, or checking a friend’s activity.
Accessibility Plan
Since this project centers around creative expression and media, it was essential to make the platform enjoyable for everyone.
I created an accessibility plan early in the process, focusing on:
-
Clear color contrast
-
Alt text and transcripts
-
Resizable text and responsive layout
-
Proper heading structure
-
WCAG-aligned testing
-
Caption support
-
A clear feedback loop for accessibility issues
Designing with inclusivity in mind ensured that the Rec Room would feel inviting, not intimidating.
I moved into wireframing to experiment with layout, navigation, search, filtering, and social interactions.
I explored the landing page, onboarding flows, media browsing, and profile pages, focusing on clarity and reducing friction.
This was where the platform really began to take shape visually.
Wireframes
Branding & Visual Identity
.png)
Designing The Rec Room’s visual identity was all about capturing the cozy, nostalgic feeling of hanging out in a welcoming space, somewhere warm, creative, and full of personality. I wanted the brand to feel playful but grounded, with a hint of vintage charm inspired by libraries, old film reels, and shared stories.
The logo centers around a simple, circular emblem with books at the core, symbolizing community, media, and the joy of discovering something new. From there, I built a warm, earthy color palette to support the brand’s tone: inviting, thoughtful, and a little whimsical.
What I aimed for:
-
Warm browns & deep reds → nostalgic, bookish, cozy
-
Muted neutrals → calming, grounded
-
Soft blue-gray → balance + slight modern touch
-
Circular logo mark → community, comfort, and shared space vibes
Together, these elements help set the tone for the entire platform, making it feel less like an app and more like a room you want to spend time in.
.png)
Development Process
Building The Rec Room wasn’t just a design project for me, it was my first full end-to-end build. I chose to develop the entire platform using HTML, CSS, JavaScript, and TypeScript because I wanted full control over the experience and the freedom to bring every design detail to life exactly as I envisioned it.
Throughout development, I taught myself to translate UX decisions into working code. I built the landing page animations from scratch, created responsive layouts, and even developed a TypeScript mini-game that lets users guess the “one-star review.” Along the way, I solved tricky challenges like debugging async functions, polishing micro-interactions, and ensuring everything still felt smooth and intentional.
This phase pushed me creatively and technically, helping me grow into a designer who can think through interactions from both sides: the visual and the functional.
The Rec Room Prototype
The Rec Room Prototype
Welcome
Social Feeds
The Critics Corner
Other Key Features
Conclusion
The Rec Room pushed me to grow as both a designer and a developer. Through this project, I learned how to translate UX strategy into functioning code, troubleshoot issues efficiently, and approach iteration with confidence. I gained a deeper appreciation for accessible, user-friendly design and how small details can elevate an experience. Ultimately, this project helped me strengthen my problem-solving skills and refine my design perspective in a way that feels authentic to who I am.