UX Case Study: Conceptual Movie Sharing Mobile App (2024)

My Role: UX Apprentice; Co-Designer & Co-Researcher | Duration: 2 Weeks | Project Status: Complete

My third UX Design project was also my first group project in my UX Design program. My team member, Shiven Patel, and I were tasked with creating a concept design for an existing app by updating its features and interface. The app we were assigned was Letterboxd — a social platform for people to share their options and love for movies. On Letterboxd, movie lovers can create custom lists of movies, track viewing dates and movies they’ve seen, read and write reviews, and interact with other people who share their passion for film.

Through in-depth user research, team ideation, and hi-fidelity prototyping over the course of two weeks, Shiven and I co-created an Android app mockup of our Letterboxd concept design. We specifically chose the Android operating system due to the inconsistency of the Letterboxd interface across different platforms.

Based on our research, we decided to conceptualize an explore page as a replacement for the current Letterboxd home screen, as users expressed that they mainly valued personalized film recommendations and suggestions based on their activity on the app. We also chose to redesign the individual movie information page to emphasize important details and clarify main user actions, as the current layout was confusing and unnecessarily complicated for users to navigate.

Movie lovers needs a simplified way to keep track of & research movies they want to watch because they have too many lists across streaming services.

Movie lovers need more robust movie recommendations because a personal browsing experience is important to them.

• How might we simplify layout to make the app easier to navigate?
• How might we reduce the number of features to highlight major calls-to-action that meet users’ needs and goals?
• How might we standardize Letterboxd across multiple platforms to create consistency between each operating system?
• How might we simplify app navigation to create a more intuitive, easy experience for users?

The main goal of our user research was to learn about people’s habits and behaviors around viewing, sharing, and tracking movies. We specifically wanted to know how our users researched movies, what elements they prioritized when researching movies, and what factors influenced their decisions to watch or skip certain movies.

We also wanted to learn how and why people loved watching movies to empathize with their motivations and desires. By diving into the logic behind our users’ typical behaviors, we could effectively tailor our design decisions to meet their main needs and goals.

Finally, we wanted to learn how frequent movie watchers interacted with currently available media platforms and streaming services to learn about features they utilized often, as well as pain points they ran into during their movie experience.

User Interviews: a UX research method used to assess users’ preferences, attitudes, characteristics, and opinions on a given topic.

Who?

Shiven and I interviewed a total of six people who all shared a common love for cinema and watched movies regularly. By conducting in-depth user interviews with our participants, we learned more about their movie viewing and tracking habits, how they researched movies of interest, and ways in which they socialized around movies.

Habits and Behaviors

During our interviews, we noted that all of our participants used streaming services — including Netflix, Hulu, HBO Max, and more — to watch movies and TV shows. All of our users utilized the available tracking features on their various services, and mentioned that creating custom watchlists and receiving personalized recommendations were their favorite streaming features. Users often watched trailers as a convenient way to judge the potential quality of a new movie, as they typically contained the best story elements and scenes. However, it was also noted that trailers were not always fully indicative of a movie’s quality and storytelling.

Additionally, users expressed that a movie’s plot, cast, and cinematography were important contributing factors in films they enjoyed or gauging possible interest in a new film. Some mentioned that they may peruse audience reviews as part of their movie research, but none cared for critic reviews as critics’ opinions felt out-of-touch with those of ordinary movie watchers.

Why?

When asked why they enjoyed watching movies, many of our users brought up personal, emotional connections to films and making decisions about movies to watch based on their mood. Several people grew up watching movies with family, so the act of watching and sharing films with others brought them comfort and nostalgia. Users also mentioned that movies were great for socializing in multiple ways, whether through sharing favorite movies, holding virtual watch parties, or going to the theater with others. Most of our participants also mentioned they would watch or consider watching new movies if they were publicly well-received or had high ratings.

Competitive & Comparative Analysis: a UX research strategy that analyzes competitor & comparator products or organizations to identify current trends and patterns happening within and outside the industry.

We conducted two forms of competitive and comparative analysis — a feature inventory and task analysis. Our overall goal was to learn about how users interacted with currently available platforms and discover what features and functions were successful or needed improvement from similar companies in the industry.

Feature Inventory: an audit of main competitors and comparators that shows which features each company offers and which they do not.

See Also

New in Town — A UX Case Study

Our feature inventory involved three competitors — Rotten Tomatoes, IMDb, and Google– and three comparators — Goodreads, Last.fm, and Yelp.

For our competitors, we analyzed available features on popular movie and television databases. Rotten Tomatoes and IMDb functioned similarly as movie databases — we learned about common film classifications and details that were typically available for movies, including plot summaries, trailers, cast & crew, photos, ratings, and reviews from both critics and audience members. Google had both research functions and personalized features, such as convenient ways to save films to your watchlist and information on media platforms that streamed available movies.

Our comparators included Goodreads, a social book-sharing platform, and Last.FM, a music-sharing app. We also analyzed Yelp, a review-sharing website, as reviews seemed prominent in the movie-sharing digital space. Through our feature analysis, we learned that most of the platforms we examined offered the same or similar features, but differed in their organization and prioritization of features and navigation levels.

Most of our competitors focused on features related to discovering and researching movies, but had few offerings for saving movies or personalizing suggestions. They also did not offer many social features or ways for users to interact with others in the digital space.

On the other hand, Letterboxd technically offered more features that most of the competitors we examined, but acutely suffered from their unclear labels and excess features, which obscured important functions and made app navigation and interaction incredibly confusing.

Task Analysis: the deconstruction of a task step-by-step to glean insights on how to improve the user experience.

We conducted task analyses with ten users on both Letterboxd and Goodreads, with the goal of learning about users’ experiences with each platform. We wanted to learn how frequent movie watchers interacted with the current Letterboxd app to learn about the struggles that they faced and features they expected. We also wanted to learn how Goodreads, a book-focused social app similar to Letterboxd, presented their content differently and how their features and functions were utilized compared to those on Letterboxd.

Letterboxd

Through our task analysis on Letterboxd, we discovered the Letterboxd app was inconsistent across different platforms. Android, iOS, and desktop versions all had different layouts and features, which created a lot of confusion for our users as there were different ways to accomplish each task based on the operating system. We noted that few of our Android users were missing features that were available on the iOS version — for example, social features such as replying to reviews were hidden on the Android version. The Android version of the app was overall not as in-depth as the iOS one, and app features were difficult to find on both platforms.

We also learned that call-to-action links on Letterboxd were hard to distinguish and did not stand out from the app’s body text. Very simple features, like adding a movie to a new list or viewing a movie trailer, were hard for users to identify easily. Some features were even sneakily located under multiple navigation levels, making the search process even more complicated for users who couldn’t find the functions they were looking for.

Goodreads

For our comparator task analysis on the Goodreads website, we found the features offered by Goodreads were better understood and more appealing to users. For example, users enjoyed viewing personalized recommendations based on their saved and want-to-read books. The clear and consistent labeling in Goodreads’ navigation made it easier for users to find exactly what they needed, when they needed it.

Persona: an archetype of a group of users created by identifying themes, needs, & pain points from user research.

Based on our synthesized user research, we created a User Persona named Alice to capture our users’ overall needs and goals for movie tracking and sharing, as well as their frustrations about currently available features and media platforms. Along with Alice, we created a journey map for her to walk through a task on the current Letterboxd app — saving a recommended movie similar to Forrest Gump, one of her favorite classics.

“I” Statements

• “I loved watching movies growing up.”
• “I make decisions about movies to watch based on how I’m feeling.”
• “I watch trailers as a quick way to gauge my interest in a new film.”
• “I value storytelling, cast, and cinematography in movies I watch.”

Journey Map: a visualization of the process that a user goes through in order to accomplish a goal — tracking high-level emotions, needs, and pain points.

After creating our persona, we wanted to visualize Alice’s digital journey on Letterboxd to find movie recommendations based on films she enjoys. We considered how Alice might navigate the Letterboxd app as a new user and what she may experience or expect from the platform.

To set the context for our journey map, we had Alice recently rewatch one of her favorite movies, Forrest Gump. After watching, she decides to search for similar films to start a family watchlist. Based on her wife’s recommendation, Alice downloads Letterboxd on her Android phone, curious about a platform where she can centralize her various watchlists and conveniently browse a database of films from her phone.

We emphasized the point here that Alice uses a Samsung phone with an Android operating system, while her wife has an iPhone and uses iOS. This was due to the major differences in features and layout between the two interfaces that we noted in our research phase. With our retrospective journey map, we imagined what Alice’s digital journey might look like realistically with the current Letterboxd features and interface. We used data from our task analyses to inform Alice’s expectations and predicted emotions during the process. This journey map helped kick off our ideation stage, where we started reimagining the possibilities of Letterboxd for our concept design.

Alice needs an efficient method of tracking and researching movies because she wants to spend less time browsing and more time watching movies with her family.

Information Architecture: the logical and sustainable organization, structure, and labeling of content with the goal of helping users effectively find information and complete tasks.

We laid out our app’s potential navigation paths by structuring our information architecture based on the current Letterboxd app, feedback from users, and our competitive & comparative analyses.

To map out our concept app navigation. we used our research synthesis to inform our decisions behind global navigation labels, icons, and levels. We organized categories based on factors users expressed as important, such as genre, cast, and ratings.

We decided to create global navigation in both the top and bottom bars of the app. In the top bar, we added the Letterboxd logo (which also functioned as a home button), search, notifications, and messages. We also included a back button in the top left corner of the navigation bar on all pages except the home page. In our bottom bar, we added tabs for home, browse, profile, and collections, where users could view their personal movie lists. We also added a multipurpose “add” button with a plus sign symbol for adding new reviews, collections, and favorites all in one centralized place.

With two global navigation bars, we were able to highlight various features that we knew users would utilize or return to often, while separating functions based on their type. By including “Browse” in the bottom bar and “Search” in the top, we gave users the opportunity to research in multiple ways. Following the structure of other popular social apps, we kept tabs for main app pages spotlighted at the bottom, while icons for social functions like messaging and notifications stayed in the top-right corner.

User Flow: a diagram that breaks down the path taken by a prototypical user on a website or app to complete a task successfully.

With our navigation finalized, I created two user flows for our Letterboxd concept design. For our new feature, we designed an explore page that would show users personalized recommendations based on their in-app activity. Our first user flow took Alice through browsing her personalized recommendations to pick a movie based on her “Holiday” collection and add it to her favorites.

For the redesigned feature, we created a new movie page to spotlight important details and major user actions. Our second user flow had Alice search for the movie “Finding Nemo” and add it to a newly created, child-friendly movie collection for her kids.

My partner, Shiven, sketched out multiple versions of our website pages, mainly focusing on our two features and the transition pages between each of them.

• Based on user research, we designed several layout ideas for presenting more simplified navigation and personalized recommendations based on user activity. We implemented personalized suggestions on the Home page as users indicated that custom suggestions were important to them and a major factor in making decisions about movies.
• On the Browse page, we showed popular, common recommendations and universal film classifications. The redesigned Search bar added more relevant categories to help users search through films using specific criteria, such as genre, actor, director, production, or recommendations from the Letterboxd team. We also added “similar to” movie suggestions to our search results page so that users could browse other movies related to their selected one.
• We simplified the Movie Details page by creating bright, clear call-to-action buttons to reduce user confusion. Our redesigned buttons helped standardize major user actions, such as writing reviews and creating or adding to collections. We also refined our “add to collection” process by using modals, or pop-up boxes, to make the process of adding movies to collections more convenient for users.

Using my user flows and Shiven’s sketches as our foundation, we started designing our mid-fidelity wireframes in grayscale. We started off with the home and search pages — as we wanted our new Explore feature to replace the current home page, we needed to ensure we differentiated between “Explore/Home” and “Search” in our design. We decided our Explore feature would be mainly comprised of personalized user recommendations based on in-app activity, such as want-to-watch movies, user-created collections, favorite genres, and more.

In our usability tests, we tested our mid-fidelity mobile prototype with five users who all shared a common love for watching movies. We set two goals:

1. Users will be able to search for a movie based on “Your ‘Holiday’ Collection” and favorite it in one minute or less with no more than 2 errors.
2. Users will be able to search for Finding Nemo and create a new collection titled “Kids” to add it to in two minutes or less with no more than 2 errors.

We used time and number of errors, or misclicks, to gauge our users’ quantitative results. For qualitative data, we pulled main insights about our users’ thought processes and feelings while performing their tasks. Users encountered the most complications during the first task, in both time and errors, but all users completed the second task easily and error-free.

Findings + Takeaways

Only two of our five users completed Task 1 with a 100% success rate, meaning performing the task within the time frame of 1 minute and with 2 or less errors. Two of our users took over 1 minute to complete this task, while another two users made 6 to 7 misclicks. We learned that some of our icons were misunderstood by users based on their prior experiences and knowledge, and we discovered some calls-to-action were still unclear in our prototype.

All five of our users performed Task 2 with a 100% success rate, meaning 100% of our users performed the task within the time frame of 2 minutes and with 2 or less errors. The seamless experience of our users during this task told us the app structure and prototyped actions were in line with what users expected to see. We also noted that our clear labels, step-by-step navigation, and redesigned call-to-action buttons met users’ needs more effectively than the initial Letterboxd design we used for our task analyses.

After the usability tests, Shiven and I focused on prototype iterations. We had four main design iterations:

1. A major point of feedback we received was that most users assumed the static heart pictured under movie thumbnails and on individual movie pages was actionable, and attempted to click it first when trying to favorite their selected movie. To resolve this, we prototyped the heart to be an actionable button and gave it an active state to indicate favorited movies.
2. Users were confused by the dual search icons in our mid-fi prototype; initially, our “Search” button in the top navigation bar and “Browse” button in the bottom navigation bar had the same magnifying glass icon. To avoid confusion, we changed the Browse icon to a binocular symbol to differentiate the two action buttons.
3. We initially represented movie ratings with a single star icon next to a number value, but this icon confused our users, who mistook it for a “favorite” or “save” action. To align with industry standards, we changed the single icon to the widely used 5-star rating system.
4. Users mentioned in their usability tests that having mutiple pop-up boxes cluttered the movie page when attempting to create a new movie collection. To streamline this process, we updated our modals to appear one at a time as users clicked the appropriate call-to-action buttons.

With our synthesized test data, we updated our mid-fidelity prototype and added color and images to transition it to a hi-fidelity mockup. We uploaded movie covers relevant to each category we designed, and we decided on the Letterboxd orange as our accent color for call-to-action buttons and indicating active states. We also uploaded movie trailers, plot summaries, cast & crew members, and reviews to our individual movie pages for Finding Nemo and Elf. This helped us create a realistic idea of how we would present an individual movie and its details on our concept app.

Shiven and I used feedback from our usability tests to inform our recommendations and next steps. We decided on three main features we would implement in the future, given the opportunity:

Streaming service integration: In our mockup, we showed icons on the movie pages to represent streaming service that the selected movie is available to watch on. In the future, we would prototype these icons to actual call-to-action buttons — when clicked, users would be prompted to open the related streaming service app on their phone directly from the Letterboxd app.

Geolocation ability: Implementing geolocation and local movie theater information would help expand users’ watch availability and options for viewing movies, as both streaming and theater information would be available to peruse. Users would be able to see theaters in their local area, even far from home, as well as view available movies, scheduled showtimes, and upcoming release dates. This also contributes to socialization as it allows users to view places they may want to attend a movie screening with others in their social circle.

Robust social features: Letterboxd, though advertised as a social app, does not particularly emphasize social features and interaction in their current design. Based on our research and user suggestions, we ideated on several social features we would add, including:

• Recommended movies based on combined activity between two users
• Group watchlists, recommendations, and other group-centered features
• Social calendar for scheduled movie nights, upcoming releases, film workshops, and more

Despite some initial hiccups, our first group project was a fantastic learning and collaborative experience. Shiven and I taught and learned so much from each other during this process, and we genuinely enjoyed growing together and helping each other refine our skills. We are both immensely proud of our final product and look forward to tackling our next UX projects!