MotionFlix
Role
Lead Product Designer, Front End Developer
Duration
Mar. 2024 - May. 2024
Tools
VS Code, Figma, Balsamiq
Team
MotionFlix 3 Person Design Team
component #1
1440 x 1024
1
5
MO’FLIX
Home
Browsing
Trivia
My Library
Login
Sign up
MO’FLIX
Home
Browsing
Trivia
My Library
Login
Sign up
User
CHALLENGERS
By Luca Guadagnino
2024
132 mins
Featured Movies of the week
See More
+ Watchlist
component #2
1440 x 1024
MO’FLIX
Home
Browsing
Trivia
My Library
Login
Sign up
Spirited Away
Family
Fantasy
Animation
Directed by Hayao Miyazaki
Studio: Studio Ghibli
User
2001
PG
2h 5m
A young girl, Chihiro, becomes trapped in a strange new world of spirits. When her parents undergo a mysterious transformation, she must call upon the courage she never knew she had to free her family.
Add to Watchlist
Watch Trailer
Cast
Rumi Hiiragi, Miyu Irino, Mari Natsuki, Takashi Naito, ...
Crew
Hayao Miyazaki, Toshio Suzuki, ...
Rate
9.3/10 (83K)
User Reviews
See all 1.4K
Review
10/10
Truly One Of The Best Animations Made In History. Period point blank!!
username
27 Aug 2024
I imagine that there’s not much that hasn’t been said about this film since its release 23 years ago. However, as a young adult in an age still rife of cultural dissonance and sporadic, economic disparity, I found that the longer Chihiro navigated this world of myth, magic, and (over)consumption, the more Chihiro’s journey even now mirrors our own.
210
Helpful
10/10
My Stress Reliever As I’m Job Hunting Right Now
username
24 Aug 2024
Rewatch it all the time when I’m feeling stressed out (which I am lol). I’m biased since it’s my childhood movie.
210
Helpful
210
component #3
1440 x 1024
MO’FLIX
Home
Browsing
Trivia
My Library
Login
Sign up
MO’FLIX
Home
Browsing
Trivia
My Library
Login
Sign up
User
Quiz your Movie Knowledge
Test your film knowledge by taking one of the many available trivia games on Mo’Flix.
General Movie Trivia
Easy
Medium
Hard
Discover by Category
Adventure
Action
Comedy
Documentary
Drama
Family
Fantasy
History
Horror
Crime
Musical
Mystery
Romance
Sci-Fi
Thriller
Western
War
European
Animation
Spanish
MotionFlix
MARCH 2024
University UX/UI Design Project
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.
Overview
My Role
Lead Product Designer, Front End Developer
Timeline
Mar. 2024 - May. 2024
Team
MotionFlix 3 Person Design Team
Tools
VS Code, Figma, Balsamiq
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 along 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 wire frames included to present a complete picture of the platform’s potential.
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.
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.
Solution
Our Approach
My Contribution
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.
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.
01
Research
Target Potential Users
User Interviews
Establish Requirements
Personas
Competitive Assessments
02
Design
Sketching/Lo-fi Prototypes
Cognitive Walkthrough
User Feedback
Information Architecture
Interactive Prototype
03
Evaluate
Usability Test
NASA-TLX/SUS Score
Design Iterations
Takeaways
After creating sketches of the prototype, I began forming the final app version of the low-fidelity prototype. I then designed and coded the movie list page and movie profile page using VSCode.
By placing the most sought-after information upfront, users can immediately connect with the content that matters most, while the overall design remains clean and approachable, allowing for a seamless browsing experience without unnecessary clutter.
Easy Walkthrough
The layout guides you to specific information without overwhelming you
offering a mix of both timeless classics and the latest releases, the browsing page remains fresh and diverse, catering to a wide range of tastes and interests. Whether you're in the mood for an old favorite or eager to explore something new, there's always something worth discovering.
Stay Up-to-Date
Jump into exploring new movies added every week
New films of the week
Check out this week’s new movies and
find out more about the cast, crew, and more
Using various research methodologies, including interviews and surveys, our team aimed to better understand users' first-time experiences with our film-based platform.
RESEARCH
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.
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”.
Personas
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.
Competitive Assessments
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.
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
Inclusion of both gameplay and social media features is also criticized for creating a cluttered user experience and contributing to lag
INTERVIEW TRANSCRIPT
“There’s always that one film that wins awards and they only provide those. I wish they can provide the films that are being left out.”
Interviewee # 3
“When I’m on a website, simplicity is important to me because I feel like if there’s a lot of things [information], it’s gonna be too much for me and I’d rather click away.”
Interviewee # 1
“It would be fun for me to compete and play movie trivia with my friends whenever we are bored of studying. It’s a combination of two things that I like.”
Interviewee # 4
MotionFlix MUST
MotionFlix SHOULD
MotionFlix COULD
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.
DESIGN
Sketching
Before I began building my sketches on Balsamiq or drawing rough drafts on my iPad, I wanted to address the requirements mentioned in phase 1 that I planned to implement in my lo-fi prototypes. This included a simplistic structure and design, strong sense of learnability, user interactivity, and so forth. I decided to begin creating the main pages that users would spend more time on such as the home, search, game, and library page. Then, I started working on specific pages such as a walkthrough of the trivia section and an example of a film’s information page.
our team initially decided to focus on creating a mobile prototype for the platform. However, due to time constraints and limited knowledge in 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
Home
Home
Search Bar
Liked Movies
Genre Filter
Movie List
Watched
Movies
Home
My Watchlist
Trivia
Home
My Library
Trivia
Browsing
Edit List
Movie
Carousel
General
Movie Trivia
Trivia
Round
Genre
Trivia
Watchlist
Carousel
Browsing
Trivia
My Library
Browsing
Trivia
My Library
Tap movie poster
Movie profile page
Easy
Medium
Hard
Multiple Choice Questions
Score Display
Main trivia page
Scroll carousel
Select movie
Movie profile page
Browsing
Home
My Library
movie profile page
movie profile page
movie profile page
Easy
Medium
Hard
Movie profile page
Interactive Prototype
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
Link to Prototype: Click Here!
User Flow
Home/Movie Profile
Home
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
The first action on the movie profile is interaction with the pause and play button. The second action is scrolling down towards the information. And 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.
Browsing Page
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
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.
Triva 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.
In addition, users can pause the trailer as this can be a preference that varies per person. Some of the elements contained in the overview section are the poster, director, runtime, IMDb rating, genres, description, and ability to add the movie to the library page. Each feature plays a vital role in providing a thorough run-down of the films since learning about movies can be time-consuming.
Background information is added, such as the movies' cast and random fun facts. The information is shown in an accordion style where users click on the options given and a dropdown unfolds with information regarding their option.
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.
create a new list
delete a list
MY ORIGINAL LO-FI MOBILE SKETCH IDEA
POST PROJECT LO-FI DESKTOP SKETCH IDEA
GROUP MOBILE LO-FI PROTOTYPE
Evaluate
Usability Test
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
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 cleaner interface
More info drop down being misleading - confused on its function
Browsing page:
Search bar be a bit larger and clearer to see
Sort buttons being spread out led to confusion
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
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
Original Design
Final Design
Browsing Page
Final Design
Trivia Page
Original Design
Final Design
My Library Page
Original Design
Final Design
Final Design
Movie Profile Page
Original Design
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.
Regarding the browsing page, I aimed to make the filtering section a bit 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.
Original Design
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 or do a trivia game based on all of the genres, but there wouldn’t be “Easy”, “Medium”, or “Hard” options for these categories anymore.
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 on top of them 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 lists decisions
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. Majority of the data included is still in the prototype but there’s additional components such as including user reviews and general information to the right side of the screen.
Takeaways
One major challenge was switching from a mobile to a desktop prototype late in the process, which highlighted the need to decide the platform earlier to save time and manage technical constraints. While the design wasn’t heavily critiqued, some pages felt visually cluttered; future iterations should better prioritize layout and visual principles alongside functionality. Limited experience with HTML, CSS, and JavaScript also restricted our ability to implement more advanced features, but despite these challenges, we successfully met many user requirements we initially thought were out of reach.
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 still feels far off, as we need to strengthen our knowledge of data storage, coding, and CSS to build a more efficient, modern, and competitive product. User feedback was essential throughout each phase, helping us identify strengths and weaknesses we would have otherwise missed and ensuring the prototype aligned with user expectations. Overall, the project was a valuable learning experience, and we’re proud of both the final product and the growth we achieved while building MotionFlix.
01
⚙️ Overall Quality of the Design
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.
02
🌪 Designing Under Deadline
03
🙌 Areas That Worked Well
04
🤔 Going Live?
Colors
New Design
Old Design
Primary Black
#151610
Muted Silver
#C3C3C3
Gunmetal
#2A2E38
Moonstone Blue
#78A6B8
Honey Flower
#512D6C
Bright Ube
#CCA6E9
Pale Purple
#B48ECF
White
#FFFFFF
Sprout
#BCD6AC
Phthalo Green
#123121
Forest Green
#3E6837
Typography
Inter
lato extrabold
Orbitron Black 75
Inter Medium
Lato Regular
Lato Semibold
Buttons + Icons
See More
+ Watchlist
Login
Sign up
User
SORT BY
Genre
Year
Popular
Rating
Age rating
Drama
+ New List
Delete
Rate
9.3/10 (83K)
Family
Fantasy
Animation
Add to Watchlist
Watch Trailer
See all 1.4K
Review
MO’FLIX