top of page
MotionFlix
Enhancing the movie experience to engage users in
discovering, exploring, and learning about their favorite
films
Motionflix or Mo’Flix is an informational and educational film
platform that helps users expand their current knowledge of film.
Browse and add movies to your customized lists, quiz your film
expertise with trivia, and learn more about your favorite movies.
As part of the Human-Computer Interaction course,
my team and I researched, programmed, and designed
MotionFlix.
MotionFlix
MARCH 2024
University UX/UI
Design Project
Problem
With the proliferation of streaming services, the film industry has become more accessible
but also overwhelming, particularly for newcomers. It can be challenging to navigate the array
of available content, making it difficult to identify where specific movies can be found—who’s
involved in the film, is it family-friendly, and more. This confusion hampers the user’s
engagement and diminishes the enjoyment of discovering and watching films depending on
the users region.
My Role
Lead Product Designer,
Front End Developer
Mar. 2024 - Jun. 2024
Timeline
Joanna, Chloe, Meredith
Team
VS Code, Figma, Balsamiq,
Google Sheets
Tools
Context
Over the course of three months, my team and I developed the core functionality of our
platform using HTML, CSS, and JavaScript. While we were able to create a mainly functioning
product, time constraints prevented us from fully realizing the UI aspects. Thus, halfway
through the phases, we switched from a mobile to a desktop prototype. To address this, I spent
the summer refining the design in Figma. This case study will focus on our first demo,
with additional high-fidelity wireframes included to present a complete picture
of the platform’s potential.
Solutions
The platform features a simple, intuitive design that minimizes the learning curve, making it
accessible to a wide audience. Our application encourages users to stay engaged through
interactive elements such as the trivia section as a form of applying their newfound film
knowledge or creating personalized lists to keep track of the films they’ve watched.
OVERVIEW
Our Approach
My Contribution
During the research phase, each team member conducted one-on-one interviews with potential target users. I also contributed by
creating user personas in Figma. From there, we collaborated to establish user requirements and individually researched our
competitive platforms.
After creating our individual sketches of the wireframes, we began forming the final low-fidelity wireframe. I then designed and
coded the movie list page and movie profile page using VSCode.
During the last phase, I created the script for the usability testing sessions and was in charge of recording and analyzing
the data we collected throughout the interviews. Later on, I addressed the problems and recommendations from the
interviewees by creating high fidelity wire frames after the project ended.
RESEARCH
Using various research methodologies, including interviews and surveys, our team aimed to better
understand users' first-time experiences with our film-based platform.
Target Potential Users
During the beginning of research, extensive time was spent on discovering users more likely to be engaged in using our proposed
technology. In identifying target users, we broke the users into three sections including individuals who aren’t interested in film,
film novices, and film buffs. We also parsed through film critic reviews and community-based discussion forums on film. These
websites contained a spectrum of information regarding user preferences and experience that aided us in developing usability
requirements.
User Interviews
Our chosen method of data collection consisted of one-on-one interviews. Each of us conducted two interviews, accumulating in
six total from which we could analyze users’ needs. We sought out interviewees whose personalities corresponded with our
targeted user personas: someone uninterested in film, someone interested in learning more about film, and someone who considers
themselves an experienced film buff. Interviewees were asked about their specific film preferences, their experiences using film-
related technology such as streaming services, and their ideas of what would make an educational app most effective. After we
conducted our interviews, we discussed our results with each other and created a generalized set of usability requirements.
Our usability requirements are based on gathered information from our data analysis. In listing our requirements, we created a
hierarchical categorization of “must have”, “could have”, and “should have”.
Requirements
Based on the observations and interviews done beforehand, the users’ needs, goals, and requirements needed for our technology
will be organized in our creation of user personas. The user personas we created will help cater MotionFlix’s general audience and
tackle weaknesses needed to be addressed from our requirements.
Personas
We started by examining three distinct services—film databases, trivia platforms, and educational resources—to understand how
they function independently and identify opportunities to integrate them into a unified platform for our prototype.
Competitive Assessments
Duolingo: Engagement and Retention, but Concerns about Learning Depth
-
Duolingo is praised for its gamified approach to language learning, using features like experience points, streaks, and
customizable avatars to motivate users.
-
The app's bite-sized lessons and humorous content are also highlighted as factors contributing to user engagement.
-
However, the sources also point out potential drawbacks in Duolingo's approach. The repetitive nature of the lessons and the
focus on memorization over deep understanding are identified as potential limitations.
-
Additionally, concerns are raised about the accuracy of translations and the limited feedback provided to users on their
mistakes.
Letterboxd: Effective Information Display and Social Interaction, but Overly Complex?
-
Commended for its sleek design, efficient functionality, and strong social media integration
-
App's visual presentation of film information, including user ratings, is highlighted as a strength
-
Sources criticize Letterboxd for aspects of its organization and learnability. The "Incoming" tab in the activity interface is singled
out as confusing due to its unclear purpose
-
Extensive range of features, while potentially contributing to interactivity, is also seen as potentially overwhelming for new users
Trivia Crack: Entertainment Value, but Limited Educational Impact and Cluttered Design
-
Success in combining trivia with social elements, offering a fun and engaging way to test knowledge
-
Competitive aspect of the app is seen as potentially undermining its educational value, as users may prioritize winning over
learning
-
The inclusion of both gameplay and social media features is also criticized for creating a cluttered user experience and
contributing to lag
Before building my sketches in Balsamiq or drafting rough concepts on my iPad, I focused on addressing the requirements outlined
in phase 1 that I intended to incorporate into my low-fidelity prototypes. These included a simple structure and design, strong
learnability, user interactivity, and more. I began by creating the key pages where users would spend the most time, such as the
home, search, game, and library pages. After that, I worked on specific features like a walkthrough of the trivia section and an
example of a film's information page
Sketching
DESIGN
We gathered the requirements and needs of our target audience for learning about film to
incorporate them into our design and create our low-fidelity prototype. Designing our own
individual concepts was the first step in generating ideas for the final low-fidelity prototype.
Our team initially decided to focus on creating a mobile prototype for the platform. However, due to time constraints and limited
knowledge of mobile development, we shifted our focus to developing the desktop version as the final product. This is why the early
sketches and prototypes are mobile-focused, while the completed platform is designed for desktop use.
Cognitive Lo-Fi Walkthrough & User Feedback
To evaluate our prototype, we created the following task scenario for our users:
-
Search for a movie to learn more about it’s background and who was involved
-
Add a movie to your watchlist
-
Search for a movie sorted as an action film with the rating going from decreasing to increasing
-
Complete a trivia you’re interested in playing
Each task consists of questions where users are asked about their cognitive thinking process for each step they take. All of our
interviews had the same format of seeking permission to record, giving users their tasks, and follow-up questions. The interviewees
had a broad range of interests when it came to film such as being film apathetic, novices, or buffs to gauge the level of interactivity
with the app.
Findings:
-
Effective Filtering and Sorting: The film buff, in particular, praised the use of filters in the browsing section, finding them
effective for narrowing down movie choices. This suggests that the chosen filtering options (genre and IMDb rating) are relevant
and useful for the target audience.
-
Engaging Trivia Feature: Users across the personas found the trivia section to be an enjoyable addition to the app. This indicates
that the trivia feature has the potential to be a key driver of user engagement and can contribute to the app's educational goals
-
Importance of Button Placement: The film novice's difficulty in locating the "watchlist" button on the movie profile page
underscores the importance of carefully considering button placement for key actions.
Information Architecture
In our coding, we primarily used html, CSS, Bootstrap, and JavaScript. However, it is important to note that we switched from
creating an app to developing a website. This decision primarily came from our use of Bootstrap, as Bootstrap is intended to create
flexibility between different interfaces. Given this flexibility, we believed that solely focusing on a phone mock-up would create
unnecessary difficulties when it came to our final design. Despite this change, we still used our low-fidelity prototype as an
incredibly significant source of inspiration
Interactive Prototype
User Flow
Home Page
The first action is scrolling through the Home page. It’s made of two card carousels showcasing featured and watchlist movie lists
for users to scroll through. The second action is by clicking a card; it takes users to the card’s respective movie profile.
Movie Profile Page
The first action on the movie profile is interaction with the pause and play button. The second action is scrolling down towards
the information. The third is interaction with the collapsible accordion if the user is interested in learning more about the film.
All of which gives users a personalized experience when learning about a film.
When the user navigates to the browsing page, they are first
met with options to search for a specific film or filter the
displayed list of movies. The search bar is multifunctional; it
filters the list of movies every time the user types a key on
the keyboard
Browsing Page
Users can choose the way they would like the list of movies
displayed in terms of IMDb ratings - “Lowest to Highest” or
“Highest to Lowest. If “Lowest to Highest'' is chosen, the list
of movies will be sorted in ascending order based on IMDb
rating. Without a search bar or genre filter enabled, the user
can scroll down and see the full displayed list of movies.
Trivia Page
Upon first going to the trivia page, the user is greeted with a
list of options they can choose from. They can opt for an easy,
medium, or hard level of general movie trivia, or they can click
on a specific genre. If they do the latter, they will be able to
choose an easy, medium, or hard level of trivia corresponding
with that specific chosen genre.
As of now, the trivia has four questions, each of which is
displayed in a sequence. The user chooses an answer to the
question, clicks the “Next Question” button (which changes color
when the user hovers over it as well), and then gets another
question to answer. They keep doing this until the quiz is over,
at which point a congratulatory screen with the user’s final point
value is displayed.
My Library Page
The library page consists of a three-step route starting with
the main page titled My Library. The main page includes three
lists: watched movies, liked movies, and my watchlist. Users
can scroll through each list and view the films they’ve included
for each section.
Next, users can click the right arrow button to symbolize viewing
the rest of their category. Lastly, they can click on a film they seek
to learn more about. For example, in the third step displayed above,
the user is brought to the movie profile for Moana, directed by
Ron Clements.
EVALUATE
After creating our horizontal and vertical prototype for MotionFlix, we sought to test our design with a variety of users. Then, each
member of our team interviewed one user with the goal of attaining helpful data about how we could continue to make
improvements. Users were asked to complete specific tasks which we had implemented in our prototype in the design phase
Usability Test
Tasks:
-
Search for a movie to learn more about
-
Find a movie you like and add the movie to your watchlist
-
Search for a movie sorted as an action film with the rating going from increasing to decreasing
-
Complete one round of trivia
Additionally, participants were encouraged to verbalize their thoughts and provide any feedback - positive or negative - about the
prototype’s design throughout the course of the session. Finally, after the tasks had been completed, participants were asked to
fill out the NASA Task Load Index and the post-test satisfaction form. These documents helped convey the participants’ thoughts
about the prototype as a whole.
Feedback:
-
Home page:
-
Featured movie carousel images could be smaller so that it did not take up half
of the page
-
Movie Profile page:
-
Play button and title of the movie be an overlay for the trailer
-
More info drop down being misleading - confused on its function
-
More cleaner interface
-
Trivia page:
-
Lack of feedback as to what questions a user got right or wrong
-
“Easy”, “Medium”, and “Hard” levels of the general trivia section can be quite
subjective
-
Browsing page:
-
Search bar be a bit larger and clearer to see
-
Sort buttons being spread out led to confusion
-
My Library page:
-
Prefer location of the watchlist being at the top
-
Headers of each carousel looking basic
NASA-TLX Score
*Note: The lower the score number for the performance category, the more perfect the score.
SUS - the System Usability Scale Score
A larger sample size is needed to get a more accurate estimation of the system's usability, but a SUS score of 83.3 assures us that
our system is considered usable by most of our audience.
Design Iterations
Note: This is only a prototype of what the final design would entail. The main UI screens can be found below.
Based on the results gathered from the cognitive walkthrough and usability testing sessions, I created the final design of our
website using Figma. The design changes I made are illustrated below.
Home Page
For the home page, I decided to expand and fill the featured carousel for the whole screen; the original is very large and users
might overlook the watchlist carousel underneath, which is designed for personal convenience. In addition, the final design
includes a section to create an account and new films of the week instead of a watchlist.
Browsing Page
Regarding the browsing page, I aimed to make the filtering section more visually clear. The search bar is larger and easier to see
and there are more options to filter the movies such as by year, popularity, and more. Instead of having the posters include the
year and genre, now they only include the poster to give it a more cleaner and simplistic look for users.
Trivia Page
For the trivia page, I kept the same components such as general movie trivia and genre trivia, but changed the UI aspect.
In the future, we could disregard the levels of trivia altogether and just keep the genre categories -
in other words, users could do trivia games based on specific genres, but there wouldn’t be “Easy”, “Medium”, or “Hard” options
for these categories anymore.
My Library Page
For the library page, we suggest that the watchlist carousel be moved closer to the top of the screen. Rather than being placed
below the “Seen” and “Liked” carousels, it could be placed at the top so it is more visible upon first visiting this page.
In addition, allowing users to edit their lists by either adding or deleting a list gives users autonomy over their list decisions
Movie Profile Page
For the movie profile page, our initial ambitious idea of having a caption and pause button over the movie trailer has proved to
be a hindrance rather than a benefit. With the way we implemented our prototype, users now have to scroll and search for said
pause button. In addition, users felt the format was a visual eyesore. Thus, to fix the problems mentioned by our participants, I
implemented a lot of changes in the final decision - a complete rework. The majority of the data included is still in the prototype
but there are additional components such as user reviews and general information on the right side of the screen.
Reflections & Takeaways
As students with limited time and skills, we rate MotionFlix’s overall quality at 6
out of 10. Aesthetically, some components could be rearranged. Additionally,
some more educational and interactive features (which we did not have time to
implement in our process) could be added. However, though our prototype may
require some improvements, we believe that it proficiently fulfills the usability
requirements we established in the research phase. We also believe that, for the
most part, it fulfills its purpose of being an informative and educational app about
film.
One of our biggest challenges was switching from a mobile to a desktop prototype
during the final stages of our wireframe. Better planning around the intended
interface would save time and help us manage technical limitations. For future
projects, deciding on the platform early would allow more focus on other design
aspects. While the prototype’s design wasn’t heavily critiqued, it can still be improved.
Some pages such as the home and movie profile page felt visually noisy and not
aesthetically pleasing from a user’s perspective. A well-aligned and aesthetically
pleasing interface enhances credibility and usability. In the future, principles like the
golden ratio and rule of thirds should be prioritized, although this time we focused
more on ensuring the code functioned smoothly.
Our limited understanding of HTML, CSS, and JS constrained us from fully
exploring our ambitious design. Creating template pages and connecting them to
our JavaScript database slowed progress, preventing us from implementing
features like the timer and progress bar in the trivia section. While tackling
interactive elements was challenging, we still achieved many user requirements we
initially doubted we could complete.
Our process had several strengths. We effectively divided tasks,
communicated well, and stayed focused on our goals for MotionFlix from
start to finish. We were good at organizing and prioritizing, especially in the
coding phase, where we tackled programming challenges by staying flexible
and working around obstacles. During the prototype phase, we welcomed all
ideas while balancing practicality and creativity. Whenever code changes
were made, we kept each other informed to adapt together.
Going live seems distant for us. Expanding our knowledge of data storage would
improve our database efficiency, and refining our coding skills will enhance our
current code. Additionally, improving our CSS and design skills would help us create
a more modern, eye-catching website. With a deeper understanding of design
principles, we could make our design more competitive with current technologies.
User feedback for each phase went a long way in making sure the prototype was
on track with user expectations. Programmers and designers could be biased or
unaware of what could be wrong with their mockups, so it was essential to include
user feedback whenever it was deemed necessary. Our interviewees and participants
played a huge role in finding the prototypes’ weak and strong points that we were
unaware of. Their feedback was our guide in knowing our users’ ability to navigate
our website prototype. So naturally, we want to improve on what we lacked to
better the product for them.
Overall, this was an amazing learning experience for each of us and we were proud
to be a part of making MotionFlix. It was not only rewarding to see the final
product but also to see how much we’ve learned on the way. Maybe in the far
future, it’ll be a strong contribution to the world of film just as we had planned.
The Style Tile
bottom of page