Frame by Frame

A movie review website catering exclusively to animation, from animated feature and short films, to TV shows and anime, and many different mediums of the art form.

Overview

Problem

There is a lack of dedicated platforms focused solely on animated movie reviews. Most movie review websites predominantly cover live-action films, making it difficult for animation enthusiasts to find comprehensive and insightful reviews. Animated movie reviews are scattered across various websites, blogs, and social media platforms, making it challenging for users to find all relevant reviews and ratings in one place. It is also hard to discover more niche animated media on said websites.

Solution

I designed a user-friendly and visually engaging media review website focused exclusively on animated media. Users can discover, read, and submit reviews for animated movies, fostering an interactive community. The website offers comprehensive database of animated movies and short films, allowing users to explore and critique their favorite animated features.

My Role

UX Research, UX/UI Design

Project Length

2 weeks

Tools

Figma

Research

Competitive Analysis

Since I wanted this site to function like Letterboxd and Goodreads but exclusively for animated content, since there are a lot of animation that does not make it to most review sites, especially from other countries. I decided to do an in depth analysis on those two sites, as well as a look at Rotten Tomatoes, another popular site to look at other opinions of movies.

Letterboxd

Pros

Social Networking-emphasizes user interaction and community-building, allowing users to follow others, like, comment on, and discuss movie reviews and lists.
Users can track movies they've watched and when they watched them
Users can curate and share lists of movies: favorite films, watchlists, or themed collections.
Personalized Recommendations
Most similar to the goal of this site

Cons

Limited review credibility since anyone can post
smaller database/user database
limited non english/non feature film content

Goodreads

Pros

extensive catalog allows users to discover and explore a diverse selection of books
community aspect enhances the social experience of reading
relies on user-generated content: broad spectrum of opinions and recommendations (adds to authenticity)

Cons

outdated and less user-friendly interface. Users often express a desire for a more modern and intuitive design
users feel that the algorithms could be more refined and customizable to better suit individual tastes

Rotten Tomatoes

Pros

aggregates movie and TV show reviews from critics and audience members.
provides a score based on the percentage of positive reviews from critics
inclusion of audience reviews and ratings encourages user engagement and interaction

Cons

oversimplifying nuanced opinions
selects certain critics--may not fully represent the diversity of critical opinions
provides a score based on the percentage of positive reviews from critics
less general public opinions
Limited social networking features and personalized recommendations compared to Letterboxd

Insights

the user generated reviews are really important for authenticity
community aspect is very much appreciated from users
highly diverse and extensive range of media is necessary for this to be a good product
users want to track their movies

Surveys and Interviews

Based on my research on existing services to read and post review on media, I created and deployed a survey to both movie buffs and casual watchers alike to gain a sense of the experience they got while trying to find a movie to watch, how they found new animation media to watch and what they found useful on different sites

Based on a qualitative survey filled by 20 respondents and 5 interviews, it came down to the problem that people do not have a centralized place to watch animation movies
- 75% of users just used google and took a Rotten Tomatoes score from the search window
- 60% of users did not really know how to interpret a critic's review past a few words
- 90% of users said they valued common opinion over critic opinions when watching movies
- 75% of users said it was hard to use Letterboxd and Rotten Tomatoes to discover new movies
- 100% of users said they do not feel confident to post on film site and prefer sharing on their social media (Letterboxd/Rotten Tomatoes feels too serious and not for casual fans

I used these results to inform my user interview questions regarding why someone would use a website like this and what features would be helpful, wanted, and/or necessary. My insights were

People watch reviews to
- find a new movie to watch
- affirm or contrast their opinions of a movie theyve seen
people sometimes dont write reviews on sites because
- they are not confident in the field so therefore not confident in their opinion
- views are already represented by other reviewers
Most people only hear about animated films through word of mouth unless they are within or tangential to the field other than popular disney or pixar movies
Knowing reviewers in person or seeing it posted on a personal account as a part of the reviewer’s personality make the reviews seem more honest and believable
Casual watchers prefer to search on google and take whatever pops in first
Many animated films that are not from big companies, especially shorts, do not have existing reviews or a place they are listed, so people do not watch them because
- they cant find them
- they don’t know if it is any good when they come up on socials/youtube so they do not invest time to watch
Features that would be good for the MVP:
- User Registration and Profiles
- A dashboard with a feed of relevant reviews, movie recommendations
- Rating System for films
- Movie Detail Page (details about plot, director/cast, ratings, language, accessibility)
- Film diary

Creating Personas

From my client interview and research, I then created two personas I felt best fit the different types of people using the app the most, someone that is an animation enthusiast and actively has knowledge about the subject, and someone who does not know much about animation but wants a way to find information and ratings for movies (for other people in their lives like children)

User Stories

In researching the ideal user and creating personas, I narrowed it down to these key user stories to target when creating this website.

As a user looking for a movie to watch, I want to be able to see lists of recommended or popular movies

As a user deciding on a movie to watch, I would like to be able to see a movie's details and reviews about it to decide if I want to see it

As a user looking for a movie to watch, I would like to be able to connect with other users to share and take recommendations

As a user, I would like to be able to create lists of movies I have seen, want to see, or by any category I choose

Site Map

Taking these user stories and all my research into consideration, I created the information architecture for my app in the form of a site map in order to get a view on the pages I would want to design and what features to include on each of them. I included a homepage, where users would get their feed of reviews, and a few recommended titles, a discover page that would have media organized by category or genre, a movie profile page and a user profile page.

User Flow

As I narrowed down the key features and tasks that the client wanted to accomplish with the app, I decided that it would be best to stick to a simple flow of a user opening to a homepage with recommendations and reviews, options to find movies from there or the search and explore page, ultimately leading a user to the movie's profile where a user can decide on the movie or leave a review.

Sketches

Wireframes

My first low fidelity wireframe iterations began with a very basic homepage, with a few recommendations on the top, a search bar, and some reviews. From there I created the subsequent search results page and discover page (which just had lists of titles). I had trouble here with what information i needed to have on each screen and especially spacing sections in a way that made visual sense. On the movie profile, there was a lot of information and actionable items i wanted to show but the design began to feel crowded in comparison. Admittedly, I think I could have spent more time in the sketching stage to iterate on formatting ideas.

Branding/Visual Design

As I continued iterating on my wireframes and began moving into a high fidelity design, I began to think about the visual design and how a website focused on film and media should look. Because I knew that there would be a lot of movie posters with many varying colors, I decided that a dark theme with dark greys would display them best without visual clutter, and then I went about trying to find a brighter color for the palette that would accentuate the design.

I named the site Frame by Frame, as a reference to how film and animation is made, with many singular frames coming together to create the final product. For the logo, I paid homage to the most elementary and basic animation exercise: the bouncing ball. This introductory exercise covers the technical basics of timing, spacing, weight, arcs, squash & stretch, appeal, etc that are essential to understanding animation. Then to finish, I made the ball in the design a film roll to refer back to the industry.

Mid Fidelity Wireframes

Displayed here are the results of iteration into the final wireframes that I used to created my high fidelity prototype. I removed the discover page and added the categories of animated media into the homepage itself. Upon taking another look at my goals for this site and the user stories, I realized that one of the main functions of the site should be discovery and that should be more apparent on the homepage itself along with the reviews. Additionally, I cleaned up my excessive use of containers and opted instead for simple lines to separate sections and information, which helped clean up and optimize my design

High Fidelity Prototype

Finally, I added the UI, logos, images and branding into the design to get it ready for testing and to look like the final product. I added in all the movie posters and inverted the theme to be dark with light text to support my design. I realized as I added it in that adding more pops of color, it made the site more visually confusing with all the colorful movie poster design, so I abandoned that color in favor of varying shades of grey. I then also designed a separate user profile for the user of the site itself that is just a little different from the experience of seeing another account.

Usability Testing

Premise/Tasks Given

The user logs onto the site in order to find a new movie to watch. They have heard "Puss in Boots: The Last Wish" is pretty good but they also want to see what else is an option now.

The user must:

Be able to view the website and all the movie options
Be able to search for the Puss in Boots movie
Navigate to the Puss in Boots movie profile
Be able to see a reviewer's profile
Navigate to the user's own profile

Questions:

is the user able to distinguish the different features on each screen (i.e. what was confusing?)
is the user able to see the difference between their own profile and another users?

Test Results and Issues

Main Issues

A lot of different options to navigate to the movie profile was confusing bu tit is probably because of the framing of this test and prototype since only one movie and one user profile have been fleshed out
the tasks were easy to carry out but there was some screen information that was confusing
search for puss in boots confused.a few users
confusing questions about features
expectations of being able to explore more

Positive feedback:

Visually Appealing with all the movie posters
all the tasks are easily accomplished

Final Product

Incorporating as much feedback as I could and labeling to clarify confusing steps in the process, I finished up my prototype to its final version. While there are a lot of edits I would like to add and make for a further iteration, some were not feasible for the sake of this project; some things I added were

more labels and icons for titles displayed at the top since they are recommendations on the homepage but pinned titles on the user profiles
some more variation in the greys to create more sectioning

See Prototype

Final Thoughts

This was my first time designing a web app so it was definitely a learning experience and very eye opening to how different it is than designing for phones. This was also a very cool project because it tied together my passion and education in animation into a UX Project that channels my favorite part about art and design, which is sharing and analyzing art with others.

Lessons Learned

designing for web is very different, there were a lot less screens to account for but a lot more information on every screen; additionally, it was difficult not to make everything huge in size, which is something that still needs working on
The quick turn around of this project forced me to consolidate a few steps in the design process and really pushed me to experience a crunched timeline process--i could definitely feel where I was able to intuitively use my own design skills to make decisions and also conversely, where it was harder to make some design decisions because of some steps missing (like rushing through sketching made wireframing harder)

Future Iteration Ideas:

adding all the features that users during the testing wanted to click on
- being able to open up to see the detailed watchlists on each profile
- designing the form to leave reviews, add ratings and add to my list
- add filters and sorting filters
I would also expand on the features in my homepage to see more details
i would make everything smaller!!!