Interface Design Report: Stock Management and Employee Roster Systems

This report provides a detailed interface design for both stock management and employee roster systems. It covers various aspects, including login pages, password reset functionalities, item and supplier pages in the stock management system, and employee and roster management pages. The design includes visual representations of each page, outlining the user interface elements and their functions. The report also describes the different functionalities such as adding, editing, and deleting items and employees, as well as managing employee shifts. The design emphasizes user-friendly navigation and efficient data management, aiming to provide a comprehensive overview of the interface design for both systems. The document is a valuable resource for understanding the practical application of interface design principles in the context of inventory and employee management systems, illustrated with screenshots and explanations of each interface component and its purpose.

Running head: INTERFACE DESIGN
Interface Design of Stock Management System and
Employee Roster System
Name of the Student
Name of the University
Author’s note

1INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
Table of Contents
Stock Management System:...........................................................................................2
1. Login:.........................................................................................................................2
2. Change Password:......................................................................................................2
3. Item Page:...................................................................................................................3
4. Supplier Page:............................................................................................................5
5. Logout:.......................................................................................................................7
Roster Management System:..........................................................................................8
1. Login:.........................................................................................................................8
2. Change Password:......................................................................................................9
3. Item Page:.................................................................................................................10
4. Employee Page:........................................................................................................11
5. Logout:.....................................................................................................................13

2INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
Stock Management System:
1. Login:
Figure 1: The Login Page of Stock Management System
(Source: Created by Author)
In the login page of this stock management system two aspects are seen in the
username and password. After entering the detail, the user needs to click the login icon. If
anyhow wrong details are entered, then user can make necessary changes by the help of reset
button. Just below the input box there is a hyperlink for forget password option where user
can change his/ her if forgotten.
2. Change Password:

3INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
Figure 2: The Password Set Page of Stock Management System
(Source: Created by Author)
When the user clicks on the forget password link, then a new menu box comes into
picture which has boxes like username, old password, new password and confirm password.
For changing the new password, the user needs to provide username, old password. After
providing all the necessary details, user will setup the new password.
3. Item Page:

4INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
Figure 3: The Item List Page of Stock Management System
(Source: Created by Author)
Figure 4: The Item Edit Page of Stock Management System
(Source: Created by Author)
The edit Item page mainly comprises of different things like product ID, product
name, max level, min level, present stock, category and lastly supplier ID.
Figure 5: The Item Add Page of Stock Management System

5INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
(Source: Created by Author)
In this page of Stock management system, three options are provided on single page
that is Item List, Edit Item and Add Item. Different option like Item List, Edit Item and Add
Item has been prepared by making use of JavaScript. Out of the three given option, when a
single one is clicked, the other two will automatically be switched off. In Item list page, there
are many option like product ID, product name, max level, min level, category and lastly
customer ID has been provided.
4. Supplier Page:
Figure 6: The Supplier List Page of Stock Management System
(Source: Created by Author)

6INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
Figure 7: The Supplier Edit Page of Stock Management System
(Source: Created by Author)
In the Edit supplier page, there are different kind of parameters are provided like
supplier ID, supplier name, email, address, city, state and lastly phone number. After entering
all the details user can easily click the submit button. If any data entered by user is incorrect
then the user needs to click reset button for making changes.
Figure 8: The Supplier Add Page of Stock Management System
(Source: Created by Author)

7INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
In the supplier page, a list of details is provided like suppler ID, supplier name, email,
address and phone number. In the end, an option has been provided with respect to Edit
option. In the Edit option user can easily make the required changes. The supplier Edit page
mainly comprises of Supplier ID, supply name, email, city, state and phone number.
5. Logout:
Figure 8: The Logout Popup of Stock Management System
(Source: Created by Author)
As soon as the user clicks on the login page, the user is successfully logged out of the
web page. As soon as logout of the webpage. a successful message of logout is displayed.
Figure 9: Item and Supplier Page before Login
(Source: Created by Author)
After successful logout from the system, user needs to click the login page and
provide necessary details for login into the system.

8INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
Roster Management System:
1. Login:
Figure 10: The Admin Login Page of Roster Management System
(Source: Created by Author)
Figure 11: The Employee Login Page of Roster Management System
(Source: Created by Author)

9INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
The login option of the roster management system is different from the stock
management system. The roster management system has a two links for admin login and
employee login. As the admin can register themselves, their login form has the password
change and register link. The employee login form has only the email and password enter
area and two buttons. The user can freely delete the inputted data using the reset button.
2. Change Password:
Figure 12: The Password Set Page of Roster Management System
(Source: Created by Author)
The password changing page can only be accessed from the login page link. This
password changing form has four input fields. The user name is required to identify which

10INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
user’s password is to be changed. The old password is for verifying if the same user is asking
for making the changes. The new password will be set as the password and confirm password
is for making sure that user knows what he is setting as password.
3. Item Page:
Figure 13: The Item Roster List Page of Roster Management System
(Source: Created by Author)
This pages shows the list of the employees working date and shift. The change button
is linked to the update page.
Figure 14: The Roster Edit Page of Roster Management System
(Source: Created by Author)

11INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
The edit page has fields for catching all the values of a shift. The shift id is for
catching which shift details to be changed. It is important to know the staff does not already
have a shift on same day.
Figure 15: The Roster Add Page of Roster Management System
(Source: Created by Author)
The adding page will allow the users to store the details of the shift. The username
suggests for which staff, the working shift details are entered. All of these forms have two
buttons. The submit buttons is for initializing the operation after the form is filled. If any field
is not entered, the form will not be submitted and an error message will be shown to the user.
4. Employee Page:

12INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
Figure 16: The Employee List Page of Roster Management System
(Source: Created by Author)
The employee list page will show the details of every employee of the organization.
The employee change link in the list is for redirecting the user to edit page.
Figure 7: The Employee Edit Page of Roster Management System
(Source: Created by Author)
The edit page is for updating the information of a single employee. This form has a
submit change button. The reset button can delete all the data inputted into the form and
make the form fields blank again.

13INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
Figure 18: The Employee Add Page of Roster Management System
(Source: Created by Author)
The adding employee is a form that allows the admin to store the details of the
employee into the system. This form also have two buttons.one for submitting the form and
one is for resetting.
5. Logout:
Figure 8: The Logout Popup of Stock Management System
(Source: Created by Author)
As soon as the user clicks on the login page, the user is successfully logged out of the
web page. As soon as logout of the webpage. a successful message of logout is displayed.

14INTERFACE DESIGN OF STOCK MANAGEMENT SYSTEM
Figure 9: Item and Supplier Page before Login
(Source: Created by Author)
After successful logout from the system, user needs to click the login page and
provide necessary details for login into the system.