CineFlix
A native web app for
for all movie buffs!
UI/UX Case Study
PG-13
Iron Man
2 Hr 6 Min
Available on
A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.), is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating...
Home
Explore
Profile
Search
Iron Man
9:41
Problem
Small market of movie apps that offer sufficient information about movies and full details on other related information such as timelines in each particular universe
Solution
Ciniflix is the one stop native app that allows users an easy way to find information about any of their favorite movies or movies they have never seen before!
Find out details on movies series to understand the time gone between each sequel
Find what movies to stream in what service
Personalize your account to show you titles based on the streaming services you use!
Find your next watch, the CineFlix way!
Competitor Analysis
To create Cineflix, I began by conducting a competitor analysis on two different rival apps. This allowed me to understand what each app offered and what they lacked in terms of features. By doing this, I was able to identify key concepts that would make a user-friendly movie app.
IMBD
Strengths
Large database of information
Layout is nice with visual hierarchy
Good use of categories
Weaknesses
Seems cluttered to where
Subcategories are harder to find
Subcategories don’t have much variety
No in depth info about connections to movies
IE: Marvel timeline
Information is great but so much is being thrown
at you at once
Not as personal for movie lovers
Movie Box
Strengths
Layout is clean
Has a calendar to keep track of new episodes
Bio on movie and related information
Weaknesses
No review system
Pictures on movie page header is blurry
No profile page, just a list page
No way of personalizing your types of movies
Same color and layout as IMDB
User Research
To understand the problem further, a series of questions were conducted to understand what exactly users are looking for when accessing a movie app.
What platforms do you use to watch movies?
users primarily rely on streaming services like Netflix and Disney+, though cinemas remain popular for major releases.
Solution Implement a feature allowing users to discover movies available on based on the streaming services used.
What types of information do you find most valuable when looking up a movie?
Response varied however, cast details, release year and and plot summaries were the mentioned most
Highlight plot summaries and cast details for additional information
Do you follow specific movie franchises? If so, which ones?
Majority stated they follow franchises such as Marvel and Harry Potter
It was clear that movie franchises are popular; implementing feature focusing on movie franchises would be key. Cinematic Universes such as Marvel and DC
How vital are an app design and user interface to you? Would you prefer a simple design or a more complex, feature-rich interface?
Users generally preferred a simpler interface, as easy navigation and a clean layout are needed—less clutter.
Keep interface clean and simple not to overwhelm user
Would you find it useful to have a section dedicated to Cinematic Universes? If so, what content should it include?
When it comes to cinematic universes, users expressed a desire for dedicated sections that offer timelines, and connections between movies
Make sure to focus on francises/universes to provide enough detail
Have you used similar movie apps before? If so, what did you like or dislike about them?
The response was towards more popular apps like IMDB and Rotten Tomatoes, stating they like the detailed information however there can be an issue of heavy clutter
Implement a feature allowing users to discover movies available on based on the streaming services used and decades.
User Personas
Daniel Thomas
Bio
Richard is a Jr Software Engineer who has taken a love for cinema. Recently, Richard likes to spent most of his time exploring and cinematic universes such as Marvel and Transformers. He loves to learn the details of each movie and how the actors and characters tie into other movies in the universe! Richard is excited to find new ways to increase his movie experience.
Age: 25
Status: Single
Job Title: Jr Software Engineer
Character: Adventurous
Device: IPhone 13
Goals
Find new Cinematic Universes to explore
Learn new details about how each movie to understand the timelines
Save titles to go back to at a later date
Frustrations
Cant find a app that gives the user ability to find all different cinematic universes in one place
Wants to be able to look up relevant information about the movie he is watching
Does not like pop up ads
Annie Darling
Bio
Annie is a retired nurse who spends her time painting and reading. Annie and her husband, Burt, love spending their evenings watching old movies together. Annie loves the idea of findings movies from different decades she has never heard before. Annie is hoping to use an app with simple layout and style.
Age: 67
Status: Married
Job Title: Retired Nurse
Character: Empathetic
Device: Galaxy 8
Goals
Find movies by year of release
Find new movies
Easy to use navigation
Frustrations
Hard to find new movies
Clutter; lack of white space
Does not like pop up ads either
User Flow
The user flow was designed to show how the user would navigate the app to find the best of what CineFlix has to offer such as finding the Best of the 90’s or their favorite Cinematic Universe.
From start to finish the user will have the ability to sign up, personalize their account, explore and find the next movie of their choice!
Low Fidelity Wireframes
9:41
Log in with Google
Log in with Apple
Sign up
Log in with Emal
9:41
Emaiil
Password
Submit
Sign uo with Google
Sign up with Apple
9:41
Continue
Tell us what you like!
Adventure
Action
Horror
Romance
Thriller
Mystery
Documentary
Sci-Fi
Crime
True Story
Heroes
& Villians
Sports
Television
War
Political
Music
Reality
Cartoon
Anime
Disney
In Theaters
Coming Soon
Food TV
Rom Com
Gives us an idea of some your
favorite type of content!
9:41
Home
Explore
Profile
Search
In Theaters
Your Watchlist
Recommeded
Popular on Streaming
9:41
Home
Explore
Profile
Search
Horror
Drama
Genres
Comedy
Rom Com
Action/ Adventure
Thriller
90s
Decades
80s
70s
2000s
60s
2010’s
Movies
TV
Streaming Platforms
Cinematic Universes
Explore
9:41
Action
Action
Action
Action
Action
Most Popular Actors
90’s Indie
Highest Grossed Earning
90’s Disney
90’s Shows
Home
Explore
Profile
Search
GENRES
BEST OF 90’S
90s
Other Categories
9:41
Home
Explore
Profile
Search
Rockyt
DC
Cinematic Universe
Jurassic Park
MCU
Game
of
Thrones
Transformers
The Fast
Saga
The
Lord
of the
Rings
Monsterverse
SCREAM
HALLOWEEN
Harry Potter
Star Wars
Star Trek
9:41
Home
Explore
Profile
Search
Movie 2
Movie 3
Movie 4
Movie 5
Movie 1
Image
MCU
9:41
Movies you may also enjoy
Movie info
Movie info
Movie info
Home
Explore
Profile
Search
Movie info
Movie Poster Image
Info here wll consist of a bio followed by
length, rate and review rating
A list of actors/actresses will be presented
Also with other movie suggestions based
on genre
If in cinematic universe, will have info with related
information on other movies in the same world
such as DC movies or Transformers movies etc
Whhere to stream/ In theaters
Usuability Testing
Users were presented with different scenarios to complete tasks and evaluate usability. They were encouraged to provide feedback on their journey.
Scenario : Exploring Interest in Cinematic Universe Sections
Ask users to explore and find the section and share what content they find most interesting.
Gather suggestions for additional content that could improve their experience.
Scenerio: Identifying Valuable Movie Information
Ask users to locate for Iron Man movie and identify which information is most important to them when viewing the movie info.
Monitor how easily users find the information they need. Note any confusion or difficulty in navigating or interpreting the information.
Outcome: Users liked the flow but decribed lack of info on the movie page. Added photos and names of the cast to the page. Users also stated they hoped to see more information on the movie before going further. Added brief description.
User Feedback
“Super cool concept of the app. I love the way you used lots of great images to create a visually engaging experience that really
brings the content to life!”
HJN
“The layout of the homepage and explore page work really well! The movie images stand out and I think the minimal blue is an effect use of color.”
OOE
“This pull-up container is good design - saves space on the main screen but lets user view more interesting info about the movie if they're curious”
AD
BEFORE
9:41
What Streaming Services do you use?
We will personalize your home
page depending on what you use!
Continue
“Consider making the selected button more visibly highlighted, perhaps with an outline, as this can significantly improve user clarity and interaction.”
- HJN
AFTER
9:41
What Streaming Services do you use?
We will personalize your home
page depending on what you use!
Continue
-Selected buttons are now more
visible with strokes added to the boarder
BEFORE
Gwyneth Paltrow
Terrence Howard
Cast
Robert Downey Jr
PG-13
Available on
Iron Man
2 Hr 6 Min
A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.), is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating weapon. Instead, he builds an armored suit and upends his captors. Returning to America, Stark refines the suit and uses it to combat crime and terrorism.
Genre: Action, Adventure, Sci-fi, Fantasy
Director: Jon Favreau
Release Date (Theaters): May 2, 2008
Box Office (Gross USA): $318.3M
In the Timeline
The first Marvel movie released is third in chronological order, and believe it or not—according to Marvel’s own timeline—it actually takes place in the year 2010 and not 2008 when it was released.
Home
Explore
Profile
Search
Iron Man
9:41
“The description text is a little hard for me to read unless I zoom in”
-AD
AFTER
Gwyneth Paltrow
Terrence Howard
Cast
Robert Downey Jr
PG-13
Available on
Iron Man
2 Hr 6 Min
A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.), is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating weapon. Instead, he builds an armored suit and upends his captors. Returning to America, Stark refines the suit and uses it to combat crime and terrorism.
Genre: Action, Adventure, Sci-fi, Fantasy
Director: Jon Favreau
Release Date (Theaters): May 2, 2008
Box Office (Gross USA): $318.3M
In the Timeline
The first Marvel movie released is third in chronological order, and believe it or not—according to Marvel’s own timeline—it actually takes place in the year 2010 and not 2008 when it was released.
Home
Explore
Profile
Search
Iron Man
9:41
-Changed the style from Medium to Bold
to increase bio visually
Style Guide
Info Gathering/Button Text
SF Pro Regular 20 p
Header 1
SF Pro Display Regular 17 p
Body Text 1
SF Pro Bold 14 p
Body Text 2
SF Pro Regular 13 p
Body Text 3
SF Pro Medium 11 p
Body Text 4
SF Pro Regular 10 p
Submit
Movies
TV
Available on
See More
#2E2C2E
#413E41
#D9A036
#D9D9D9
Welcome to the Universe
One of the key features with Cinefix is the ability to discover all different movie series universes! The app will allow users to explore new series’s, find key information about the timeline settings, and have the ability to watch in order of preference!
Home
Explore
Profile
Search
Cinematic Universe
9:41
PG-13
Iron Man
2 Hr 6 Min
Available on
A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.), is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating...
Home
Explore
Profile
Search
Iron Man
9:41
