This is a UX project done by me, an app for seat reservation in theaters.

1. Movie Tick
Chathumi Kumarapeli

2. The product:
Movie Tick is a mobile app for seat reservation
in movie theaters.
Project overview
Project duration:
May, 2021 (5 weeks)

3. The problem:
Busy workers usually go for movie hangouts for some relaxation. Many
teenagers and young adults also go for movie outings to catch up with
friends. However, sometimes they get to know that no seats are
available only after reaching the theater. Or else they face situations
like none of the streaming movies match their interests. In a situation
where a gang of friends goes for a movie, they rarely get a chance to
sit together in the theater.
Project overview
The goal:
Create a mobile app that allows users to
know streaming movies and to reserve
seats.

4. My role:
UX designer
Project overview
Responsibilities:
Conducting interviews, Paper and digital
wireframing, Low and high-fidelity
prototyping, Conducting usability
studies, Accounting for accessibility, and Iterating
on designs

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

6. User research: summary
I conducted interviews with my users and created empathy maps to understand user expectations and
pain points.
A primary group of users I found through research is working adults who go for movies for relaxation.
They confirmed for going for movies at least one a month. However, they are frustrated for not being
able to reserve seats before hand.
The secondary group of users is teenagers or young adults who go for movie outing as bunch of friends.
What they want most is to taking seats together (in same row) so they can enjoy the movie.

7. User research: pain points
1
Time
Some theaters do not have
their own websites. Therefore,
to know the streaming movies
either users have to go to
theater or call. Working adults
do not have time for this.
2
Seat availability
Inability to know
whether seats are
available until users
reach the cinema.
3
Seat positioning
Users have no way to
know where their seat is
positioned. So reserving
seat in a row or position
that they like is difficult
as welll.

8. Persona: Nayana
Problem statement:
[User name] is a [user
characteristics]
who needs [user need]
because [insight].

9. Persona: Thurunu
Problem statement:
[User name] is a [user
characteristics]
who needs [user need]
because [insight].

10. User journey map
Image of user
journey map
Mapping Thurunu’s
user journey
revealed how
helpful it would be
for users to have
Movie Tick kind of
an app.

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

12. Paper wireframes
Taking the time to draft
iterations of each screen of the
app on paper ensured that the
elements that made it to digital
wireframes would be well-suited
to address user pain points.

13. Easy navigation
to the menu
page
Allows user to
login when
they enter
their
credentials.
In case user has no account,
he can easily navigate to the
signup page by clicking this
link.
This is the login
interface of the app.
Once the app is open
this is the first page
that user sees. The
image will be the logo
of the app.
Digital wireframes

14. User can signup by
clicking this button.
User can
cancel the
process as
well.
User can easily go to
the previous page he
was in.
This is the signup
page of the app.
This is the page
that every new user
must visit to
proceed with the
app.
Digital wireframes

15. Users can
easily search
movies by its
name.
To view home page
user has to be logged in
first. Since the user is
logged in, he can now
navigate to his profile
easily by clicking this
icon.
These images represent
different movies that are
streaming currently. By
clicking on an image, user
can navigate to that
particular movie’s page for
the reservation.
This is the home
page of the app.
This displays the
currently
streaming
movies.
Digital wireframes

16. This reserve button
will direct the user
to the seat
reservation page.
Dropdown list
of the theaters
the movie is
streaming.
Dropdown list
of the dates
the movie is
streaming in
the selected
theater.
Dropdown list
of the time
slots the movie
is streaming in
the selected
theater on
selected date.
Can be used for a
quick navigation to
the home page.
This page is displayed
when user clickes on an
image of a movie on the
home page. This displays
movies streaming details
(theaters, date, time).
User can select his
preference for
reservation.
Digital wireframes

17. This text gives
directions for
the user to
follow when
reserving
seats.
User has to
enter seat
numbers here.
Digital wireframes
This is the page for the
seat reservation. The seat
number of available seats
are displayed, so that
user can type the seat
numbers he want to
reserve.

18. When user hits
the
confirmation
button, his
reservation
gets recorded.
User can even
cancel his
reservation by
clicking caancel
button.
Digital wireframes
This page is the
reservation confirmation
page. It displays all the
details related to the
reservation.

19. When user
clicks Exit he
directs to the
previous page
where he was
in.
Digital wireframes
This is the profile page of
the user. When user clicks
the circular icon on top
right corner of any page,
he is directed to this
page.

20. Directs the
user to the
home page.
Directs the
user to his
profile.
Digital wireframes
This is the menu page
of the app. When user
clicks the menu icon
on top left corner of
any page, user directs
to this page.
When user clicks Exit
he directs to the
previous page where
he was in.

21. Low-fidelity prototype
This is the low-fidelity prototype I
created by using the digital
wireframes. This represent the user
flow from sign up to the reservation,
so that it could be used in a usability
study.
You can view the Movie Tick lo-fi
prototype here.

22. Usability study: parameters
Study Type:
Unmoderated usability study
Location:
Sri Lanka, remote
(online mode)
Participants:
5 participants
2 males
3 females
Duration:
15 minutes per each participant

23. Usability study: findings
I conducted two rounds of unmoderated usability studies.
First round of the usability study conducted using the prototype of the digital
wireframes. Its findings help to update the digital wireframes into mockups.
The second study used a high-fidelity prototype. Its findings pointed out the
updates needed to be done for the mockups to achieve a good user
experience.

24. Usability study 01: findings
1 Users want to see all of
their reservations in a
separate page.
Finding
2 Finding
Finding
3
Users want an option to
cancel reservation even
after confirmation.
4 Users want reservation
confirmation message to
be seen.
Finding
Users want dates to be
selected from a calendar
instead of a drop down
list.

25. Usability study 02: findings
1 Finding
2 Finding
Finding
3
Users want a way to see
the complete schedule of
a particular movie before
reservation.
4 Users want to search
movies theater-wise as
well.
Finding
Users want to search
movies depnd on genres.
Users want to see details
of the movie like cast,
director etc.

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

27. Mockups
Many users suggested to have a
functionality to search movies based
on genres and theaters. It seems to be
a pretty good suggestion. Hence, I
added that feature to the final product.

28. Mockups
In mockups, users had
to select movie
theaters, dates and
time slots using a drop
down menu. Users
gave negative
feedback on
this. Therefore, I
added a schedule
where users can see
movie streaming days
theater-wise. Then
when they click on a
date, it directs the
users to a page with
available time slots.

29. Mockups
In seat reservation page in
mockup, I had used green for
available seats and red for
unavailable seats. However, I
realized that it was not a very
good idea. Users having color
blindness may face difficulties in
distinguishing these two colors.
Hence I used another color in
place of green as shown in this
UI diagram.

30. Mockups
Initially I had not added any
details about the movie. There
was just the movie poster and
streaming details. However,
many users seemed to be
expecting to have movie
information. Since it seemed a
good idea, I added a separate
page showing movie
information.

31. High-fidelity
prototype
The final high-fidelity prototype
presented user flows for seat
reservation using Movie Tick
app.
Since the screen shot here is
too packed up, you won’t be
able to get an idea of the user
flow. Therefore, check out the
high-fidelity prototype of
Movie Tick in figma.

32. Accessibility considerations
1
Textual contents are added
wherever possible, for the
users who are vision
impaired.
2
Used icons to help make
navigation easier.
3
Used amber color instead
of green, along with red
for seats reservation. It
may help the users having
colorblindness.

33. ● Takeaways
● Next steps
Going forward

34. Takeaways
Impact:
The app Movie Tick meets user needs as they
expected.
One quote from user feedback:
“The app allows me to see the positions of the
seats and reserve seats that I wish. It also
displays movie schedules and information as
well. I will definitely use this app for seat
reservation whenever I’m in movie mood.”
What I learned:
'Movie Tick' is my first design in UX. Though this is not an epic
one, I learned a lot as a beginner. It is always good to follow steps
one by one when creating a design. Rather than jumping
straightaway into visual designs (high fidelity prototype), it is good
to begin with paper wireframes and upgrades little by little.
Keeping the user with us along the journey is another key to the
success of a design. These facts bring out a successful product
with less time and cost than expected.

35. Next steps
1
Conduct more user
research to determine any
new areas of need.

36. Let’s connect!
Thank you for your time reviewing my work!
If you’d like to see more or get in touch, my contact information is provided below.
Email: Chathu.rash97@.com

37. Thank you!