Movie Trailer Website Case Study
Movie Trailer Website Case Study
Movie Trailer Website Case Study
Victor Diala
Project overview
The product:
The Movie Trailer App is poised to elevate the movie-
going experience for our audience, combining
innovation, user-centric design, and seamless
integration with theater services to create a
comprehensive and enjoyable platform for all movie
enthusiasts.
Project duration:
3 Weeks
Project overview
My role: Responsibilities:
UX researcher, UX/UI designer of the Movie Conducting interviews, paper and digital
Trailer website design. wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, iterating on designs and
responsive design.
● User research
Understanding ● Personas
I conducted user interviews, which I then turned into empathy maps to better understand the target
user and their needs. I discovered that many target users love movies and relaxing activity when they
need a break from school or work. However, many movie trailer websites are overwhelming and
confusing to navigate, which frustrated many target users. This caused a normally enjoyable
experience to become challenging for them, defeating the purpose of having fun and relaxation.
User research: pain points
1 2 3
Goals Frustrations
Chibuzo is a busy working class
❖ Want a platform that ❖ Frustrated with
provides personalized
Chibuzo
person who needs intuitive
platforms that do not
recommendations understand his unique
based on his eclectic taste, leading to a less
Age: 29 taste. engaging discovery
website navigation and search Education:
Occupation:
Bsc. in Computer Science
Software Engineer
experience.
View https://www.figma.com/proto/AKXj8XhU9KEdnxwYgrdf5l/Movie-Trailer-
UI?page-id=1%3A3&type=design&node-id=1-30&viewport=-609%2C-
709%2C0.11&t=OD2RdQiO8bsYghod-1&scaling=min-zoom&starting-point-
node-id=1%3A30&mode=design
Usability study: parameters
Participants: Length:
5 participants 20-30 minutes
Usability study: findings
1 2 3
Successful Page Cart Single Page
There were no successful There were no button for There were no preview
illustration image clearing of the cart if the button to play the movie
need arrises to be sure of the movie.
Refining ● Mockups
● High-fidelity prototype
the design ● Accessibility
Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout
successful page. One of the changes I made was adding the successful illustration image. This
makes users to feel good.
1 2 3
I used headings with I used clear, legible fonts I maintain sufficient color
different sized text for and ensure proper contrast between text
clear visual hierarchy. spacing to enhance and background to assist
readability for users with users with visual
visual impairments or impairments. I avoid
cognitive disabilities. relying solely on color to
convey information.
Takeaways
Going forward
●
● Next steps
Takeaways
1 2
If you’d like to see more, or would like to get in touch, my contact information is provided below:
Email: [email protected]
Website: www.behance.net/victor_66