Movie Trailer App for a Movie Theater

1. Design a movie trailer
app for a movie theater
Kagiso Khaole

2. The product:
The app is for a local movie theater
which allows users to watch trailers
for movies and buy tickets.
Project overview
Project duration:
March – July 2021

3. The problem:
Users find deciding on which movie to watch is
difficult and finding trailers for the movies
playing at the local movie theatre requires use
multiple apps and uncurated discovery.
Users currently need to buy tickets via
telephone or in-person at the movie theater.
Project overview
The goal:
Our movie trailer app will let users preview
movies which will affect how locals decide on
which movie to watch at their local cinema by
giving them the ability to watch trailers for
current and upcoming releases.
We will measure effectiveness by analysing
video view count and ticket sales.

4. My role:
Lead UX Designer and UX Researcher
throughout the duration of the project.
Project overview
Responsibilities:
• UX Researcher : develop qualitative and
quantitative research models; analysizing
data; emphathizing with users; defining
problems
• UX Designer : Understanding user needs;
ideation to solve user problems; design
prototyping; Testing

5. Understanding
the user
● User research
● Personas
● Problem statements
● User journey maps

6. User research: summary
The process for user research was centered on empathizing with users and understanding their pain
points, defining user needs using problem statements, and ideating solutions for user problems.
Some of the assumptions which were disproved during the research process was that it was easy to
decide on which movie to watch and that the process was simple pick and buy process.

7. User research: pain points
Multiple Apps
Finding trailers was
overwhelming as it
required multiple apps
and verifying whether
movie will be shown at
the movie theater
Buying In-Person
Long queues for tickets
and uncertainty on
availability of tickets
Limited Information
Small local cinema do no
publish timeous
information online,
which sometimes makes
it a challenge to plan a
movie night (including
accessibility needs such
as wheelchair or
availability of seats close
to the screen)
Future Viewing
Once you see a good
movie trailer, its difficult
to remember to
schedule time with
others to go watch the
movies at a later date.
1 2 3 4

8. Persona: Craig
Problem statement:
Craig is a working professional
who needs to know whether a
particular movie is playing in
an accessible theatre
because he moves around in a
wheelchair

9. User journey map
Mapping Craig’s user
journey showed how
seamless watching
movie trailers and
booking tickets
through the app can
enhance the process.

10. ● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design

11. Paper wireframes
Early paper wireframes had
many different layouts with
the aim of simplifying the UX.
Navigation and browsing was
the field with the most
iterations. This is important
because the first for the user
was to find a movie.

12. Digital wireframes
Objective was to keep the
app simple and optimized
for one-handed mobile use.
If scrolling was required,
horizontal swipes as that
feels more natural on
mobile.
Most interactions placed
lower on the screen
Hierachy : The
movie
thumbnail and
focus user
attention
Insert second
wireframe example that
demonstrates design
thinking aligned with
user research
Proximity :
Information
icons grouped
together to
show that they
are related
Similarity :
Buttons shape
and placement
consistent,
easier to find
Common Region :
The navigation is
bounded separately
from other
elements

13. Digital wireframes
Another goal of the app is
to make the user feel truly
in control throughout the
process.
Confirmation and ability to
navigate out of screen was
critical.
Confirmation
of transaction
to avoid
deceptive UX
patterns
Iconography to
reduce reliance
on text for
messaging

14. Low-fidelity
prototype
Screenshot of
prototype with
connections or
prototype GIF
Figma LoFi
Prototype

15. Usability study: findings
Two unmoderated usability studies were conducted with 5 participants to learn how useful
and easy to use the app. We also wanted to understand how they felt about the UX elements.
Round 1 findings
5 of 5 users complete the journey
1
3 of 5 users didn’t try clicking the
video button
2
Round 2 findings
3 of 5 users spoke in positive tone
3
4 of 5 users found the a movie trailer
app useful
1
2 of 5 users were confused on how to
get started
2
2 of 5 users got stuck in a video loop
3

16. ● Mockups
● High-fidelity prototype
● Accessibility
Refining
the design

17. Mockups
1. Thumbnail opens up
new video player
overlay, now clickable
2. Buttons moved further
up and given colours to
stand out
3. Simplified ”Other
Movies” browsing to
natural interactive
horizontal scrolling
Image of
selected
screen before
usability study
Before usability study After usability study
Image of
selected
screen after
usability study

18. Mockups
4. Converted the
“Buy Tickets”
overlay into six
smaller steps
which allows
those using
screen reader to
be able to
complete the
process easier.
Before usability study After usability study

19. Mockups

20. Mockups

21. High-fidelity
prototype
Figma HiFi
Prototype
Screenshot of
prototype with
connections or
prototype GIF

22. Accessibility considerations
Color Pallette
Selected a high contrast
Black / White / Yellow
color scheme for the app.
This consideration was to
ensure high readability
and visibility.
Screen Layout
Initial designs were able
to fit most steps into one
screen, requiring fewer
clicks but multiple inputs.
Opted to break down
busy screens into simpler
screens which work
better with screen reader
Confirmations
Added input confirmation
screens to allow users to
check that there input is
correct (and go back in
case of error).
Inclusion of success
messages at the end of
key processes
1 2 3

23. ● Takeaways
● Next steps
Going forward

24. Takeaways
Impact:
The design of the app is right on the mark,
focused on key steps in the user flow and
visually appealing.
"Hi, I am looking at your prototype in the course
Google UX, THIS LOOKS really great, are you
studying now or have been doing this before?”
- Katarina
What I learned:
Research does not harm creativity, it
accentuates good taste. Critical for the
professional designer to allow seek insight.
Accessibility considerations are a secret
weapon for building impactful UX. They bring
out novel solutions for overlooked pain points.

25. Next steps
Finalize Design
• Ensure full user
experience
• Replace placeholder
text with final copy
• Check all elements
interact in a common
way on iOS and
Android
• Review accessibility
Low Priority Additions
• Review low scoring
observation from user
feedback
• Develop some of the
low priority insights
Prepare for Production
• Document designs and
elements
• Share links to Figma
with engineering team
1 2 3

26. Let’s connect!
The best way to find me…
Connect with me on LinkedIn
(https://www.linkedin.com/in/kagiso-khaole/)

27. Thank you!