ITC504 Assignment 1: Mobile Application Design for a Food Delivery Service

ITC504
Assignment-1
Name: Asalath
Mohammed Khan
ID: 11619729

Alternative -1 / Screen-1

Alternative -1 / Screen-1
Description
• Purpose: This is the main home screen or the
index screen of the application
• Interface components: Labels, buttons and
media containers are used
• Description: This is the main and first page
through which user will interact.

Alternative -1 / Screen-2

Alternative -1 / Screen-2
Description
• Purpose: For searching products in the
application this is used.
• Interface components: Labels, input text
box and buttons are used.
• Description: By this search the user can
search any product on the application.

Alternative -1 / Screen-3

Alternative -1 / Screen-3
Description
• Purpose: This is the menu
• Interface components: Labels and
buttons are used
• Description: By this menu user can
communicate between different pages of
the application.

Alternative -1 / Screen-4

Alternative -1 / Screen-4
Description
• Purpose: This is for registration
purpose.
• Interface components: Labels, buttons
and input text box are used.
• Description: Using this register page
one can register himself/herself to the
application.

Alternative -1 / Screen-5

Alternative -1 / Screen-5
Description
• Purpose: To log in or sign in the
application.
• Interface components: Labels, input text
box and buttons are used.
• Description: This login page helps user
to get access to his/her profile on the
application by providing the user
credentials.

Alternative -1 / Screen-6

Alternative -1 / Screen-6
Description
• Purpose: This page fulfils the purpose of
product category.
• Interface components: Labels, image
containers and buttons are used.
• Description: This page categorises the
products in application in three
categories – food, gifts and wine.

Alternative -1 / Screen-7

Alternative -1 / Screen-7
Description
• Purpose: List of items for a particular
category are displayed.
• Interface components: Labels, image
containers and buttons are used.
• Description: User can view a long list of
similar products and can even add the
product directly to cart.

Alternative -1 / Screen-8

Alternative -1 / Screen-8
Description
• Purpose: This page shows detailed
information about individual product.
• Interface components: Labels, input text
box, image containers and buttons are
used.
• Description: This page helps user to put
one or more quantity of same product and
can view particular image galley of same
product.

Alternative -1 / Screen-9

Alternative -1 / Screen-9
Description
• Purpose: This page completes the
requirement of particular section for
events handled by the company.
• Interface components: Labels, input text
box, image containers and buttons are
used.
• Description: Here user can book the
restaurant or catering service for
particular dates.

Alternative -1 / Screen-
10

Alternative -1 / Screen-10
Description
• Purpose: The total cart items are shown
here with their prices and quantity.
• Interface components: Labels, maps and
buttons are used.
• Description: User gets a digital invoice
here with including detailed information
about the products ordered and user
can also apply loyalty offers to get
discount.

Alternative -1 / Screen-11

Alternative -1 / Screen-11
Description
• Purpose: User dashboard lets user to
edit their profile.
• Interface components: Labels, input text
box, image container, maps and buttons
are used.
• Description: This is the user dashboard
which lets user to manage their loyalty
offer or credits, list of purchased items
and even addresses.

Alternative -2 / Screen-1

Alternative - 2 / Screen-1
Description
• Purpose: This is the main home screen
or the index screen of the application
• Interface components: Labels, buttons
and media containers are used
• Description: This is the main and first
page through which user will interact.

Alternative - 2 / Screen-2

Alternative -2 / Screen-2
Description
• Purpose: For searching products in the
application this is used.
• Interface components: Labels, input text
box and buttons are used.
• Description: By this search the user can
search any product on the application.

Alternative -2 / Screen-3

Alternative -2 / Screen-3
Description
• Purpose: This is the menu of the
application.
• Interface components: Labels and
buttons are used
• Description: By this menu user can
communicate between different pages of
the application.

Alternative -2 / Screen-4

Alternative -2 / Screen-4
Description
• Purpose: This is for registration
purpose.
• Interface components: Labels, buttons
and input text box are used.
• Description: Using this register page
one can register himself/herself to the
application.

Alternative -2 / Screen-5

Alternative -2 / Screen-5
Description
• Purpose: To log in or sign in the
application.
• Interface components: Labels, input text
box and buttons are used.
• Description: This login page helps user
to get access to his/her profile on the
application by providing the user
credentials.

Alternative -2 / Screen-6

Alternative -2 / Screen-6
Description
• Purpose: This page fulfils the purpose of
product category.
• Interface components: Labels, image
containers and buttons are used.
• Description: This page categorises the
products in application in three
categories – food, gifts and wine.

Alternative -2 / Screen-7

Alternative -2 / Screen-7
Description
• Purpose: List of items for a particular
category are displayed.
• Interface components: Labels, image
containers and buttons are used.
• Description: User can view a long list of
similar products and can even add the
product directly to cart.

Alternative -2 / Screen-8

Alternative -2 / Screen-8
Description
• Purpose: This page shows detailed
information about individual product.
• Interface components: Labels, input text
box, image containers and buttons are
used.
• Description: This page helps user to put
one or more quantity of same product
and can view particular image galley of
same product.

Alternative -2 / Screen-9

Alternative -2 / Screen-9
Description
• Purpose: The total cart items are shown
here with their prices and quantity.
• Interface components: Labels, maps and
buttons are used.
• Description: User gets a digital invoice
here with including detailed information
about the products ordered and user
can also apply loyalty offers to get
discount.

Alternative -2 / Screen-
10

Alternative -2 / Screen-10
Description
• Purpose: This is view facility and for
booking the restaurant.
• Interface components: Use of image,
labels, menu and search.
• Description: This page view the list of
restaurants and can also be used for
booking them.

Alternative -2 / Screen-
11

Alternative -2 / Screen-11
Description
• Purpose: User dashboard lets user to
edit their profile.
• Interface components: Labels, input text
box, image container, maps and buttons
are used.
• Description: This is the user dashboard
which lets user to manage their loyalty
offer or credits, list of purchased items
and even addresses.

Reasons for Alternative-1
Reason:
• The application fulfils the all the
requirements
Like – login page, register page,
product category page, cart etc.
• The clean nature of application makes
application more responsive.
• It is simple basic application which is
user friendly.

Reasons for Alternative-2
Reason:
• This is application contains great graphical
design than alternative 1
• The application fulfils the all the requirements
Like – login page, register page, product
category page, cart etc.
• The interface of the application is user friendly
and creates a great impression about the
company.

Recommendation
Recommended design is alternative 2. Reasons:
• Alternative design 2 contains more graphical
approach to make the application better
looking. The application creates a great
impression is front of user and its easier for
user to understand the content.
• It got extra functionalities like filtering
products, better product gallery and many
more.

References
• Tranfici, A. (2013). Build a Project Mockup Using
Balsamiq. Sitepoint. Retrieved from
https://www.sitepoint.com/build-a-project-
mockup-using-balsamiq/
• Viking Code School Prep. (2018). Using Balsamiq
for Mockups. Retrieved from http://
www.vikingcodeschool.com/web-design-basics/us
ing-balsamiq-for-mockups
• Slideshare. (2014). Introduction to Balsamiq
Mockups. Retrieved from
https://www.slideshare.net/e2logy/introduction-
to-balsamiq-mockups-e2logy