KULLIYYAH OF INFORMATION & COMMUNICATION TECHNOLOGY

CSCI 1305 INTRODUCTION TO SOFTWARE ENGINEERING

SEMESTER <1, 2023/2024>
SECTION 03

ASSIGNMENT 2: SOFTWARE DESIGN & PROTOTYPING FOR

<PROJECT NAME>

PREPARED BY:

NAME MATRIC NO. PARTICIPATION

AHMAD FAHEEM BIN SHARIFUDDIN 2311771 100%

MUHAMMAD FARIS LUKMAN BIN
2319375 100%
MOHD JEFRI
MUHAMMAD ADLI BIN MOHAMAD
2314323 100%
TAMRIN
DANISH MIFZAL BIN MAHAZIR 2310327 100%

FARHAN AFFAN BIN S SALAHUDIN 2310215 100%

LECTURER

DR. AZLIN BINTI NORDIN

DUE

10 DECEMBER 2023
 Table of Contents

1 INTRODUCTION 3
2 ARCHITECTURE DIAGRAM 3
3 CLASS DIAGRAM 3
4 GRAPHICAL USER INTERFACE (GUI) DESIGN 3
4.1 GUI TOOL.................................................................................................................................................. 3
4.2 GUI DESIGN..............................................................................................................................................3
5 PROTOTYPING 3
5.1 PROTOTYPING TOOL.............................................................................................................................3
5.2 PROTOTYPING........................................................................................................................................ 4
6 LESSON LEARNED 4
6.1 LESSON-1 <The importance of designing GUI before prototyping>.................................................4
6.2 LESSON-2 <The importance of designing a good GUI design>........................................................4
6.3 LESSON-3 <The importance of designing a good prototype>........................................................... 4

2
1 INTRODUCTION

This assignment involves the architectural diagram about the following project called
SouvShop. The diagram shows the interactions between the user, the system, the manager and
lastly the database. Completed Class Diagram also involved in this assignment referring to the
previous assignment Class Diagram, whereby it shows the attributes and function for each class
in the system. Next is Graphical User Interface design that shows the manual of looks of the
web application that will be presented in the prototype. It explains completely on how the
options or the button appears in each interface. Lasty for the prototype, it shows the example on
how to access the web application to gain data and information as well as interact with the
database and the system

2
ARCHITECTURE DIAGRAM

Figure 2.1 : Layered Architecture Diagram

3
Figure 2.1 shows the layered architecture diagram for the project SouvShop. The diagram
contains the core layer, utility layer, application layer and user interface layer. For the core layer,
every detail that has been inserted by every user that uses the system is being stored in the
data storage for further usage in checkout or delivery tasks. In addition, the utility layer contains
the updated information for the souvenir that is available for sale, such as the stocks and their
characteristics. On top of that, the application layer is the layer that requires verification to gain
access to the system by giving the important credentials to be verified. In a nutshell, the user
interface layer is the layer that is shown in the interface of the system for the user to use the
functions to attract with the system to perform tasks.

3 CLASS DIAGRAM

Figure 3.1 : Completed Class Diagram for SouvShop.

Figure 3.1 shows the completed class diagram for the project SouvShop. This diagram
shows how each object is interacting between them. On top of that, there are the
multiplicities that show the range of the objects that are interacting with other objects. In
each of the objects, There are attributes that contribute to the class even if the attribute is
public or private determined by what is shown in the system. Some of the attributes are
gaining input from other objects, so the attributes contain functions to store them in the
system in order to help the system in completing tasks.

4
4 GRAPHICAL USER INTERFACE (GUI) DESIGN

4.1 GUI TOOL

The tool we used to design the graphical user interface (GUI) of our project is Canva.
Canva provides an invaluable tool for designing the GUI of our project. The drag-and-drop
functionality, real-time collaboration features, and diverse export options enhanced
efficiency and teamwork.
Four GUI principles that have been applied are: The design does not involve coding, the
design minimizes the errors by detailing each of the icons, the design integrates between
classes according to the class diagram and the design traceable with the analysis model.

4.2 GUI DESIGN

As shown in figure
1,placeholder 1 display login
and sign up option for the
user for them to continue to
shop on the website .
Placeholder 2 display cart
option for the user to see
their cart. Placeholder 3
displays a variety of product
pictures and details for the
user to choose and buy.

5
 As shown in figure
2,placeholder 3 asks the user if
they are already signed up or
not. Placeholder 4 displays
multiple login methods like
google,facebook and email.

6
As shown in figure 4, placeholder 9 appears when the user chooses the product that they want to
buy on main pages.Placeholder 9 display the product picture,name and price.Placeholder 9
enable the user to modify the quantity they want to buy and choose either add to cart or buy the
product now.

7
As shown in the figure 5,placeholder 10 appears when the user chooses the cart button that is on
the right up corner on the main page.The user can again modify the quantity of the product that
the user want to buy.

8
As shown in figure 6, placeholder 11 displays product picture and detail such as quantity,
price,subtotal, delivery detail, and total price for the checkout.Placeholder 12 allows users to
enter promo code to get a discount and add notes to the seller .

As shown in figure 7,placeholder 13 will display when the user completes the
payment.Placeholder 13 displays order number, purchasing detail and informs the user that the
purchase is completed.

9
5 PROTOTYPING

5.1 PROTOTYPING TOOL

The prototyping tool that we use is wix. We use wix because wix is designed to be user-friendly,
making it accessible for individuals with little to no coding experience. Wix offers both free and
premium plans, providing flexibility based on the budget.

5.2 PROTOTYPING

Figure 8 Homepage Prototype

This figure is the homepage of our website prototype. In this page, users can see many options
such as home, page and about. There is also the login button where first-time users or returning
users can log in using their own account if they want to continue using this website.

10
 Figure 9 Login Prototype

In this figure, users can log in with three different options using gmail, facebook and email.

Figure 9.1 Email Login Prototype

In this figure, the users are prompted to enter their username and password which are essential
for this website usage.

11
 Figure 10 Prototype after log in an account(My Orders)

For this figure, after the users enter their account, there will be 4 sections which are important
for the user's personal information and orders. The users can check the status of their orders in
the My Orders section.

Figure 10.1 Prototype after log in an account(My Order)

In this figure, users can add, edit or remove their addresses. Users can also add many
addresses and pick which address can be set as default address.

12
 Figure 10.2 Prototype after log in an account(My Wishlist)
In this figure, users can check their favorite products in this section. Users can add products just
by clicking the heart button that will appear when users click their products.

Figure 10.2 Prototype after log in an account(My Account)

In this figure, users can view or edit their own personal information about themselves such as
their email, first name, last name and thor phone. After editing their information, they can click
the update info button to save their new personal information. Users also can delete their
account by clicking the discard button.

13
 Figure 11 Prototype to shop

In this figure, users can explore comprehensive souvenir items. The interface is designed to be
intuitive allowing users to easily navigate through the items. The user can select multiple
choices just by clicking at the add to cart click button.

Figure 11.2 Prototype when user clicks at the item.

14
In this figure, the user can see the description about the item which is the price, name and size.
The user can put the item in the cart just by clicking at the add to cart button. The user also can
buy directly from this section and no need to add to cart first. The interface really helps the user
to visualize the souvenir better.

Figure 11.3 Prototype add to cart section

In this figure, the user can check their items that they want to buy and it will show the
subtotal of all the items that have been chosen. The add to cart section takes a small
part in the interface so that the user can continue shopping .

15
 Figure 12.1 Prototype when the user click at the view cart
In this interface, the user can make a confirmation about the items, delivery address
and total of the payment. The user can enter a promo code to get a discount and also
add a note at the items. When the user is already satisfied they can make a payment by
clicking at the checkout button and pay with online banking method.

Figure 12.2 Prototype when the user has made a payment.

In this figure, the interface shows the user about the confirmation and receipt.

16
6 LESSON LEARNED

6.1 LESSON-1 : The importance of designing GUI before prototyping

As we know, design is the most important part before creating a prototype as it is being
labeled as a plan to establish the prototype itself. Without the GUI design, the developers
do not have any idea on developing any software demanded by the stakeholders. This is
because on GUI design, there are instructions on how the software must be developed by
explaining each of the function of the icons provided on each page of the app.

6.2 LESSON-2 : The importance of designing a good GUI design

As we know, GUI design is being described as the plan for developing an application or a
website. These designs need to satisfy all the needs by the one who is told to do them.
The design needs to be approved by them before proceeding to the developing part as to
avoid any miscommunication between the owner and the developer. The design should
also show the functions of the icons provided on each page so that the owner and the
developers know about them and easily understand how the app goes. Without these
things, The developer will be blank on how to develop them as well as the time taken to
finish them will be longer. In a nutshell, a good GUI design should satisfy the needs of the
owner as well as should contain detailed information so that the developer will be smiling
while developing them easily.

6.3 LESSON-3 : The importance of designing a good prototype

As we know, the prototype is the example model for the real application that will be
developed. This prototype should be working just like how the owner wanted to. The
prototype also needs to be easy to use and easy to understand so that when the real app
has been developed, the user can use it correctly and easily without any problem and
concern. The prototype should be good so that the user can interact with the owner easily
without any problem boundaries. In the nutshell, a good prototype should be easy to use
as well as satisfy all the needs of the owner as well as the user in order to interact
between them easily without any problem.

17
REFERENCES

This is our GUI design

https://www.canva.com/design/DAF2OKwKsE0/5-6kW4fq4BQ9LZ1x2TB_TQ/edit?utm_
content=DAF2OKwKsE0&utm_campaign=designshare&utm_medium=link2&utm_source
=sharebutton

This is our prototype video

https://youtu.be/RAzDW4oqojQ

This is the prototype link

https://farhanaffan530.wixsite.com/iium-souvenir-shop

18