ITC504 Assignment-1: Interface Usability Design Concept

This assignment presents two alternative design concepts for a mobile application for a local farm shop. Alternative 1 focuses on a traditional layout with separate screens for each function, while Alternative 2 emphasizes a more visually appealing and user-friendly interface with a consistent header and footer across all pages. Both alternatives address the core requirements of selling products, booking restaurant seats, and providing easy navigation. The assignment analyzes the strengths and weaknesses of each alternative, highlighting the usability principles applied in Alternative 2, and ultimately recommends Alternative 2 as the preferred design due to its improved graphical user interface, social connectivity features, and consistent navigation.

ITC504 Assignment-1
INTERFACE USABILITY
DESIGN CONCEPT
Student Name: Mohammed Ikram Ullah Khan
Student No: 11644124

Alternative -1 / Screen-1

Alternative -1 / Screen-1 Description
• Purpose: It is the landing page of our android
application, when a user opens up this application it is
the first page which is going to be open up.
• Components use: I made use of images, labels,
menu bar, input text and icons in screen 1.
• What user can do: Menu bar provides user
accessibility to navigate to different pages, cart icon help
user to view added items, category images gives user brief
idea about what this applications mainly deals with.

Alternative -1 / Screen-2

Alternative -1 / Screen-2 Description
Purpose: This page gives a brief description about the company.
Components use: I made use of images, labels, menu bar, input
text , text content and icons in screen 2.
What user can do: About us provide the user description about the
history of company .I have provided the main menu bar for easy navigation for
user.

Alternative -1 / Screen-3

Alternative -1 / Screen-3 Description
Purpose: This is the contact us page for our customers to
interact with company officials .
Components use: I made use of images, labels, menu bar, input
text and icons in screen 3.
What user can do: contact us page help the users, if they want
contact the company officials through mails or phone number . I have
provided the main menu bar for easy navigation for user

Alternative -1 / Screen-4

Alternative -1 / Screen-4 Description
Purpose: This is the product page for our customers to get
details of product of our company .
Components use: I made use of images, labels, menu bar, input
text, combo box and icons in screen 4.
What user can do: User can buy any product from product list.
User can select the quantity and can view price respectively for
each product. I have provided the main menu bar for easy
navigation for user

Alternative -1 / Screen-5

Alternative -1 / Screen-5 Description
Purpose: This is the help page for our customers, for commonly
arising problems.
Components use: I made use of labels, menu bar, input text,
combo box and icons in screen 5.
What user can do: User can access through this page, for
commonly arising problems while using application without much
complications. User will get brief and crisp solution for his/her
problem.

Alternative -1 / Screen-6

Alternative -1 / Screen-6Description
Purpose: This is the cart page for our customers, which shows all
the selected products by the customer and payment details are
included in this page.
Components use: I made use of labels, menu bar, input text,
combo box and icons in screen 6.
What user can do: user can view all the added items in the cart,
User can give the payment details for buying these products

Alternative -1 / Screen-7

Alternative -1 / Screen-7 Description
Purpose: This is the login page for our customers. Customer have
to first authorise before buying any product or book a seat.
Components use: I made use of labels, menu bar, input text and
icons in screen 7.
What user can do: User can give his/her login credentials for
authorising. A menu bar is given for easy navigation between
different pages. Forgot password is given for user, if somehow
user forgets his/her password for account.

Alternative -1 / Screen-8

Alternative -1 / Screen-8 Description
Purpose: this is “book a seat” for our customers to book a seat in
a restaurant.
Components use: I made use of labels, images, menu bar, input
text and icons in screen 8.
What user can do: This page allows the user to book number of
seats in the restaurant, user is allowed to provide the occasion of
the event so that catering should be done accordingly. Payment
button is given for our customer for their ease.

Alternative -1 / Screen-9

Alternative -1 / Screen-9 Description
Purpose: This page is for registering users to our application.
Components use: I made use of labels, menu bar, input text and
buttons screen 9.
What user can do: User can give all the required details under
this screen which are necessary for authorization. User can even
go to login page using login button . User can navigate to different
pages using menu bar.

Alternative -2 / Screen-1

Alternative -2 / Screen-1 Description
Purpose: This will provide a good and look view to
customers. This will be the landing page for customers.
Components use: Spinner, label in alternative 2/screen 2.
What user can do: This will arouse the curiosity of
customers of what this application will give to them.

Alternative -2 / Screen-2

Alternative -2 / Screen-2 Description
Purpose: This will be the home page for our application. This
will provide customer a brief description of what our
application provide to our customers.
Components use: Spinner, label, images and icons in
alternative 2/screen 2.
What user can do: Users can select any products of their
choice. User can select cart icon to view the products added
to their cart. Users can scroll down to view other products.

Alternative -2 / Screen-3

Alternative -2 / Screen-3 Description
Purpose: This is for authorization of customers .
Components use: Spinner, label, images, buttons and icons
components are used in alternative 2/screen 3.
What user can do: Users can enter login credentials to
get authorized. There are options for Facebook login or
Google login. Users can click on forgot password in case they
forgot the password

Alternative -2 / Screen-4

Alternative -2 / Screen-4 Description
Purpose: This page is for registering users to our application.
Components use: I made use of labels, menu bar, input text
and buttons in screen 4 alternative 2.
What user can do: User have to give all the required details
under this screen which are necessary for authorization. User
can even go to login page using login button . User can
navigate to different pages using menu bar. Menu bar is given
for easy navigation for customers.

Alternative -2 / Screen-5

Alternative -2 / Screen-5 Description
Purpose: This page gives a brief description about the
company. What is the company motto. What are the goals of
company.
Components use: I made use of images, labels, menu bar,
input text , text content and icons in screen 5.
What user can do: About us provide the user description about
the history of company .I have provided the main menu bar for easy
navigation for user. Users can view all the services which the
company provides.

Alternative -2 / Screen-6

Alternative -2 / Screen-6 Description
Purpose: This page tell all the physical location and contact
details of company
Components use: I made use of images, labels, menu bar,
street map, pin map input text , text content and icons in
screen 6.
What user can do: contact us page help the users, if they want
contact the company officials through mails or phone number. Users
can use the given street map to locate us. I have provided the main
menu bar for easy navigation for user.

Alternative -2 / Screen-7

Alternative -2 / Screen-7 Description
Purpose: This page gives all the description of each and
every product available
Components use: I made use of images, labels, menu bar,
combo box, input text and icons in screen 7.
What user can do: User can view each product individually.
User can select the quantity of product he wants buy. There is
cart button on the top where all the selected gets stored up.

Alternative -2 / Screen-8

Alternative -2 / Screen-8 Description
Purpose: This page gives the details of selected products
which are added to the cart like the quantity of products, total
price of products and product name.
Components use: I made use of buttons, data grid, labels,
menu bar, input text and icons in screen 8.
What user can do: Users can view the products before
making payment. User is allowed to remove any product at
this time before making payment.

Alternative -2 / Screen-9

Alternative -2 / Screen-9 Description
Purpose: This page is known as checkout page as a final
step of buying product process.
Components use: I made use of buttons, data grid, labels,
menu bar, alert box, input text and icons in screen 9.
What user can do: Users have to either signup or login
before making payment to their products to bypass the
authorization gate. After signup/login , user is allowed to
select payment method and give the details accordingly.

Alternative -2 / Screen-10

Alternative -2 / Screen-10 Description
Purpose: This screen lets the user to book seats in
restaurant.
Components use: I made use of buttons, data grid, labels,
menu bar, combo box, input text and icons in screen 9.
What user can do: Users are allowed to select number of
seats ain restaurant and can select for which occasion he/she
wants to book seats. After selecting all the required details,
user can make easy payment from his/her place.

Alternative -2 / Screen-11

Alternative -2 / Screen-11 Description
Purpose: This is the help page for our customers, for
commonly arising problems.
Components use: I made use of labels, menu bar, input
text, combo box and icons in screen 11/alternative 2.
What user can do: User can access through this page, for
commonly arising problems while using application without
much complications. User will get brief and crisp solution for
their problems.

Reasons for Alternative-1
• The whole application is designed according to the
requirements given by the user.
• The primary objective of local farm shop is to sell their
products. The subsidiary requirements is to book seats in a
restaurant and navigation from each page is proper.

Reasons for Alternative-1
1. When a user clicks on application from its smart phone, some portion of time is
taken by the application to stack all the web app pages.
2. Client can effortlessly switch between any pages of application.
Whenever a client clicks on products from menu bar, application
will jump to products page without much adherence.
3. In case client confronts any sort of complications while using the
applications, client can either jump to contact us page to post
any enquiries or can move to help page.

Reasons for Alternative-2
• The second alternative is more attractive has basic outline
and is designed according to user-friendly environment.
• It can utilized to satisfy all the subsidiary requirements of
the client.
• Some sort of social connectivity is also given in alternative
2 while doing login.
• The basic idea in alternative 2 is that all the pages must
be accessible to user without any link-breakage which.

Heuristics principles in Alternative 2
• In this alternative, all the required usability standards
were adopted.
• The foremost rule is consistency all the pages have
same header and footer.
• Also have utilized horizontal bar, vertical bar, menu
bar and logo icon which is another usability.
• No link is broken between any page which is again
another important usability.

Recommendation
Alternative 2 is chosen over Alternative 1 in view of
the accompanying reasons-
• Graphical user interface is much better compared to
alternative 1.
• In register page, one more option is added that is existing
users can login through this page.
• Proper functional and aligned buttons, labels and icons.
• The validation rule is applied that is without login user can
not proceed beyond cart page.
• In login page two more buttons are added that is you can
either login using Facebook or Google. There is option for
signup page

to be continue…
• Cart icon and search icon is added to each and every page
as compared to alternative 1 .
• A separate page is designed for payment process to avoid
different issues.
• All the pages are consistent and linked to each other
without any breakage.
• Street map with map pin is added in contact us page for
displaying the physical location on map.

References
• Medium (2016). 7 easy steps on getting started in
Balsamiq – Design + Sketch – Medium. Retrieved 16 March
2018, from https://medium.com/sketch-app-sources/7-easy-
steps-on-getting-started-in-balsamiq-dc9ce71f7ea5
• Nielsen, J. (2013). 10 Usability Heuristics for User Interface
Design | Design Principles FTW. Retrieved 6 March 2018,
from https://www.designprinciplesftw.com/collections/10-
usability-heuristics-for-user-interface-design.
• Shaver, K. (2012). 9 Excellent Tools for Design
Mockups. Retrieved 16 March 2018, from
https://mashable.com/2012/06/07/mockup-tools/#z5BzrTmE
MZqG