Movie trailer app

Overview

Project Brief

In the Google course, we were given the task of selecting a subject to work on, and my subject is a mobile application that displays and browses movie trailers.

Problem

Create a mobile application that gives people the ability to browse movie trailers and watch them and buy tickets through the app.

Goal

The goal: 

The goal was to find a strategy for displaying and searching trailer movies and buy tickets that are simple to use and that everyone can enjoy in a short amount of time.

My role

It was assigned to me as a sole UI/UX Designer, but because I knew that different perspectives and collaboration with others are desirable, I managed to work with some classmates as well as the developer.

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

Duration

The process and design took four weeks to complete.

Tools

Figma, Adobe illustratour, XD,Photoshop

User research

summery

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was busy adults who use browsing movie trailers and buys tickets for the movie.

This user group confirmed previous assumptions about Cinemaapp, but research also demonstrated that time was not the only factor for customers watching trailers and purchasing tickets. Obligations, interests, or challenges made it difficult for users to choose and learn about the movies they wanted to see before purchasing a ticket.

Interview

To gain a better understanding and learn more about it, I gathered some data and began interviewing people to answer some questions.

• can you describe yourself and How you use the trailer browsing app? What kind of?

• What are the challenges you face when using the app? How does make you feel?

• Is there any way in which you feel these challenges could be resolved?

• What are the most aspects of in-app that you always looking for?

After gathering information to empathize with the user, I created an empathy map.

Persona

After gathering that information and conducting some interviews and empathy mapping to identify the pain point, opportunity, and insight, I discovered patterns in user perceptions and aggregated my findings in the form of two personas.

User Journey Map

To assist in thinking and feeling like the user, which is critical I created a journey map of the steps the user takes to achieve their goals. A user journey map assists us in creating customer paths while also reducing the impact of our bias. It also assists us in determining the user's pain point.

Define Problem statement (The 5 Ws)

After defining the user's pain points, now we can answer who, what, when, where, why, and how to solve the user’s problem based on our persona.

Mary's problem statement:

Mary is a busy mom who needs an application mobile to notify her new movies because she wants to make the schedule and go see the movie with friends or her kids.

John's problem statement:

John is a friendly student who needs an easy and fast mobile application for watching the trailer of the movie because he wants to see and decide to get the ticket.

Ideation

After empathizing with users and defining the problem, it is time for ideation and brainstorming. We brainstormed and narrowed down some of the ideas based on timeline and business budget (which this is a case study, but I had to think about the business side too)

Competitive audit

the competitive audit is an overview of your competitors’ strengths and weaknesses. Analyzing the brands and products of competitors, or the companies who offer similar products as we do can give us a well-rounded foundation of knowledge about the market our product will enter. That knowledge will carry into our designs and help us create a product that’s helpful and unique for users.

I conducted a competitive audit with two direct competitors and one indirect competitor and created an outline to compare them. Exploring these businesses, their designs, and user feedback is a fantastic source of information.

First, I used a post-it to write down the features of each application, as well as their websites, and compare them. Then I made a list and put it in my outline, which you can see at the bottom.

Competitive Audit Report

After researching those competitors, I created a Competitive audit report of Analyzing and summarizing the findings.

Storyboard

To visually describe and explore a user's interaction with a product Two storyboards are created by me. Focus on the product and how it works in close-up, and Storyboard of the big picture; what the user needs, their context, and why the product will be useful to the user

Digital wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

The ability to navigate through the app and understand how to use it is an important part of the design for users. At the bottom, you can see some designs based on my research.

Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was to select the movie and buy tickets so the prototype could be used in a usability study.

High-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for Users to watch the movie trailer, share with friends. It also met user needs for Buying tickets through the app.

Color

I decided to utilize dark blue and greenish-blue for the app color for the Dark theme app after doing some research. Because the color is a mix of green and blue, both of which are trusted by people and are useful in a variety of situations.

Typography

I needed to be able to communicate with the user clearly. I want to have something that is understandable, has a readable scale, and has a lot of color contrast.

As a result, I chose a few samples, presented example sentences in both lower and higher case, and asked my users to express their feelings.

In the end, I settled on Roberto depending on the user's preference.

Logo

Because I needed to choose a name for the mobile app in order to give a logo and branding after some discussion, I settled on Cinemacom, which is a combination of movie and community and communication

Sticker sheet (UI)

This is a style guide for the Cinema app. This style guide contains, typography, components, such as buttons, icons, and Text input.

Mockups

Here's our project mockup once we've finished the design

Usability study: findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. 

Takeaways

Next step