UI/UX Design Report: mCinema Mobile Application Screens and Navigation

Desklib provides past papers and solved assignments. This report details the mCinema app's design.

Contents
INTRODUCTION...........................................................................................................................4
SIGN-UP SCREEN.........................................................................................................................5
LOGIN SCREEN.............................................................................................................................6
GOOGLE SCREEN.........................................................................................................................9
FACEBOOK SCREEN.................................................................................................................11
FORGET PASSWORD SCREEN.................................................................................................12
ENTER OTP SCREEN..................................................................................................................14
CHANGE PASSWORD SCREEN................................................................................................16
SUCCESSFULLY CHANGED PASSWORD SCREEN.............................................................17
SEAT SELECTION SCREEN......................................................................................................19
PAYMENT SCREEN....................................................................................................................20
CARD DETAILS SCREEN..........................................................................................................22
PAY SCREEN...............................................................................................................................23
TICKET RECEIPT SCREEN........................................................................................................26
HOME SCREEN...........................................................................................................................27
FIND SHOW SCREEN.................................................................................................................30
MOVIE SCREENS........................................................................................................................33
THEATRES SCREENS................................................................................................................35
OFFER SCREEN..........................................................................................................................38
BOOKING SCREEN.....................................................................................................................38
EXPERIENCE SCREEN...............................................................................................................39
THANKYOU SCREEN................................................................................................................41
ALERT SCREEN..........................................................................................................................42
SUPPORT SCREEN.....................................................................................................................42
SETTINGS SCREEN....................................................................................................................44
FOOTER........................................................................................................................................45
CHART..........................................................................................................................................46
TABLE..........................................................................................................................................47
Conclusion.....................................................................................................................................48
References......................................................................................................................................49

Figure 1: Sign-in Screen with annotations.......................................................................................5
Figure 2: Sign-up to Home Screen..................................................................................................6
Figure 3: Sign-up to Login Screen...................................................................................................6
Figure 4: Login Screenwith annotations..........................................................................................7
Figure 5: Login to Home Screen.....................................................................................................8
Figure 6: Login to Google Screen...................................................................................................8
Figure 7: Login to Facebook Screen................................................................................................9
Figure 8: Login to Forget Password Screen....................................................................................9
Figure 9: Google Screen with Annotations...................................................................................10
Figure 10: Google to Home Screen...............................................................................................11
Figure 11: Facebook Screen with Annotations..............................................................................11
Figure 12: Facebook to Home Screen...........................................................................................12
Figure 13: Forget Password Screen with Annotations..................................................................13
Figure 14: Forget Password to Enter OTP Screen.........................................................................14
Figure 15: Enter OTP Screen with Annotation..............................................................................15
Figure 16: Enter OTP to Change Password Screen.......................................................................16
Figure 17: Change Password Screen with Annotations.................................................................16
Figure 18: Change Password to Successfully Changed Password Screen....................................17
Figure 19: Successfully Changed Password Screen......................................................................18
Figure 20: Successfully Password Changed to Home Screen.......................................................19
Figure 21: Seat Selection Screen with Annotations......................................................................19
Figure 22: Seat Selection to Payment Screen................................................................................20
Figure 23: Payment Screen with Annotations...............................................................................21
Figure 24: Payment to Card Details Screen...................................................................................22
Figure 25: Card Details Screen with Annotations.........................................................................22
Figure 26: Card Details to Pay Screen...........................................................................................23
Figure 27: Pay Screen with Annotations.......................................................................................24
Figure 28: Pay to Ticket Receipt Screen.......................................................................................25
Figure 29: Ticket Receipt Screen with Annotations......................................................................26
Figure 30: Home Screen with annotations.....................................................................................27
Figure 31: Home Screen to find the show.....................................................................................28
Figure 32: Home screen to Offers.................................................................................................28
Figure 33: Home Screen to Bookings............................................................................................28
Figure 34: Home to mCinema Experience....................................................................................29
Figure 35: Home screen to Support screen....................................................................................29
Figure 36: Home Screen to settings...............................................................................................29
Figure 37: Find Show screen.........................................................................................................30
Figure 38: Navigation (a)...............................................................................................................31
Figure 39: Navigation (b)..............................................................................................................31
Figure 40: Navigation (c)...............................................................................................................32
Figure 41: Navigation (d)..............................................................................................................32
Figure 42: Movie Screen (a)..........................................................................................................33
Figure 43: (b).................................................................................................................................34
Figure 44: (c).................................................................................................................................34
Figure 45: (d).................................................................................................................................35

Figure 46: Theatre (a)....................................................................................................................36
Figure 47: Theatre (b)....................................................................................................................36
Figure 48: Theatre (c)....................................................................................................................37
Figure 49: Theatre (d)....................................................................................................................37
Figure 50: Offer page.....................................................................................................................38
Figure 51: Bookings screen...........................................................................................................39
Figure 52: mCinema Experience screen........................................................................................40
Figure 53: Navigation (a)...............................................................................................................41
Figure 54: Navigation (b)..............................................................................................................41
Figure 55: Support screen..............................................................................................................42
Figure 56: Navigation (a)...............................................................................................................43
Figure 57: Settings Screen.............................................................................................................44
Figure 58: Home icon on Footer....................................................................................................45
Figure 59: Dollar icon on Footer...................................................................................................45
Figure 60: Bars icon on Footer......................................................................................................45
Figure 61: Chart.............................................................................................................................46

INTRODUCTION
The report contains the proper description of the application which is created by using the
Balsamiq tool for the overall design of the application which is based on a cinema application
named as “mCinema”. In this report, the navigations and every screen are explained with the
components that are present in the application. Their functionalities are present with the help of
screenshots and annotation that make the explanation clear and concise.

SIGN-UP SCREEN
Figure 1: Sign-in Screen with annotations
Components used-
Components that are used in Sign-up screen are:
Text areas-Text Area is the first component that is being used here to show details such as the
Username, Password, Contact number as well as Email-id. Text area is also used to represent the
logo and name of the Cinemai.e mCinema.
Button-A button is also being used here in order to make the user get registered to the app of
mCinema.
Purpose- The Purpose of this screen is to make the users allow to get registered to the app and
take the advantages of making the online bookings for the movies they wish to watch.
Description-This screen describes the registration process of the new user and also takes the
already registered users to the login screen. The user can enter the asked information to get
registered to the app.
Navigation-

Figure 2: Sign-up to Home Screen
Figure 3: Sign-up to Login Screen
LOGIN SCREEN

Figure 4: Login Screenwith annotations
Components used-
Components that are used in Login screen are:
Text areas-Text Area is the first component that is being used here to enter the details such as
the Username and the Password.
Button-A Login button is also being used here in order to make the user get enteredinto the app
of mCinema.
Purpose- The Purpose of this screen is to make the users allow to get logged in and take the
advantages of making the online bookings for the movies they wish to watch.
Description-This screen describes the login process of the already registered users and also
helps the users to get logged in using the Facebooks or google account. It allows the user to get
entered into the home screen as well. The screen also helps if the user forgets the password and
allows them to change their password.
Navigation-

Figure 5: Login to Home Screen
Figure 6: Login to Google Screen

Figure 7: Login to Facebook Screen
Figure 8: Login to Forget Password Screen
GOOGLE SCREEN

Figure 9: Google Screen with Annotations
Components used-
Components that are used in Google screen are:
Text areas-Text Area is the first component that is being used here to show the message of
Logging in with Google.
Button-A Continue button is also being used here in order to make the user get enteredinto the
app of mCinema.
Link- Link is also mentioned in order to cancel the login process.
Purpose- The Purpose of this screen is to make the users allow to get logged in by using his/her
google account and take the advantages of making the online bookings for the movies they wish
to watch.
Description-This screen describes the login process of the already registered users and also
helps the users to get logged in using the google account. It allows the user to get entered into the
home screen as well.
Navigation-

Figure 10: Google to Home Screen
FACEBOOK SCREEN
Figure 11: Facebook Screen with Annotations
Components used-
Components that are used in Facebook screen are:
Text areas-Text Area is the first component that is being used here to show the message of
Logging in with Facebook account.

Button-A Continue button is also being used here in order to make the user get enteredinto the
app of mCinema.
Link- Link is also mentioned in order to cancel the login process.
Purpose- The Purpose of this screen is to make the users allow to get logged in by using his/her
Facebook account and take the advantages of making the online bookings for the movies they
wish to watch.
Description-This screen describes the login process of the already registered users and also
helps the users to get logged in using the Facebook account. It allows the user to get entered into
the home screen as well.
Navigation- ‘
Figure 12: Facebook to Home Screen
FORGET PASSWORD SCREEN