Team Design Project: Cinema Ticket Booking App Interface for ITC 504

Desklib provides past papers and solved assignments. This project details a cinema ticket booking app's interface design.

ITC 504
Interface Useability
Assessment 2
Team Design
Team members:
Mohammed Shoaib Ali
Mujeeb Uddin Mohammed
Abdul Qadeer Mohammed

Contents
Introduction......................................................................................................................................3
Question 3........................................................................................................................................4
Question 5......................................................................................................................................65
Conclusion.....................................................................................................................................66
References:....................................................................................................................................67

List of figures:
Figure 1 Welcome Screen................................................................................................................6
Figure 2 Login screen......................................................................................................................7
Figure 3 Login Screen Navigation...................................................................................................8
Figure 4 Forgot password screen.....................................................................................................9
Figure 5 Forgot Password Screen Navigation...............................................................................10
Figure 6 Reset password screen.....................................................................................................11
Figure 7 Reset password screen Navigation..................................................................................12
Figure 8 Re-login screen................................................................................................................13
Figure 9 Re-login screen Navigation.............................................................................................14
Figure 10 Sign up Screen...............................................................................................................15
Figure 11 Sign up Screen Navigation............................................................................................16
Figure 12 Google+ Sign Up Screen...............................................................................................17
Figure 13 Google+ Sign Up Screen Navigation............................................................................18
Figure 14 Select account Screen....................................................................................................19
Figure 15 Select account Screen Navigation.................................................................................20
Figure 16 Facebook Sign Up Screen.............................................................................................21
Figure 17 Facebook Sign Up Screen Navigation..........................................................................22
Figure 18 Home Screen.................................................................................................................23
Figure 19 Home Screen Navigation..............................................................................................24
Figure 20 choose date Screen........................................................................................................25
Figure 21 Choose date Screen Navigation.....................................................................................26
Figure 22 Select movie Screen......................................................................................................27
Figure 23 Select movie Screen Navigation..................................................................................28
Figure 24 Select time Screen.........................................................................................................29
Figure 25 Select time Screen Navigation......................................................................................30
Figure 26 Select no. of seat Screen................................................................................................31
Figure 27 Select no. of seats Screen Navigation..........................................................................32
Figure 28 Select seat Screen..........................................................................................................33
Figure 29 Select seats Screen Navigation.....................................................................................34
Figure 30 Customer details Screen................................................................................................35
Figure 31 Customer details Screen Navigation.............................................................................36
Figure 32 Payment method Screen................................................................................................37
Figure 33 Payment method Screen Navigation.............................................................................38
Figure 34 Card details screen........................................................................................................39
Figure 35 Card details screen Navigation......................................................................................40
Figure 36 Confirm Card screen.....................................................................................................41
Figure 37 Confirm Card screen Navigation..................................................................................42
Figure 38 Enter OTP screen..........................................................................................................43
Figure 39 Enter OTP screen Navigation........................................................................................44

Figure 40 Select bank screen.........................................................................................................45
Figure 41 Select bank screen Navigation......................................................................................46
Figure 42 Cash payment screen.....................................................................................................47
Figure 43 Cash payment screen Navigation..................................................................................48
Figure 44 Payment confirmation screen........................................................................................49
Figure 45 Payment confirmation screen Navigation....................................................................50
Figure 46 Ticket details Screen.....................................................................................................51
Figure 47 Ticket details Screen Navigation...................................................................................52
Figure 48 RePrint Ticket Screen....................................................................................................53
Figure 49 RePrint Ticket Screen Navigation................................................................................54
Figure 50 Check booked seat Screen.............................................................................................55
Figure 51 Check booked seats Screen Navigation.......................................................................56
Figure 52 Parking Page Screen......................................................................................................57
Figure 53 Parking Page Screen Navigation..................................................................................58
Figure 54 Parking details Screen...................................................................................................59
Figure 55 Parking details Screen Navigation................................................................................60
Figure 56 Parking Confirmed Screen............................................................................................61
Figure 57 Parking Confirmed Screen Navigation........................................................................62
Figure 58 Help screen....................................................................................................................63
Figure 59 Help screen Navigation................................................................................................64
Figure 60 feedback screen.............................................................................................................65
Figure 61 Feedback screen Navigation..........................................................................................66

Introduction
A local cinema hall owner has planned to develop a tables-based application to help its staff
member with a ticket booking system. As the staff members use to stand near the help desk for
the booking purposes, staff owner wants to help them and the customers in booking the tickets.
For this application, a design has been prepared using Balsamiq tool. There are several pages in
the design of this application which are meant to serve a lot of purposes like booking ticket,
extending the parking, getting help for any queries such as lost tickets or finding the parking, etc.
In this report, all the pages with their designs have been explained. The purpose of making the
design, components used in the design, function of the screen and uses of the screen has been
explained. Also, navigation between all the screens has been explained.

Question 3
Welcome Screen
Figure 1 Welcome Screen
Purpose - to let the user start with the cinema hall ticket booking app.
Components- cinema logo, label, button.
Function- this screen is just a simple screen and the first screen of the application. This screen is
present to welcome the user whether a staff member or a customer. The screen has made using
the cinema logo and cinema name. Also, a button named as "let's get started" is made to let the
user click on it so that he/she can move to the next page.

Login Screen
Figure 2 Login screen
Purpose- to help the user log into the app for further use.
Components- breadcrumbs, text input fields, button, cinema logo, and link.
Function- the screen is login page which will enable the users to log into the system. After a
user clicks on let's get started, the login screen will open up. The screen has username and
password which has been set by the user during sign up process. Hence the user can log into the
application and then he will be redirected to the home screen. The screen also has two links, one
for forgot password which is meant for the case if the user has forgotten his password, he/she can
click on the link to reset his password. Another link is meant to sign up the user for this app.

Figure 3 Login Screen Navigation

Forgot Password Screen:
Figure 4 Forgot password screen
Purpose- to help users who have forgotten the password.
Components- text input, breadcrumbs, cinema logo, button.
Function- the main purpose of the screen is to reset the password for all those users who had
trouble logging into the application. In this screen, the user will be asked to enter the username
so that he/she can reset his password. The screen has a text input field where the username will
be entered. Also, the cinema logo and cinema name have been kept on the screen to make the
screen more user-friendly and attractive.

Figure 5 Forgot Password Screen Navigation

Reset password screen
Figure 6 Reset password screen
Purpose- to help the users with resetting the forgotten password
Components- breadcrumbs, text input, text field, cinema logo, back button and reset button.
Function- the function of the screen is to help the user to reset his/her password. The screen has
two input fields, where the user can type his/her new password. Once entering the password,
another input field is present to repeat the password for confirmation. After the two types of
password matches successfully, the user can easily reset his/her password.

Figure 7 Reset password screen Navigation