Letterboxd Mobile Redesign
ROLE:
Product Designer
TEAM:
5 Designers
TIME:
September - November 2024
SKILLS:
UX Research
Interactive Design
Prototyping
TOOLS:
Figma
Figjam
CONTEXT
Brief
Letterboxd is a social network platform for film enthusiasts. The platform allows users to log and review movies they’ve watched, create watchlists and collections, and follow friends to see what they’re enjoying.
Problem
Although Letterboxd provides a space for film discovery and social engagement, users find it difficult to discover niche films and form deeper connections due to limited community features. The platform's lack of robust filtering and sorting tools also diminishes the ability to personalize content, leaving users with a less immersive experience.
USER RESEARCH
Competitive Analysis
We conducted a competitive analysis of six of Letterboxd's competitors, evaluating discoverability, search & filters, reviews & social features, navigation, and personalization. IMDb and Metacritic excelled in discoverability and filtering, Letterboxd and Trakt led in reviews and social features, and navigation was strongest on IMDb and Goodreads. Personalization was a common gap, with IMDb, Goodreads, and Last.fm performing best.
User Interviews
We conducted 15 user interviews and launched a survey focused on film discoverability, reviews, and users’ experiences navigating and using the app's key features. We then clustered the findings through affinity mapping, which helped us identify common trends and uncover our main insights.
User Personas & Journeys
To deepen our insights, we developed two user personas that captured our target audience’s needs and pain points. We then mapped their user journeys to visualize the end-to-end experience and identify opportunities for improvement through ‘how might we’ questions.
IDEATION
Information Architecture
To streamline navigation and increase accessibility to features, we focused on building a clear intuitive information architecture. Research revealed that many features were unknown to our interviewees and difficult to locate. Reorganizing the structure of the app and the addition of new elements addressed these pain points.
DESIGN & USER TESTING
Sketches
Each of us took two to three pages from the navigation bar and created low-fidelity sketches. We then came together to share perspectives, merge concepts, and refine our thinking—ultimately identifying key features that best addressed our insights.
Mid-Fidelity Designs
After sketching low-fidelity screens, we moved into mid-fidelity wireframes to build user flows and conduct testing. This stage allowed us to merge ideas from our sketches, iterate on new concepts, and refine designs through continuous feedback and collaboration. Below are some of the key screens we developed
User Testing Insights
During the mid-fidelity phase, we conducted a round of user testing with 12 participants and found 3 key takeaways.
FINAL DESIGNS
Onboarding Prototype
The original onboarding functioned more as an app tour than a way to understand the user. To better support film discovery, we introduced onboarding questions designed to capture user preferences and provide more personalized recommendations.
Home Prototype
The original home screen only highlighted weekly popular films, limiting discovery. To encourage exploration and reduce reliance on outside sources, we introduced additional categories tailored to users. We also addressed the need for stronger filtering by adding more robust options to the review and list pages.
Search Prototype
To promote better discovery, we redesigned the search page with trending searches and a dynamic search bar featuring rotating suggestions. Users can also take a short quiz for personalized recommendations. Search results are now more robust, including films, director profiles, upcoming releases, curated lists, and a follow option. To further address the need for stronger filtering, we added advanced filter options when searching for films.
Add A Film Prototype
The main focus of this page is the use of tags. Originally, the app didn’t display recommended tags—even while typing—so tags were limited to whatever users manually entered. Our redesign organizes frequently used tags and also recommends tags specific to the film being added to a list.
Film Prototype
On this page, we addressed two insights from user interviews (insights 1 and 3). We added a section that shows how well a movie matches a user’s preferences, with expandable details for more context. To foster a sense of community, users can now start comment threads under reviews, allowing for organized discussions, replies, and interactions around specific points, rather than having all comments lumped together. This encourages more meaningful engagement and makes it easier for users to follow conversations.
Activity Prototype
We focused on removing redundant notifications and clarifying the purpose of each tab on the Activity page. The original "Incoming" tab was replaced with an "Updates" tab, which emphasizes notifications about favorite films and actors, reducing confusion and making it easier for users to stay informed.
Profile Prototype
The Settings page under the Profile tab was cluttered and difficult to navigate. To address this, we revamped the layout to be more intuitive and user-friendly. We also increased the visibility of "My Library," giving users quick and easy access to their saved films, lists, and more.
REFLECTION
Color accessibility challenges.
This was my first experience designing for an application with a primarily dark color palette, which gave me new insight into how accessibility considerations are adapted in design.
Everything is user-centered.
Throughout this project, I realized how important it is to continually refer back to my research. Revisiting interview notes and testing insights ensured that my designs directly addressed users’ pain points. This experience reinforced the idea that everything in design revolves around the user, and that strong solutions are always grounded in their needs and experiences.
If I had more time…
I would’ve liked to conduct more user testing after creating our high-fidelity screens. While we addressed the insights from the first round of testing, an additional round would have helped validate that our solutions effectively resolved the issues.