Movie Trailer App
A Google UX Design Case Study
Project Overview
Problem
The current movie browsing and ticket purchasing experience for users lacks a cohesive and user-friendly solution. Users often have to visit multiple websites to find movie trailers and purchase tickets, leading to a cumbersome and time-consuming process.
Goal
Design a mobile application that provides users with a seamless experience for browsing movie trailers and purchasing tickets, consolidating the process into a single, user-friendly platform.
Role
UI Designer, UX Designer, UX Researcher, UX Writer, and Product Designer.
Tools
Figma, Photoshop
Duration
4 Weeks
User Interview
I began the design process by conducting extensive user interview to gain valuable insights into the preferences and pain points of my target users, aiming to understand their behaviors, motivations, and challenges when it comes to finding movie trailers and buying tickets on their mobile devices.
Here are some interview questions I used to gather insights from moviegoers about their movie browsing and ticket purchasing experiences:
Findings: Insights from the interview
Based on the user research, here is a summary of the pain points or user experience issues that were identified:
.,
Persona
After gathering insights from the interviews I conducted, I created two personas as a fictional representation of target users, allowing me to better understand their needs, behaviors, and motivations and to make design decisions accordingly.
User Journey Map
This user journey map is a visual representation that outlines the steps and interactions a user will go through when engaging with my mobile app. It provides a holistic view of the user’s experience, from the initial awareness or discovery phase to the post-engagement stage. The user journey map highlights key touch points, emotions, actions, and pain points that users may encounter along their journey. Mapping out the user’s journey helped me gained insights into the user’s perspective, identify opportunities for improvement, and align the product or service with user needs and goals.
Define the Problem Statement
A problem statement is a clear description of the user’s needs to be addressed. It serves as a guiding statement for the design process. Now that I have a clear understanding of the user’s pain points, I can dive into addressing the “who, what, when, where, why, and how” of solving their problem, all guided by our well-defined persona.
Build Value Propositions
Value proposition is the unique value and benefits our product provides to its target audience that sets it apart from competitors. It highlights the reasons why customers should choose our product over others.
Based on users’ needs, I did thorough research in order to build a strong value proposition to address the following questions:
Why a customer should choose this product over alternatives?
How the product is different from similar offerings?
..
Ideate
The goal of ideation phase is to come up with as many design solutions as possible. This phase involves collaborative brainstorming with other members of the design team.
I utilized the ideation phase to generate a variety of ideas and potential solutions for addressing the identified needs. I employed brainstorming and mind mapping techniques to facilitate this creative process.
Ideate
Competitive audit involves conducting a comprehensive analysis of competing companies or products in the market to gain insights into their strengths, weaknesses, and strategies.
I analyzed two direct competitors and one indirect competitor to obtain an in-depth understanding of the competitive landscape and inform strategic decision-making.
How Might We (HMW) and Crazy 8
In the ideation phase, I used HMW questions to reframe user challenges into opportunities for potential solutions.
HMW set a reminder for new movies?
HMW enable users to buy movie ticket through the app?
HMW add assistive technology for users with vision impairment?
HMW make a way for users to share favorite trailers with friends?
HMW create a way for users to comment on watched movies/trailers?
I also employed the Crazy 8 technique to generate multiple ideas within a very short timeframe.
Storyboard
I created two storyboards to visually depict and explore a user’s interaction with the product. The big-picture storyboard takes a broader perspective, focusing on the user’s needs, context, and the overall value of the product. The close-up storyboard zooms in on the product itself, highlighting its key features and functionality.
Information Architecture/Sitemap
The information architecture of the app is the outline of the information in it to make it simple and intuitive to navigate. It is the structure of the app’s content: its organization, hierarchy, and sequence.
User Flow Diagram
I made a user flow diagram to picture how a typical user will move through the app to complete a task from start to finish. It helps me map out the sequence of steps, screens, and actions that the user follows, providing an overview of the user’s journey.
The user flow starts with the app’s home screen and guides the user through the app’s various features, such as selecting a movie, watching its trailer, selecting a seat, and finally completing the ticket purchase process.
..
Paper Wireframe
I sketched out the basic structure, layout ideas, and content placement on paper to quickly explore and iterate on different design concepts.
Low-Fidelity Digital Wireframe
I transferred the paper wireframes into a low-fidelity digital format to create a polished representation of the user interface that resembles the final design.
High-Fidelity Digital Wireframe
At this stage, I focused on enhancing the visual aesthetics, typography, colors, and imagery to create a more polished representation of the final user interface. I incorporated real content, such as actual text and images, to provide a more realistic and accurate depiction of the user experience.
..
Color
I decided to use dark blue as the background color for the app to create a sleek and sophisticated visual design. I chose greenish-blue for the buttons and icons to create a pleasing contrast against the dark blue background. Choosing white as the text color against the dark blue background enhances optimal readability and legibility.
Typography
In choosing a typeface, I considered a typeface with a clean and modern look that aligns well with the sleek design aesthetic.. As a result, I chose a sans-serif typeface for both the headings and body text. I settled on Roboto, which has a great readability scale.
Sticker Sheet
This is a collection of pre-designed and reusable graphic elements for the mobile app. It consists of various icons, buttons, UI elements, and other graphical assets that follow a consistent style and design language.
Mockups
After the entire design process, I made mockups to get a realistic preview of the final product when it is fully developed and launched.
.
Usability Study
I conducted 2 rounds of usability studies on 10 different potential users to enhance the user experience of the app. The findings from the first study provided valuable feedback that guided me in making necessary adjustments to the wireframe designs. Building upon those improvements, the second study allowed me to further refine the mockups, addressing any remaining usability issues and enhancing the overall user experirnce.
In response to insights gained from the initial usability study, I made significant improvements. I introduced an optional registration step, offering users the flexibility to decide whether to register during their initial interaction with the app. Additionally, I enhanced usability by incorporating easily recognizable icons, ensuring a straightforward selection process for users.
In response to user feedback gathered during the second usability study, I implemented valuable enhancements. I introduced a content filtering feature, empowering users to fine-tune their search results according to their unique preferences. Additionally, to improve accessibility, I incorporated a voice search functionality, ensuring a seamless experience for individuals who may face challenges with text input.
Accessibility Considerations
Designing for accessibility involves ensuring that users with disabilities can effectively access and use the mobile app. It entails creating an inclusive and user-friendly experience that accommodates various disabilities.
.
Takeaways
Takeaways are the key lessons that I derived from the design process. They are valuable points of learning that I can apply in future iterations or projects.
Next Steps
I will conduct more usability testing to validate the effectiveness of the implemented changes and ensure a seamless and intuitive user experience.
Additionally, I will focus on addressing any remaining pain points and fine-tuning the visual and interactive elements of the app.
