Scribd Logo
Upload

Welcome to Scribd!

  • 31 views

    Movie Trailer Website Case Study

    Uploaded by

    Diala Victor
    The document describes the redesign of a movie trailer website. It outlines conducting user research through interviews and persona development to understand pain points. Key pain points identified were inadequate trailer quality, cumbersome navigation, and a lack of an engaging browsing experience. Wireframes, prototypes, and usability studies were used to design and refine the new interface. The goal of the redesign was to create a personalized experience that makes discovering and sharing movie passions easier and more enjoyable.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Movie Trailer Website Case Study

    Uploaded by

    Diala Victor
    31 views29 pages
    The document describes the redesign of a movie trailer website. It outlines conducting user research through interviews and persona development to understand pain points. Key pain points identified were inadequate trailer quality, cumbersome navigation, and a lack of an engaging browsing experience. Wireframes, prototypes, and usability studies were used to design and refine the new interface. The goal of the redesign was to create a personalized experience that makes discovering and sharing movie passions easier and more enjoyable.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes the redesign of a movie trailer website. It outlines conducting user research through interviews and persona development to understand pain points. Key pain points identified were inadequate trailer quality, cumbersome navigation, and a lack of an engaging browsing experience. Wireframes, prototypes, and usability studies were used to design and refine the new interface. The goal of the redesign was to create a personalized experience that makes discovering and sharing movie passions easier and more enjoyable.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    31 views29 pages

    Movie Trailer Website Case Study

    Uploaded by

    Diala Victor
    The document describes the redesign of a movie trailer website. It outlines conducting user research through interviews and persona development to understand pain points. Key pain points identified were inadequate trailer quality, cumbersome navigation, and a lack of an engaging browsing experience. Wireframes, prototypes, and usability studies were used to design and refine the new interface. The goal of the redesign was to create a personalized experience that makes discovering and sharing movie passions easier and more enjoyable.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 29

    Movie Trailer Website Design

    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

    The problem: The goal:


    The current state of our movie trailer app is The primary goal of our Movie Trailer App is to
    plagued by a significant issue related to the revolutionize the way users discover, engage
    lack of effective personalization and discovery with, and share their passion for movies. We
    features. Users are encountering difficulties in aim to create an immersive and personalized
    discovering trailers that align with their unique experience that goes beyond traditional trailer-
    tastes and preferences. watching, fostering a vibrant community of
    movie enthusiasts..
    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

    the user ● Problem statements


    ● User journey maps
    User research: summary

    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

    Inadequate Trailer Quality Cumbersome Navigation Experience

    Most movie trailer app Users encounter Movie trailer websites


    have low quality of difficulties navigating the don’t provide an
    videos. app due to a lack of engaging browsing
    intuitive design and experience.
    unclear organization of
    content.
    Persona: Chibuzo
    "I love the anticipation that comes with a good movie
    trailer. It's like a sneak peek into another world. A
    platform that truly understands my taste and allows me
    to share that excitement with others is what I'm looking
    Problem statement: for."

    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.

    Location: Abuja, Nigeria


    filters because they want online Family: Single One evening in Abuja, Nigeria, Chibuzo, a 29 years old
    software engineer, finds himself winding down after a
    challenging day of coding. As a dedicated movie enthusiast,
    movie streaming to be stress free. Chibuzo is always on the lookout for the latest and most
    captivating movie trailers to add to his watchlist.
    User journey map

    I created a user journey


    map of Chibuzo’s
    experience in which using
    the site to help identify
    possible pain points and
    improvement opportunities.
    ● Sitemap
    Starting ● Paper wireframes

    the design ● Digital wireframes


    ● Low-fidelity prototype
    ● Usability studies
    Sitemap
    Difficulty with website navigation
    was a primary pain point for users,
    so I used that knowledge to create
    a sitemap.

    My goal here was to make


    strategic information architecture
    decisions that would improve
    overall website navigation. The
    structure I chose was designed to
    make things simple and easy for
    everyone.
    Paper wireframes

    Next, I sketched out paper


    wireframes for each screen in my
    app, keeping the user pain points
    about navigation, browsing, and
    checkout flow in mind.

    The home screen paper


    Refined paper wireframe
    wireframe variations to the right
    focus on optimizing the browsing
    experience for users.
    Stars were used to mark the elements of each sketch
    that would be used in the initial digital wireframes.
    Paper wireframe
    screen size variations
    Because Movie Trailer’s customers
    access the site on a variety of different
    devices, I started to work on designs
    for additional screen sizes to make
    sure the site would be fully responsive.
    Digital wireframes
    Moving from paper to digital
    wireframes made it easy to
    understand how the redesign
    could help address user pain
    points and improve the user
    experience.

    Prioritizing useful button


    locations and visual element
    placement on the home page
    Easy access to search movies Homepage is optimized for
    was a key part of my strategy. easy browsing through the
    carousel of images and nav
    Easy access to filter menu options
    Digital wireframe
    screen size variation(s)
    Low-fidelity prototype

    To create a low-fidelity prototype, I


    connected all of the screens involved in
    the primary user flow of adding movies
    to the cart or book now option,
    checking out and and download their
    movie ticket.

    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

    Study type: Location:


    Unmoderated usability study Nigeria, remote

    Participants: Length:
    5 participants 20-30 minutes
    Usability study: findings

    These were the main findings uncovered by the usability study:

    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.

    After usability study


    Before usability study
    Mockups
    To make the single page preview flow easier for users, I added a play button that allowed users to
    play and preview the movie before booking it.

    Before usability study After usability study


    Mockups: Original screen size
    Mockups: Screen size variations

    I included considerations for additional


    screen sizes in my mockups based on my
    earlier wireframes. Because users visit
    websites from a variety of devices, I felt it
    was important to optimize the browsing
    experience for a range of device sizes, such
    as mobile and tablet so users have the
    smoothest experience possible.
    High-fidelity prototype

    My hi-fi prototype followed the same


    user flow as the lo-fi prototype, and
    included the design changes made
    after the usability study.

    View the Movie trailer: https://www.figma.com/proto/AKXj8XhU9KEdnxwYgrdf5l/Movie-Trailer-UI?page-


    id=0%3A1&type=design&node-id=1-26&viewport=-978%2C221%2C0.2&t=8cGCzv05Dm8LW08U-1&scaling=min-zoom&starting-
    point-node-id=1%3A26&mode=design
    Accessibility considerations

    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

    Impact: What I learned:


    Our target users shared that the design is user I learned that even a small design change can
    friendly to navigate through, and more have a huge impact on the user experience.
    engaging with the images, and demonstrated a The most important takeaway for me is to
    clear visual hierarchy. always focus on the real needs of the user
    when coming up with design ideas and
    solutions.
    Next steps

    1 2

    Conduct follow-up Identify any additional


    usability testing on the areas of need and ideate
    new website. on new features.
    Let’s connect!

    Thank you for reviewing my work on the Movie Trailer app!

    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

    You might also like