Back

Letterboxd App | Case Study

Introduction

Letterboxd is a beloved social networking service for film enthusiasts, and allows users to interact with each other through their shared interests in films.

In this case study, my team and I embarked on a mission to overhaul the app, focusing on user interaction and visual design to create a more streamlined and enjoyable experience. This project was completed in six weeks.

My Role

I was the Lead UI/UX Designer of the team. My main role was to create the high-fidelity prototype and user personas using the test results we obtained. Additionally, I assisted in user research and usability testing.

Problem Statement

Letterboxd is an app with a plethora of features. However, a lack of focus leads to the app being deemed cluttered and unintuitive. Leading to a subpar experience for end users.

These were the main problems that we have found in the existing app:

The process to reach the end goal requires too many steps and navigating through the UI; resulting in numerous pain points for users.
UI could be more intuitive; poor use of screen space let to screens being deemed as cluttered.
Unnecessary steps; pages were stacked on top of each other which required a lot of swiping resulting in a constant back and forth between pages.

Goal

The goals of the project were to:

Resolve pain points for users
Streamline the User Flow process
Enhance the application’s core feature; writing movie reviews

Design Process

Following an Agile-inspired approach, we engaged in constant collaboration and iterative testing with our target audience.

User Personas

We started by creating two user personas. One of which is a film enthusiast, and the other a casual viewer. We thought that having by having two user personas of contrasting personalities, it would give us a better insight into creating an app that is suitable for everyone.

The Creator Archetype

The first persona is a 24-year-old man who is a passionate film enthusiast. Besides watching films, he enjoys sharing his opinions with others by writing reviews. However, he has been feeling frustrated with the Letterboxd app, as he finds the UI to be clunky and inconsistent across different operating systems. Despite his love for the app's concept, he believes that there is a lot of improvement to be made to enhance the user experience.

The Explorer Archetype

The second persona is a 22-year-old lady who is currently pursuing an undergraduate degree. She enjoys watching movies as a casual filmgoer and likes to stay up-to-date with the latest trends. However, she has found that the Letterboxd app contains an overwhelming amount of unnecessary information that can make it difficult to navigate. She wishes that the app could be more streamlined and user-friendly so that she can easily find the content that she is interested in.

User Journey Map

In this User Journey Map, it shows that our primary persona, Wandall, had a rather neutral experience with the app. He experienced frustration with the UI and onboarding process as he took a considerable amount of time to navigate through the app. He also feels that there is a lot of room for improvement in terms of consistency.

User Flow

Prototyping

Low-Fidelity Prototype

We utilized paper prototyping for initial user navigation insights.

Medium-Fidelity Prototype

We then moved on to making the medium-fidelity prototype in Figma, this time adding more features that are in the core app.

Usability Testing

We did guerrilla testing with real users to validate our designs and prototypes. Users were tasked to navigate the app, after which they were to fill up a survey to describe their experiences and pain points.

Here were the key pain points based on our findings:

Unclear Feature Hierarchy
The findings revealed that the absence of a clear feature hierarchy disrupted the straightforwardness of the core user task flow, making it challenging for users to complete tasks.
Complicated Task Flow
Certain actions were found to have a complicated user task flow, causing frustration and confusion for users.
Overcrowded Pages
Overcrowding of information and UI on some pages led to visual exhaustion for users and made it difficult for them to complete tasks.
Confusion with Interactive Elements
Users reported confusion about which elements on the screen were interactive, leading to incorrect actions and disruptions in their task flow.
Interruptions in Core Flow
Users experienced interruptions in the core app flow, causing frustration and hindering their ability to complete tasks effectively.

Final Design

Check Out High-Fidelity Prototype

Project Restropective

Here are the key takeaways that we have learnt from this project:

Importance Of A Defined Problem Statement
During the initial stages, our team faced challenges due to the absence of a clear problem statement. This lack of clarity led to confusion and hindered our ability to choose the appropriate solutions and direction. Establishing a well-defined problem statement was crucial as it provided a clear goal and focus for the project. This enabled us to make informed decisions and work more efficiently, ultimately guiding the project toward successful outcomes.
Catering to User Personas
Understanding users' needs and wants is critical for creating a truly user-centric product. Throughout the project, we prioritized the personas’ requirements, ensuring that every design decision aligned with their needs. This user-centric approach allowed us to develop a product that effectively met the diverse needs of our target audience, enhancing the overall user experience.
Addressing The Needs Of The Project
Usability testing provided invaluable feedback, yet the volume of suggestions presented a challenge. With limited time, we needed a strategy to prioritize which feedback to address. We solve this by evaluating each piece of feedback against the project's high-level problems. By weighing the importance of feedback, we could prioritize changes that had the most significant impact. This method ensured we made the most of the feedback, enhancing the user experience and ensuring the final product met users' needs

Here are the key takeaways that we have learnt from this project:

Importance Of A Defined Problem Statement
One of the most significant lessons learned during the project was the importance of having a well-defined problem statement. During the initial stages of the project, the team encountered several challenges due to the lack of a clear problem statement. This led to confusion and difficulty in choosing an appropriate solution and direction for the project. Having a well-defined problem statement helps in setting a clear goal and focus for the project, enabling the team to make informed decisions and work more efficiently.
Catering to User Personas
Another key learning from the project was the importance of keeping the end-user in mind. It is critical to understand the users' needs and wants, and have empathy for their situation. This helps in creating a product that is truly user-centric and meets their requirements effectively. Throughout the development of the project, the team made sure to always keep the User Persona in mind and make decisions based on their needs.
Addressing The Needs Of The Project
The team gathered a lot of feedback from the usability testing sessions, which was invaluable. However, the team struggled to decide which feedback to address, as not every suggestion could be implemented due to time constraints. The team came up with a solution to weigh the importance of each piece of feedback against the high-level problems identified for the project. By doing so, the team was able to make informed decisions and prioritize feedback that had the most significant impact on the project. This approach allowed the team to develop a more robust user experience and ensure that the end-product met the users' needs.

Here are the key takeaways that we have learnt from this project:

Importance Of A Defined Problem Statement
One of the most significant lessons learned during the project was the importance of having a well-defined problem statement. During the initial stages of the project, the team encountered several challenges due to the lack of a clear problem statement. This led to confusion and difficulty in choosing an appropriate solution and direction for the project. Having a well-defined problem statement helps in setting a clear goal and focus for the project, enabling the team to make informed decisions and work more efficiently.
Catering to User Personas
Another key learning from the project was the importance of keeping the end-user in mind. It is critical to understand the users' needs and wants, and have empathy for their situation. This helps in creating a product that is truly user-centric and meets their requirements effectively. Throughout the development of the project, the team made sure to always keep the User Persona in mind and make decisions based on their needs.
Addressing The Needs Of The Project
The team gathered a lot of feedback from the usability testing sessions, which was invaluable. However, the team struggled to decide which feedback to address, as not every suggestion could be implemented due to time constraints. The team came up with a solution to weigh the importance of each piece of feedback against the high-level problems identified for the project. By doing so, the team was able to make informed decisions and prioritize feedback that had the most significant impact on the project. This approach allowed the team to develop a more robust user experience and ensure that the end-product met the users' needs.

Check out another project!

MOBILE APP

ComfortDelgro

An app that allows students to book driving lessons and tests.

Read Case Study

MOBILE APP

FitPix

An app promoting a healthy lifestyle through a gamified experience.

MOBILE APP

ComfortDelgro

An app that allows students to book driving lessons and tests.

Read Case Study

MOBILE APP

FitPix

An app promoting a healthy lifestyle through a gamified experience.

MOBILE APP

ComfortDelgro

An app that allows students to book driving lessons and tests.

Read Case Study

MOBILE APP