2. The product:
Angelika’s Film Center is a regional independent
theater chain spread out across several locations: in
large metropolitan cities and smaller suburban towns.
They are the to-go cinema for people who want to
watch independent films on the big screen.
Project overview
Project duration:
November 2022 to April 2023.
3. The problem:
Prospective and current customers want an
easier and faster way to get Angelika’s film
tickets.
Project overview
The goal:
Design an app for Angelika’s that allows
customers purchase film tickets, select seats
and reserve assistive equipment (if needed).
4. My role:
UX designer designing an app for Angelika’s
Film Center from conception to delivery
Project overview
Responsibilities:
Conducting interviews, paper and digital
wireframing, low and high-fidelity
prototyping, conducting usability studies,
accounting for accessibility and iterating on
designs.
6. User research: summary
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 young adults and
families who enjoy watching movies in the theater.
The user group confirmed initial assumptions about Angelika’s: the fact that it was
disappointing that it didn’t have it’s own app. Research also revealed that there was a desire for
a simple contactless process as well as a way to reserve assistive equipment.
7. User research: pain points
Time
Working adults spending too
much time waiting in line at
the theater to get tickets and
the website not being as
user-friendly on mobile
devices.
Accessibility
Not being able to filter
by films/theaters with
accessibility features.
The differently abled
having to come so
early to get their
equipment.
IA
Apps tend to be saturated
with so much information on
a small screen so users find
it overwhelming to find/filter
information and reach their
final destination.
1 2 3
9. “I already have to book a babysitter and look for
parking, I need something about date night to be
simple.”
Goals
● To easily reserve seats
days in advance at their
local Regal cinema in a
straightforward process.
● To be able to see what the
methods of accessibility to
the screening room and
bathroom is like.
Frustrations
● Complicated accessibility
to customer support.
● Inability to cancel when
plans change last minute.
● Waiting in line to get tickets
often makes them get into
the theater late.
Rose is a 42-year-old chef who has a wife who enjoys going to the
movies once they are released so they find themselves at the cinema all
the time. On general principle, they struggle with technology so they
wishes the reservation system at their local Regal was more
user-friendly. Also, their wife, Sharon, uses a cane so they wants to make
sure the bathrooms are not too far from the screening rooms and they
have escalators/elevators if it has more than one floor.
Rose
Age:
Education:
Hometown:
Family:
Occupation:
42
Culinary School graduate
Houston, TX, USA
Living with their wife and
one kid
Chef
10. Rose is a chef with a wife who loves going to the movies who
needs an easy app experience to reserve tickets and seats at
their local Regal cinema because they’re not technologically
savvy.
PROBLEM STATEMENT
11. Jack
Age:
Education:
Hometown:
Family:
Occupation:
20
Associate’s Degree
San Francisco, CA
Lives with brother
Florist
“Lowkey I don’t want to have extended contact with
others in public spaces if I don’t have to because I
mean COVID?!”
Goals
● To be able to refine his search
for movies at his local Regal
Cinemas Closed Captioning
and Assistive Listening
● To be able navigate the movie
theater safely without help.
● To be able to set up and use
his equipment as quickly and
efficiently as possible.
Frustrations
● Lack of theater staff is
available to assist him before
and during the film.
● Having to come so early to
set up his closed captioning
equipment.
● Not being able to see which
movies have CC and/or OC
Jack is a 20-year-old deaf florist who lives with his brother. He enjoys
going to see movies especially when he wants to go on a date. However,
sometimes he gets discouraged because of how much time and effort is
takes to get situated in the theater even after he reserved tickets online.
He wants a smoother process since he wants to enjoy his entertainment.
13. Persona: Jack
Goal: Refine his search to movies that have open and closed captioning and reserve the equipment in advance.
ACTION
Refine film search
at his local Regal
cinema site.
Choose the film at
preferred time and
buy tickets.
Reserve Closed
Captioning (CC)
Equipment.
Scan ticket at
cinema and pick
up equipment.
Set up equipment
TASK LIST
Tasks
A. On Regal app,
refine by zip code
B. Then refine by
OC/CC availability
C. Search
Tasks
A. Reserve preferred
seat(s) for film.
B. Pay for ticket(s).
C. Accept automated
offer of accessibility
equipment.
Tasks
A. Fill form for CC
equipment.
B. Reserve pickup time
C. Access user manual
Tasks
A. Show booking
confirmation email to
staff for scanning.
B. Pickup equipment.
Tasks
A. Set up equipment
B. Press button on
equipment to request
staff support (if needed)
C. Watch movie!
FEELING
ADJECTIVE
User emotions
● Confident
User emotions
● Focused
● Confident
User emotions
● Skeptical
● Interested
User emotions
● Nervous
● Hopeful
User emotions
● Unsure
● Excited
IMPROVEMENT
OPPORTUNITIES
Area to improve
● Save searches on
profile.
Area to improve
● Automatically
populate films
according to saved
searches.
Area to improve
● Make process
shorter.
Area to improve
● Self pickup as
opposed to
interacting with
staff.
Area to improve
● Have equipment set up
at the customer’s seat
already.
14. ● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design
15. Paper wireframes
Taking the time to draft
iterations of each screen
of the app on paper
ensured that the elements
that made it to the digital
wireframes would be
well-suited to address
user pain points. For the
movie screen, I prioritized
a quick browsing and
selection process to help
users make a quick
decision out of available
options.
16. The time selection
button under each
movie to take the
user to the directly
to the seat selection
page, shortening the
user journey.
This filter icon lets
the user filter
their movies
according to
accessibility
options and types
of movie
screening e.g. 2D,
3D or IMAX.
Digital wireframes
As the initial design phase
continued, I made sure to
base screen designs on
feedback and findings from
user research.
17. Easy access to
navigation that’s
screen reader
friendly.
Digital wireframes
Easy navigation was a key
user need to address in the
designs in addition to
equipping the app to work
with assistive technologies.
18. Low-fidelity Prototype
Using the completed set
of digital wireframes, I
created a low-fidelity
prototype. The primary
user flow I connected
was selecting a movie,
selecting seats and
buying the tickets, so
the prototype could be
used in a usability study.
View the Angelika’s app
low-fidelity prototype
19. 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.
Round 1 findings
The create account page seemed misleading
because there was no request for “name.”
1
2
Round 2 findings
Better navigation from the home screen to
movie info page.
3
Users want some of the buttons to be
more clear and bold in their color palette.
1
Users need a little more negative space to
make things seem less cluttered.
2
Users need a little more space between
some of the icons to avoid error clicking
3
The “Select your Location” Page seemed
clunky and unnatural.
21. Before usability study After usability study
Mockups
Early designs allowed for
some let the user search
according to their current
location, but after the
usability studies, I changed
the copy to make it more
beginner friendly. I also
revised the design to avoid
text repetition and automate
a step in the process to have
a smoother experience.
22. Before usability study After usability study
Mockups
The second usability
study revealed suspicion
of the “create account”
page which does not
request a name. So I
changed the button on
the first page and added
another page to include
a place for names and
the privacy policy.
24. High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for buying movie tickets,
selecting seats and reserving assistive equipment. View the Angelika’s app high-fidelity
prototype (Dark Mode) and the Angelika’s app high-fidelity prototype (Light Mode) .
25. Accessibility considerations
Provided access to users
who are vision impaired by
adding alt text to images
and simplifying navigation
for screen readers.
Used accessible color
palettes, fonts, and created
a dark and light mode for
the comfort of different
kinds of users.
Created a path/flow for
differently-abled
customers to reserve
assistive equipment and
schedule a pickup time at
the theater.
1 2 3
27. Takeaways
Impact:
The app makes users feel like Angelika’s Film
Center really thinks about how to meet their
needs.
What I learned:
While designing the Angelika’s app, I learned
that the first ideas for the app are only the
beginning of the process. Usability studies
and peer feedback influenced each iteration
of the app’s designs.
28. Next steps
Conduct another round
of usability studies to
validate whether the pain
points users experienced
have been effectively
addressed.
Conduct more user
research to determine
any new areas of need.
1 2
29. Let’s connect!
Thanks for taking your time to review my work on the Angelika’s Film Center app! If you would like to
see more or get in touch, my contact information is below.
Email: omoneoshiafi@gmail.com
Website: theenicollection.com
