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.
Empathy map
Understanding what our customers think, feel, say, and do allows us to gain valuable insight that allows us to identify genuine issues, problems, or concerns that our customers may be experiencing right now. We create them to provide a proxy for the user during design and to ensure that the project team is in a human-centered mindset
So I gathered all of the information and prioritized it in order to create an empathy map to guide us through our process.
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.
comes out"
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.
post it notes
Build value propositions
Everything our product has to offer may appear obvious to us, but we must put ourselves in the shoes of our users. Users are unfamiliar with our product and are unaware of its value. This is where value propositions come into play.
We did answer these questions in order to have a good value proposition.
What does your product do? (explain the offering that your product provides users).
Why should the user care? (Describe how our product addresses users’ pain points).
The aim of the mobile application is to show and browse the movie trailer. This program has an optional sign-in to collect credit for using the ticket later on. In the browsing section, there is a voice search option as well as a powerful search engine that categorizes movies by topic and what is new, and what is coming. The trailer section should be able to cast only the trailer on television while still including some different quality of close captioning. The user should be able to advance and rewind the video, as well as mute it. They should be able to see the title of the movie, the details, the ranking, and the actor's name. They should be able to save the trailer, and the app should recommend other movies depending on their interests. It must have notifications that inform the user of what they want to know, such as when new movies are out. It can have a group meeting or room with friends to chat and show their content or talk about movies, and it can be posted to the internet.
I used post it to make notes of some product features and benefits that came to mind and then narrowed them down to those that were relevant to my users' needs.
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.
HMW & Crazy 8
To break up the brainstorming, I did some HMW (how might we)Questions to translate problems into design opportunities. HMW triggers your creativity and encourages you to consider the problem from different angles.
HMW set a reminder for new movies
HMW buy a ticket through the app after watching the trailer of the movie
HMW watch a trailer of movie from the app on TV without interruption
Then, I did crazy 8 first to get ideas flowing for any design problem I needed to solve and to think outside the box. I set the alarm for 8 minutes and fold my paper into 8 parts before beginning to sketch a solution to the problem in 8 minutes.
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
Paper wireframe
Paper wireframe
I began by sketching ideas on paper before moving on to digital wireframes.
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.
View the Cinemacom Low-Fidelity prototype
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.
View the Cinemacom High-Fidelity prototype
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
Impact:
The app makes users feel as if it meets their needs for seeing movie trailers and purchasing tickets.
One quote from peer feedback:
“I enjoy how the app is clear and straightforward in terms of watching trailers and purchasing tickets.”
What I learned:
I learned that the first ideas for the app are only the beginning of the process. Usability studies and user feedback influenced each iteration of the app’s designs.
Next step
01
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
02
Conduct more user research to determine any new areas of need.