.png)
RUConnected
UX/UI Case Study · Mobile App · Student Experience
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.
Project Overview
TL;DR Edition
Team: Individual project
Duration: 12 weeks
The Rec Room is a front-end development and UX project that explores how people track, reflect on, and share the media they consume, books, movies, shows, and music, through an interactive, playful digital experience.
Many media-tracking platforms focus heavily on data and ratings, leaving little room for personality, reflection, or fun. As a result, the experience often feels transactional rather than engaging, making it harder for users to meaningfully connect with the stories they love or share them with others.
Front-End Developer / UX Designer
-
Designed the overall user experience and interaction flows
-
Built the interface using HTML, CSS, and JavaScript
-
Implemented interactive features and playful UI elements to support exploration and reflection
-
Concept development and interaction design
-
Wireframing and UI exploration
-
Front-end development and feature implementation
-
Iterative refinement based on usability and interaction testing
Created an engaging, interactive platform that encourages users to log media, play with content, and reflect on their experiences in a way that feels personal, expressive, and enjoyable.
This project strengthened my ability to translate UX ideas into working front-end experiences and reinforced the importance of interaction design in creating delight, without sacrificing usability.
Now... To make a short story long
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 transforms media tracking into a shared experience, encouraging connection, discovery, and conversation rather than solo consumption.
This project blends UX design, branding, and front-end development to create a digital “rec room” built for reflection, discovery, and community.
The Problem
People consume stories across countless platforms, books, shows, movies, and music, but there’s no single place that reflects the full picture of what they love. Media habits become fragmented across apps, notes, screenshots, and mental lists, making it harder to reflect on experiences or share them meaningfully with others.
Existing media-tracking tools often prioritize ratings, stats, and productivity over emotion and personality. As a result, tracking media can feel transactional rather than expressive, leaving little room for reflection, discovery, or connection.
My Role
Led the project end-to-end, from early concept and sketches to the final coded experience, combining UX design, branding, and front-end development.
-
Designed the whole user experience and interface, including layout, navigation, and visual branding
-
Built the site using HTML, CSS, JavaScript, and TypeScript, implementing responsive, interactive components
-
Created playful micro-interactions and landing page animations to establish an engaging first impression
-
Developed an interactive media-guessing game as a unique feature within the platform
-
Iterated on visuals, functionality, and interactions based on user feedback and personal testing
Tools Used
Used throughout ideation, design, development, testing, and iteration.
Figma
HTML
CSS
JavaScript
TypeScript
Visual Studio Code
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 explored what users appreciated, such as community features and reviews, as well as what frustrated them, including outdated interfaces, limited media types, and clunky navigation.
-
Goodreads users valued the large community and Kindle integration, but struggled with an outdated interface, limited rating system, and unreliable reviews.
-
Letterboxd offered strong social features and a rich film database, but focused exclusively on movies, leaving out TV, books, and podcasts.
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, but often feels frustrated by having to switch between multiple apps to manage everything they enjoy.
Through audience research, I found that users wanted:
-
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
User Personas
To ground design decisions in real user needs, I created two personas representing core motivations, behaviors, and frustrations among media lovers. These personas helped me focus on users who actively track what they consume and want a more thoughtful, all-in-one space to reflect, discover, and share.
Sarah represents users who enjoy logging and reflecting on media but feel limited by outdated platforms and scattered tools. Alex represents more social, review-driven users who want to engage with others and track multiple media types in one cohesive experience.
Together, these personas guided feature prioritization, interaction design, and the platform's overall tone, balancing personal reflection with community engagement.
User Journey
To understand how users move through the platform, I mapped a complete journey from initial discovery to long-term retention. This journey helped visualize how users’ needs, emotions, and expectations evolve at each stage of interaction.
By identifying emotional highs and lows, friction points, and moments of hesitation, the journey map highlighted opportunities to reduce complexity, add reassurance, and introduce playful moments that make the experience feel smoother and more rewarding.
These insights directly informed design decisions around onboarding, content creation, social discovery, and retention, ensuring the platform supports users not just functionally, but emotionally as well.
Site Map
With the user journey clearly defined, I created a site map to organize how the platform’s core features fit together, from media browsing and challenges to community interaction and profile management.
The goal was to design simple, intuitive pathways that feel natural whether a user is logging a book, joining a challenge, or checking in on a friend’s activity. By grouping content logically and keeping navigation shallow, the structure supports quick exploration without overwhelming users.
This site map served as a foundation for wireframing and front-end development, ensuring the experience remained cohesive as features and interactions were built out.
Accessibility Plan
Because The Rec Room centers on creative expression and media, it was essential to design an experience that feels welcoming and usable for everyone. Accessibility was considered early in the process, not added as an afterthought.
I created an accessibility plan focused on the following principles:
-
Clear color contrast to support readability
-
Alt text and transcripts for images and media content
-
Resizable text and responsive layouts across screen sizes
-
Proper heading structure for screen reader navigation
-
WCAG-aligned testing throughout development
-
Caption support for video and animated content
-
A clear feedback loop for reporting accessibility issues
Designing with inclusivity in mind helped ensure The Rec Room feels inviting and intuitive, supporting creativity without creating barriers.
I moved into wireframing to explore layout, navigation, search, filtering, and social interactions, focusing on clarity, hierarchy, and reducing friction across the experience.
I mapped out key flows, including the landing page, onboarding, media browsing, and user profiles, to ensure users could quickly understand how to navigate the platform and begin logging content without confusion.
This stage is where the structure of The Rec Room began to take shape visually, allowing ideas from research and planning to translate into tangible, testable layouts.
Wireframes
Branding &
Visual Identity
.png)
Designing The Rec Room’s visual identity centered on capturing the cozy, nostalgic feeling of spending time in a welcoming space, somewhere warm, creative, and full of personality. The goal was to create a brand that felt playful yet grounded, with subtle vintage inspiration drawn from libraries, old film reels, and shared stories.
The logo is built around a simple, circular mark with books at its core, symbolizing community, media, and the joy of discovery. From there, I developed a warm, earthy color palette to support a brand that feels inviting, thoughtful, and slightly whimsical.
What I aimed for:
-
Warm browns and deep reds to evoke nostalgia and comfort
-
Muted neutrals to create a calming, grounded foundation
-
Soft blue-gray accents for balance and a modern touch
-
Circular logo forms to reinforce ideas of community and shared space
Together, these visual elements help position The Rec Room as less of a traditional app and more like a space users want to return to, comfortable, personal, and familiar.
.png)
Development Process
Building The Rec Room wasn’t just a design exercise; it was my first fully end-to-end build. I developed the platform using HTML, CSS, JavaScript, and TypeScript to maintain complete control over the experience and bring every design detail to life.
I initially built early versions of the project using TextMate, later transitioning to Visual Studio Code as the codebase grew and required more advanced debugging, TypeScript support, and extension tooling.
Throughout development, I translated UX decisions into working code by building landing page animations from scratch, creating responsive layouts, and developing a TypeScript-based mini-game. This phase pushed me both creatively and technically, strengthening my ability to think through interactions from both the visual and functional sides.
Final Prototype Walkthrough
To bring the experience to life, I created interactive prototype videos that demonstrate how users navigate the platform, engage with content, and interact with key features. These walkthroughs highlight how design decisions translate into fundamental, usable interactions, focusing on flow, feedback, and delight.
ⓘ
Tip: Click the info icon in the top-right corner of each video to learn more about the interaction and design decisions being shown.
The Rec Room Prototype
Welcome
Social Feeds
The Critics Corner
Other Key Features
Thank You
For viewing The Rec Room.
This project allowed me to explore the intersection of design and front-end development, turning ideas into interactive, functional experiences. Building The Rec Room strengthened my understanding of layout, interaction patterns, and how design decisions translate into code.
Working through challenges in structure, responsiveness, and usability helped me grow more confident in problem-solving, iteration, and technical decision-making. It also gave me a deeper appreciation for how thoughtful design systems make development smoother and more scalable.
This project pushed me to think holistically, not just about how something looks, but how it behaves, feels, and functions for the user.