UI Design Report: Cinema Hall Tablet App for ITC504

Desklib provides past papers and solved assignments. This report details a cinema hall booking app's UI design.

ITC504 ASSESSMENT 2

Contents
Introduction......................................................................................................................................3
Description.......................................................................................................................................4
Home page...................................................................................................................................4
Guest page...................................................................................................................................6
Movie Search screen....................................................................................................................7
List of theaters.............................................................................................................................9
Movie details.............................................................................................................................11
Book Now..................................................................................................................................13
Register......................................................................................................................................15
Register with Gmail...................................................................................................................16
Register with Facebook.............................................................................................................18
Manual Registration...................................................................................................................19
Membership Selection...............................................................................................................20
Membership Confirmation.........................................................................................................22
User Login.................................................................................................................................23
User Details...............................................................................................................................25
Movie Selection.........................................................................................................................26
Seat Selection.............................................................................................................................28
Confirm Ticket...........................................................................................................................30
Pay Now.....................................................................................................................................32
Cash Payment............................................................................................................................33
Payment Page.............................................................................................................................34
Payment Confirmation...............................................................................................................36
Booking Confirmation...............................................................................................................37

Print Ticket................................................................................................................................39
Parking.......................................................................................................................................40
Extended Parking.......................................................................................................................42
Print Parking Ticket...................................................................................................................44
Regenerate Print Ticket.............................................................................................................45
Check Seat Details.....................................................................................................................47
Staff Page...................................................................................................................................48
Help and Information Page........................................................................................................50
Feedback and Suggestion Page..................................................................................................51
Conclusion.....................................................................................................................................52

List of figures
Figure 1: Home Page.......................................................................................................................7
Figure 2: Home Page navigation.....................................................................................................8
Figure 3: Guest Page........................................................................................................................9
Figure 4: Guest Page navigation....................................................................................................10
Figure 5: Movie Search page.........................................................................................................11
Figure 6: List of theaters................................................................................................................12
Figure 7: Theater list page navigation...........................................................................................13
Figure 8: Movie details..................................................................................................................14
Figure 9: Movie details page navigation.......................................................................................15
Figure 10: Book Now page............................................................................................................16
Figure 11Book Now page navigation............................................................................................17
Figure 12: Register page................................................................................................................18
Figure 13: Register with Gmail.....................................................................................................19
Figure 14: Register with Gmail navigation...................................................................................20
Figure 15: register with Facebook.................................................................................................21
Figure 16Manual registration........................................................................................................22
Figure 17: Membership selection..................................................................................................23
Figure 18Membership selection navigation...................................................................................24
Figure 19: Membership confirmation............................................................................................25
Figure 20: User login.....................................................................................................................26
Figure 21: User login navigation...................................................................................................27
Figure 22: User details...................................................................................................................28
Figure 23: Movie Selection...........................................................................................................29
Figure 24: Movie selection navigation..........................................................................................30
Figure 25: Seat selection................................................................................................................31
Figure 26: Seat selection navigation..............................................................................................32
Figure 27: Confirm ticket..............................................................................................................33
Figure 28: Confirm ticket navigation............................................................................................34
Figure 29: Pay now........................................................................................................................35

Figure 30: Cash payment...............................................................................................................36
Figure 31: Payment page...............................................................................................................37
Figure 32: Payment page navigation.............................................................................................38
Figure 33: Payment confirmation..................................................................................................39
Figure 34: Booking confirmation..................................................................................................40
Figure 35: Booking confirmation navigation................................................................................41
Figure 36: Print ticket....................................................................................................................42
Figure 37: Parking.........................................................................................................................43
Figure 38: Parking page navigation...............................................................................................44
Figure 39: Extended parking.........................................................................................................45
Figure 40: Extended parking navigation........................................................................................46
Figure 41: Print parking ticket.......................................................................................................47
Figure 42: Regenerate print ticket.................................................................................................48
Figure 43: Regenerate print ticket navigation...............................................................................49
Figure 44: Check seat details.........................................................................................................50
Figure 45: Staff page.....................................................................................................................51
Figure 46: Staff page navigation....................................................................................................52
Figure 47: Help and Information page...........................................................................................53
Figure 48: Feedback and Suggestion page....................................................................................54

Introduction
UI application is defined as user-friendly applications for the user in order to provide easy
navigation, better functionality, and flexibility for the user to perform a certain task. Here, in this
report, UI interface for the tablet has been designed and developed for a cinema hall.
The main aim of this report is to enhance the knowledge and skills of an individual with the
development of better user interface applications using different tools.

Description
Home page
Figure 1: Home Page
Purpose: To welcome and attract all the users/visitors.
Components used: Icon, button, breadcrumbs, and text.
Function: To welcome visitors and explain the name of the cinema hall.
The home page of the cinema hall application designed for the tablet has been shown in above
image which has been designed as a welcome screen where the user can see the name of the
cinema hall, its logo, and buttons to log in.

Figure 2: Home Page navigation

Guest page
Figure 3: Guest Page
Purpose: To help the visitor with available and upcoming movie details.
Function: Show all the available and upcoming movie images along with the search option for
the user to search for any specific movie.
Components used: Image, text, button, icon, breadcrumbs and search box.
Guest page of the cinema hall application has been shown above which has been designed on
Balsamic tool to allow a visitor with the search for any specific movie along with all the details
of movies available on different theaters as well as images of upcoming movies. It has buttons to
help with login for the registered user as well as new visitors by clicking on the button.

Figure 4: Guest Page navigation
Movie Search screen
Movie search screen has been shown above which was developed on the Balsamic tool to show
the result of the searched movie and all the details related to the searched movie. It has the logo
of the cinema hall in the top center of the screen and breadcrumbs to guide the user for the
different screen they already visited and for the navigation.

Figure 5: Movie Search page
Purpose: To show all the details of the movie.
Components used: Text, image, icon, breadcrumbs, search box and buttons.
Function: Show the search result for the movie along with details of the movie.

List of theaters
Figure 6: List of theaters
This screen show list of all the theaters and screens available in the cinema hall including details
of the movie currently running on those screens. It has a button on the top right corner by which
user can go to the home page at any time and also has a button to check more details of the
selected movie.
Purpose: To show the list of theaters and screens available.
Components used: Test, image, number, breadcrumbs, an icon.
Function: Show the complete list of theaters available along with movie and screen details.