ITC504 Project: Application Interface Usability and Design Concepts

This project presents two alternative design concepts for an application interface, focusing on usability and functionality. Alternative 1 and Alternative 2 are detailed with descriptions of each screen, outlining the purpose, interface components (labels, buttons, media containers, input text boxes, image containers, maps), and functionality of each screen, including home screen, search, menu, registration, login, product categories, product listings, product details, event booking, shopping cart, and user dashboard. The reasoning behind each alternative is provided, with Alternative 2 being recommended for its enhanced graphical design, user-friendliness, and additional functionalities. References to Balsamiq mockups are included, showcasing the design process. This document is available on Desklib, a platform offering study tools and solved assignments for students.

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