PROJECT OVERVIEW
Our product is a trailer browsing app that helps users to pick movies, purchase tickets, as well as reviewing trailers in one stop. Our target groups are users between age of 18-60, who enjoys movies for entertainment.
PROJECT DURATION
August 9th 2021 - January 15th 2022
ROLE
UI/UX Designer — user research, interview, wireframe, usability test, prototype
THE PROBLEM
Users gets frustrated during movie picking process.
THE GOAL
Create a seamless movie discover and purchase experience for the underserved potential customers.
UNDERSTANDING THE USER
-
User research
-
Personas
-
Problem Statements
-
User journey map
USER RESEARCH: SUMMARY
I conducted interviews and created empathy maps to understand the users I’m designing and their needs. A primary user group identified through research was adults who watch movies at least once per month and get frustrated during the process of picking movies.
This user group confirmed initial assumptions about their user experience when they pick movies, and the research also revealed the inconvenience behind the movie picking process. Users sometimes need to go through different platforms to check out trailers and movie informations. Other challenges that make it difficult is the time commitment, money, or the lock of engagement of the users’ taste of movies.
PAIN POINTS
TIME
Users do not like to stay in the line for movie tickets
Users wants to pick movies efficiently
PREVIEW TRAILERS
Lock of engagement of movies users might like
Hard to discover trailers for the upcoming movies
BREAK THE USER FLOW
Going through different platforms to pick movies break the user flow and make users frustrated
MOVIE WATCHING EXPERIENCE
Users have different requirement of the movie watching experience, but it is hard to gather movie theater informations
PERSONA
Ruth is a factory manager with 2 kids who needs to be able to filter movies and movie theaters because he wants to pick movies that are suitable for his family and be able to enjoy the movie watching experience.
USER JOURNEY MAP
Mapping Ruth’s user journal revealed how helpful it would be for user to have an app that can filter movies, review trailers and movie informations, while offering features like online purchasing.
COMPETITIVE RESEARCH
Compare to direct and indirect competitor, what features do they offer to their users today?
What they did really well that can help me develop the product?
STARTING THE DESIGN
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
PAPER WIREFRAMES
Homepage drafts: A-E
Homepage final: corner right
Stared content was used to make up the homepage final
Search drafts: A-C
Filter/Search results/Tickets
DIGITAL WIREFRAMES
Top navigation bar contains several sections for trailer reviewing, as well as search bar on the top right and filter option under the main navigation section, for users to find movies with their interests.
After the navigation bar, there are two sections for movies. With the heart button, users can save movies they liked to get notifications of those movies.
Easy navigation section was a key user need to address in the designs. Other than main navigations displayed on the top and bottom side of the app, filter and search options can help users to find the movies faster.
After search or just click on movies, this top two blocks display useful informations and trailers for users to check.
Easy purchase section after the movie info, this section is made up with date selection and theater suggestions which based on location.
As the initial design phase continued, I made sure to base screen designs on the purpose of efficiency and information display.
LOW-FIDELITY PROTOTYPE
The low-fidelity prototype connected the primary user flow of browsing trailers and purchasing tickets for movies, so the prototype could be used in a usability study with users.
​
View it here:
USABILITY STUDY: parameters
STUDY TYPE
Unmoderated usability study
PARTICIPANTS
5 participants
LOCATION
United States, remote
LENGTH
20-30 mins
USABILITY STUDY: findings
ROUND 1 FINDINGS
-
Users want a more visible location icon
-
Users want clickable elements and navigation arrows more accessible
-
Users want a calendar style date picking option
ROUND 2 FINDINGS
-
Calendar style for incoming movies display
-
Simplify header
-
Change contrast color for buttons
REFINING THE DESIGN
-
Mockups
-
High-fidelity prototype
-
Accessibility
MOCKUPS
Before usability study
After usability study
Early designs allowed for some customization, but after the usability studies, I increased the size of the navigation arrows which allows users to easily navigate the posts. I also changed the colors around, which grabs more attention for call to action buttons.
Before usability study
After usability study
The first and second usability studies revealed frustrations with the purchasing flow. I added a calendar option for users who want to pick date in a easier-to-read format. Other than that, I increased the visibility of the location icon, and eliminated extra information in the trailer box to avoid busyness of the overall page.
HIGH-FIDELITY PROTOTYPE
The final high-fidelity prototype presented cleaner user flows to select movies, preview trailers, and checkout. It also meets user needs for a timeline styled upcoming movies calendar so the trailer feature can be more benefit for users.
View prototype here:
ACCESSIBILITY CONSIDERATIONS
Provided access to users who are vision impaired through adding alt text to movies for screen readers.
1
Proved alternative options to use gesture. For example, other than click arrows to go back and force, users can also swap to go back screens.
2
Controls speed and duration of animations which allow users to comfortably go through pages.
3
GOING FORWARD
-
Takeaways
-
Next steps
IMPACT
The app makes it easier for users to find movies and discover upcoming ones. Users feel like the app really thinks about how to meet their needs.
ALL USER VALUE
Other than preview and purchase movies, users can also watch past showtime movie trailers, checking the incoming movie calendar to manage their movie watching time ahead of schedule. Our app makes sure users can do multiply things in one stop.
UNDERSERVED POTENTIAL USERS
One quote from peer feedback: “It is overall a really thoughtful app, it got all the information I need for picking movies and discover new ones. I’ll definitely use it!”
BUSINESS VALUE
With the help of the app, users were engaged to checkout movies and purchase tickets without waiting in the line.
WHAT I LEARNED
While designing the trailer browsing app, I learned that the first assumption for the app are only the beginning of the research process. To really understand what users needs, researches and interviews help with the iteration. Usability studies and peer feedback also influenced each iteration of the app’s designs.
NEXT STEPS
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
1
Conduct more user research to determine any new areas of need.