Movie Trailer Mania

May 2021 - June 2021, August 2021 - September 2021

UX Designer, designing a movie trailer app from concept to working prototype

Conducting interviews, paper to digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs

I conducted 3 interviews to find out how people watch movie trailers, as well as how movie trailers influence what movies they want to see. From the interviews, I discovered user pain points, which are listed below. I researched what competitors did well and what they lacked in their product offerings to best address my users’ pain points through a competitive audit.

From these exercises, I developed personas that represent my user base. Using these personas, I constructed user stories and user journey maps that demonstrate what the targeted user base would want to achieve and how it the app would play a role in that journey. One such User Journey Map is attached below.

• Too Many Choices - Browsing on streaming platforms and sites shows a lot of options, but it can be overwhelming.

• Not in One Place - There are a variety of sites such as Fandango, IMDb, and Rotten Tomatoes - where is the best place to go?

• Forgetting Trailers - You see a movie trailer in a theater before a show, but may not remember the title of the film.

I created paper wireframes on graph paper, basing my designs from the needs of my users that I discovered from interviews, a competitive audit, How Might We, and Crazy 8’s. The images seen here were the five iterations of my home screen, and the bolded version in Sharpie was the best of my ideas combined into my optimized design with the user in mind.

Once I was happy with the design of the app on paper, I created digital versions of my paper wireframes in Figma. This allowed me to clean up the spacing and make the layout look more even, so that I could eventually use them for a low fidelity prototype and user testing research. Despite it being low fidelity, I designed icons for movies, a home button, and profile icon so that the meaning of these symbols would be clear for testing.

Using my wireframes, I connected the screens of the main functions of the app to make a low fidelity prototype. The main flow was a user browsing movie trailers, being able to save favorites, and then purchase tickets for their local theater, with the flow ending at a confirmation window that would take you back to the home page.

When I tested this design with 5 participants in a usability study, I discovered the improvements I would need to make to the app’s structure.

• Back Buttons - There was no button to go back to the list of filtered movies, interrupting the user flow by making users go back to the Home screen to see the same list of filtered movies.

• Icon Confusion - There was confusion as to what the icons in the navigation bar meant. The home icon was clear enough, but the meaning of the movie clapper was not (intended as the My Tickets section).

• My Tickets/Indirect User Path - When asked to locate where “my tickets” were, users used the indirect route from the settings page and not the icon from the bottom navigation bar. This made task completion more difficult.

Building from my lo-fi prototype and wireframes, I created mockups based on the feedback from the usability study by adding text with clarified icons, and back buttons for every relevant page. I also added in color, font, and visual design aspects. I chose a neutral beige for the background, and darker red for an accent color. I checked to make sure the color scheme provided enough contrast to meet WCAG standards. The font I chose was Roboto because it was easy to read, but still visually attractive. I also employed Gestalt principles like common region to group similar categories of movies together.

When I was satisfied with the visual design of my mockups, I connected the screens and made a high fidelity prototype, which I used in another usability study to make more improvements on the design, which mostly involved increasing padding near buttons which looked cramped in the original mockup.