Letterboxd 2.0
Redesigning Letterboxd, a social platform for sharing your taste in film — through reviews, ratings, likes, and lists.
ROLE
UX Research, Information Architecture, UX Design, UI Design
RESEARCH METHODS
Desk research, user interviews, Usability testing
TOOLS
Figma, Figjam, Miro, Keynote
TIMEFRAME
2 weeks
Objective
Improve user experiences on Letterboxd, particularly with the ease of app navigation.
Problem
Letterboxd is widely loved and regularly used by people around the globe. However, many users are finding it difficult to use all of the functions, leading to frustration and alternative product seeking.
Key goals
Understand users frustrations in navigating the app, identify pain points and provide solutions to retain user engagement.
DISCOVER
DEFINE
DESIGN
DELIVER
Problem space
Research
User interviews
Key insights
How Might We?
User personas
User journeys
Task selection & flow
Wireframe sketches
Lo-fi to Mid-fi
Usability testing
Design iterations
High fidelity prototype
Style guide
Accessibility summary
Key takeaways
The Process
Using a Double Diamond framework
In order to structure and streamline the end-to-end UX design process
Initial desk research showed users were struggling with the app’s UX design — particularly the information architecture:
By analysing direct and indirect competitors such as IMDb, Rotten Tomatoes, Vue Cinema, Odeon — I found their ability to build community for film lovers lacking, but their information architecture broadly more intuitive.
Discover
USER NEEDS
Liang’s main user journey involves opening the app and browsing her friends’ activity in order to decide which films to add to her watchlist.
She then wants to refer to this watchlist as a later date to decide what to watch.
UX SOLUTION
There should also be a simpler way for users to view their watchlist.
It should be easier to see friend updates in one place.
USER NEEDS
Jack has two main user flows: adding new films to his custom lists and sharing links to specific lists.
UX SOLUTION
There should be a “Lists” button in the app’s main navigation panel.
USER NEEDS
Sophie finds inspiration through popular film recommendations, articles, lists and reviews. After this, the process is similar.
UX SOLUTION
The design hierarchy should place the 4 categories at the same level.
USER NEEDS
Ashish finds niche films to review according to multiple factors such as genre, language and region.
He also needs to quickly tap into viewer conversations on each film.
UX SOLUTION
The search function must enable a greater variety of film filters.
User reviews should sit higher up on film summary pages.
SOCIAL CONNECTION
CATALOGUING
FILM LISTS
FILM INSPIRATION
CRITICAL FILM CONTRIBUTION
Using survey responses from Letterboxd’s target audience age range, I generated four core personas, based on the most common functionalities users said they are seeking:
Define
Design
Understanding the user flows required to complete Letterboxd’s four most popular functions enabled me to restructure the app’s information architecture to create a simpler, more intuitive experience which serves all users.
The old “profile” section was clunky, “user lists” needed to be more accessible, and as a social-first app, all “friend activity” needed to have one clear home.
The new information architecture
The challenge for wireframing
The new information architecture established seven core buttons that should be accessible at all times to ensure maximum usability and flow.
The barrier to achieving this was re-arranging the existing navigation buttons.
Originally, the bottom navigation panel categories were as follows:
-
“Letterboxd” (For exploring new films)
-
“Search” (To search for films)
-
“Add film” (To add a specific new film)
-
“Activity” (with repetitive updates and redundant sections)
-
“Profile” (containing a confusing layout)
Re-designing the navigation panel
DESIGNING A MORE EFFECTIVE SEARCH
To streamline the navigation options, I compiled the “Search” and “Letterboxd” functions into one category, labelled “Discover”.
This discription neatly covers both tasks:
1. Searching for new films by scrolling through options.
2. Searching for new films with the Search” function.
I kept the magnifying glass symbol, as this is a more widely recognised symbol for “Search”.
UTILISING INFORMATION HIERARCHY
Within the “Discover” section, I added the search panel to the top of the old “Letterboxd” page.
The result is that it still requires users to click just twice to search for a film in the app, but now there’s more space for other features in the main navigation.
MAKING "LISTS" MORE ACCESSIBLE
I then split the “Profile” section into two distinct buttons:
1. “Profile” - containing the user’s diary of all activity and their own reviews
2. “My lists” - containing the user’s:
-
Watch list - of films they want to see
-
Seen list - of films already watched
-
Custom lists - to organise and share film lists they’ve curated.
“New from friends”
“Following”
“Followers”
STREAMLINING NOTIFICATIONS
The “Activity” and notifications buttons were moved into the “Friends” section to avoid unnecessary repetition of the same information.
Adding the "friends" icon to the navigation emphasises one of the app's core features: connecting friends through film.
Deliver
Auto layout - 40 spacing
Components - 48 padding for iOS
Icons - 24 width
It was important to retain Letterboxd’s signature dark-mode style.
While many users had issues with the app’s UX design, 92% of survey partcipants said they liked Letterboxd’s UI design “a lot”.
With 86% of survey respondents claiming to use Letterboxd most frequently after 5pm, it made sense to bake in dark mode as the default display setting. Therefore, most of the UI alterations were made for accessibility purposes.
STYLE GUIDE
ACCESSIBILITY
This app was designed in accordance with W3C’s 2024 Web Content Accessibility Guidelines and passed all colour blindness tests.
Interactive elements are all above the 44 x 44 px minimum to ensure all users are able to complete all tasks. Additionally, font sizes are all 16px or above to maximise readability.
By using more globally recognised symbols, the new design now caters to non-English speaking users.
To increase international design equity further, I would create entirely new translated versions of the app - rather than relying on automated translations. This would guarantee all user interfaces feel customised, and native to each user.
Red, Green, Blue-Weak/Protanomaly
Red-Blind/Protanopia
Green, Blue-Blind/Deuteranopia
Monochromacy/Achromatopsia
Blue Cone Monochromacy
USER TESTING
One UX design experiment I tried was adding prescriptive text under the main navigation icons. However, following user testing, the vast majority of respondents preferred the cleaner, icon-only look.
Users were able to navigate through the app without these text prompts, and as the font size had to be below the 16px minimum WCAG recommendation anyway, the conclusion was to remove them.
Cataloguing
Film inspiration
Social connection
Critical contribution
Project takeaways
This project reaffirmed my belief that an app does not need to be unsuccessful or faulty in order to hugely benefit from a UX overhaul. Good UI =/= Good UX.
Letterboxd is undoubtedly a brilliant app with a strong brand which provides a lot of joy and connection for film lovers all over the world.
There is always more we can learn about how users are interacting with a virtual product in order to make their lives easier, simpler, and more pleasurable.
With a longer project timeline, I would run further user tests over the post launch months in order to gauge what users are saying and how they are feeling about the new changes.
Next steps
As mentioned, I would also like to re-design the app for the most common user languages beyond English. As of Jan 2025, these are: #1 Portuguese, #2 French, #3 Turkish, #4 German, #5 Hindi, and #6 Spanish.
As this project focused predominantly on existing user’s unmet needs, I am keen to explore the needs of potential users, e.g. what new features would make them download the app?