UI Case Study:
Letterboxd Redesign

Project Overview

Through several months of using the social movie app Letterboxd, I noticed some areas for improvement in the UX and UI. To explore how these problems may be solved, I embarked on a redesign project.

 

The Problem

The overall functionality of Letterboxd is relatively smooth and impressive once you get used to it, but there are issues. The onboarding process is close to non-existent, throwing the user into the deep end. There are lots of different links and icons, the functions of which largely overlap.

 

The Solution

My goal was to make the app more friendly to newcomers, while staying true to the core functionality for hardcore fans. The best way to do this was to consolidate multiple functions into fewer. Through rapid iteration, I identified redundant and repetitive functions that could potentially be removed or combined with more valuable ones.

 

User Stories & User Flows

In order to empathize more closely with potential users I drafted a series of user stories, which in turn helped to keep my user flows concise and convenient.

 

Low-Fidelity Wireframes

In early wireframes, I ideated in order to make each function of the app digestible through progressive onboarding, as well as consolidating navigation items to ease cognitive load.

 

Mid-Fidelity Wireframes & Gridwork

Once happy with my initial wireframes, I upgraded them to mid-fidelity in Figma to add detail and get a better grasp of how the final product would operate. I also aligned the elements to a four-column grid.

 

Design Patterns and Typography

It was important to implement commonly used design patterns to further establish a sense of comfort and familiarity for the user. Around this time I explored fonts and began settling on a consistent typographic style for the new Letterboxd.

 

Mood Boards

Initially I was content to remain faithful to the original ‘dark mode’ style of the app, but I wanted to be sure. I explored a lighter version, and subsequently decided that it was the right direction for the redesign. It feels welcoming to new users while maintaining sophistication for more serious movie buffs.

 

Style Guide

Evoking the drama of movies and film, and freshening up the new Letterboxd even further, I implemented a new color palette across the board (along with redrawn icons, new imagery standards, and UI elements) to further complement the redesign and consistently meet best practices. These standards were all documented in a clear style guide to assist any other designers or developers who may work on the product.

 
 
 
 
 

Tablet and Desktop Breakpoints

Once the branding and usability was in a good spot, it was time to adapt the app for various breakpoints, ensuring a responsive experience on whatever device our users choose access it from.

 

Mockups

In these presentation mockups, as well as the hero image for this case study, I wanted to complement the branding through beautiful backgrounds, as well as evoke scenarios where viewers are most likely to browse through the app.

 

Prototype

Feel free to explore the current prototype of the new Letterboxd here.

 

Key Learnings

  • Using a mobile-first design approach resulted in some challenges when making the design more responsive for larger breakpoints. In short, it’s best to keep in mind that ‘mobile first’ does not mean ‘mobile only’.

  • Due to time sensitivity, user-testing was not possible. Having to rely on informed assumptions alone made some decisions harder.

 

Next Steps

  • Schedule user testing sessions for both fans of the original app, and potentially new users within the target audience.

  • Assess and update the prototype based on accessibility and Material Design standards.