Table Of Contents

1. INTRODUCTION

• 1.1 Purpose

• 1.2 Scope

• 1.3 Definitions And Acronyms, Abbreviations

• 1.4 References

• 1.5 Overview

2. DESIGN APPROACH

• 2.1 Class Diagram

• 2.2 Activity Diagrams

• 2.2.1 Customer Activity Diagram

• 2.2.1.1 Sign Up

• 2.2.1.2 Login

• 2.2.1.3 Profile Management

• 2.2.1.4 Product Selection

• 2.2.1.5 Give An Order

• 2.2.2 Employee Activity Diagram

• 2.3 Used Drawing Tools

3. ARCHITECTURE DESIGN

• 3.1 Software Architecture

• 3.2 Hardware Architecture

4. SYSTEM INTERFACES

• 4.1 External System Interfaces

5. USER INTERFACE DESIGN

• 5.1 Navigation

• 5.2 Screen Definitions

• 5.2.1 Page Descriptions

• 5.2.1.1 Splash Screen

• 5.2.1.2 Costumer Home Page & Company Catalog Page

• 5.2.1.3 Hamburger Menu For Unknown User

• 5.2.1.4 Hamburger Menu For Registered User

• 5.2.1.5 Login Page

• 5.2.1.6 Costumer Register Page

• 5.2.1.7 Catalog For Clothe Type Page

• 5.2.1.8 Catalog For Models Page

• 5.2.1.9 Clothe Examination Page & Try Button

• 5.2.1.10 Costumer Shopping Cart Page

• 5.2.1.11 Catalog For Models Page

• 5.2.1.12 Costumer AR Camera

• 5.2.1.13 Costumer Edit Profile Page

• 5.2.1.14 Employee Home Page

• 5.2.1.15 Employee Previous Orders Page

• 5.2.1.16 Employee Edit Profile Page

6.PROCESS DESIGN

• 6.1 Sequence Diagrams

• 6.1.1 Customer Sequence Diagram

• 6.1.2 Employee Sequence Diagram

7.DATABASE DESIGN

• 7.1 ER Diagram

                                                  List Of Figures

• Figure 1: Class Diagram
• Figure 2: Sign Up Activity Diagram
• Figure 3: Login Activity Diagram
• Figure 4: Profile Management Activity Diagram
• Figure 5: Product Selection Activity Diagram
• Figure 6: Give An Order Activity Diagram
• Figure 7: Show Status Activity Diagram
• Figure 8: Approval View Activity Diagram
• Figure 9: Profile Management Activity Diagram
• Figure 10: Splash Screen UI
• Figure 11: Home UI
• Figure 12: Unknown User Hamburger Menu UI
• Figure 13: Registered User Hamburger Menu UI
• Figure 14: Login UI
• Figure 15: Register UI
• Figure 16: Catalog For Clothe Type UI
• Figure 17: Catalog For Model UI
• Figure 18: Examination UI
• Figure 19: Shopping Cart UI
• Figure 20: Payment UI
• Figure 21: AR UI
• Figure 22: Costumer Edit Profile UI
• Figure 23: Employee Home UI
• Figure 24: Previous Orders UI
• Figure 25: Employee Edit Profile UI
• Figure 26: Customer Sequence Diagram
• Figure 27: Employee Sequence Diagram
• Figure 28: Employee Sequence Diagram (continued)
• Figure 29: ER Diagram
• Figure 30: No-SQL Diagram

1. INTRODUCTION

This document describes how the project will appear visually in the user interface and the detailed architecture of the project.

1.1 Purpose

The purpose of this document is to provide detailed information about the architecture and visual design of the mobile shopping application we call "Kloti".With this mobile application project, people will be able to shop for clothes on their mobile phones whenever and wherever they want, and even try on clothes using their cameras. Thus, they will profit from both time and shopping fatigue.

1.2 Scope

All the features of this application, which allows people to try on the clothes they want to buy while shopping online, are detailed in the rest of the document.These features are explained more clearly using the Activity Diagram, Sequence Diagram, ER Diagram, No-SQL Data Model Diagram, Class Diagram and the visuals of the user interface.

1.3 Definitions and Acronyms, Abbreviations

1.4 References

[1] "Draw.io" [Online]. Available: https://app.diagrams.net/. [Accessed: 31 December 2021].

[2] "Adobe XD" [Online]. Available: https://www.adobe.com/tr/products/xd.html [Accessed: 31 December 2021].

[3] "Visual Paradigm" [Online]. Available: https://online.visual-paradigm.com/drive/#diagramlist:proj=0&dashboard [Accessed: 31 December 2021].

1.5 Overview

• Chapter 1 is an introduction to the software design description document about "Kloti".
• Chapter 2 is explain the approaches, constraints, class and activity diagram.
• Chapter 3 is explain the architectural structure.
• Chapter 4 is the description of system interfaces.
• Chapter 5 is the visuals and explanations of the user interface.
• Chapter 6 contains a sequence diagram that explains how objects interact with each other.
• Chapter 7 contains ER and No-SQL diagram explaining database design.

2.Design Approach

2.1 Class Diagram

                  Figure 1 : Class Diagram

Since Customer and Employee have some common features, they are inherited from User class and have their own functions. In the order class, the date of the delivery of the order, the id number of the order, the condition of the order and the address to which the order will be delivered are kept. Since the customer is the orderer, it is related to the order class, and since the employee is the deliverer of the order, it is related to the order class. Also, since the order includes products, the order class includes the products class. In the shopping card class, the id number of the card is kept. In the cash payment class, the id number of the payment is kept, and in the shopping cart item class, the value of the itemid and cost are kept. These classes are linked to the order class, since the customer chooses the payment transaction type at the time of placing the order and the customer will see the total amount to be paid at the time of ordering. The products class holds the color, type, name, price, and information about the product, and the catalog class holds the type of the catalog, the category, and the brand class holds the id and name of the brand. Since there are products and brands in the catalog, catalog class includes products and brands.

2.2 Activity Diagrams

2.2.1 Customer Activity Diagram

2.2.1.1 Sign Up

                  Figure 2 : Sign Up Activity Diagram

Users enter the required information into the system and register on the screen that appears in front of them.

2.2.1.2 Login

                  Figure 3 : Login Activity Diagram

In order for users to log in to the application, they must enter their email and password information on the account they are registered with.If they successfully pass the reCaptcha application, which proves that they are not robots after typing the information, and if their information is correct, they will be logged into the system.

2.2.1.3 Profile Management

                  Figure 4 : Profile Management Activity Diagram

Customers can view and edit their profile after logging into the app.Customers can change the information they want to change (password, address, phone number) from the edit profile section of the page that appears.

2.2.1.4 Product Selection

                  Figure 5 : Product Selection Activity Diagram

After logging into the application, the customer selects the catalog and the product belonging to that catalogue. The product to be purchased can be tried using the phone camera with AR or the order can be placed directly without trying it. Also, the order can be canceled at any time.

2.2.1.5 Give An Order

                  Figure 6 : Give An Order Activity Diagram

After logging into the application, the user can add the product to the shopping cart, then edit this cart or select an address directly without editing.If the user chooses an address, their order can be confirmed or canceled after choosing to pay cash. Also, the user can return and edit the shopping cart after confirming the order.

2.2.2 Employee Activity Diagram

2.2.2.1 Show Status

                  Figure 7 : Show Status Activity Diagram

If the employee has delivered the product to the customer, employee logs in to the application, clicks the statu of order button from the main menu, selects the order he delivered from the screen that appears, then selects the day and time he delivered and saves this information.

2.2.2.2 Approval & View

                  Figure 8 : Approval View  Activity Diagram

After the employee logs into the application, she sees the orders that need to be delivered and clicks the confirm button next to the order to confirm the order she wants to deliver, then she sees the details of the order.

2.2.2.3 Profile Management

                  Figure 9 :  Profile Management Activity Diagram

After logging into the application, users can click the edit profile button from the main menu and change the information they want to change from the page that opens.

2.3 Used Drawing Tools

"app.diagrams.net"[1] is used for Customer Activity & Sequence Diagram and database design diagrams. "Adobe XD"[2] is used for user interface designs. "Visual Paradigm"[3] is used for Employee Activity & Sequence Diagram.

3.Architecture

3.1 Software Architecture

Kloti Mobile Application software will be designed according to the figure above.This application can be accessed from both Android and IOS devices.Firebase will be used for database in the application.Customer, employee and customer's previous orders will be kept in the database.

3.2 Hardware Architecture

Any device with an IOS or Android operating system is sufficient.

4. SYSTEM INTERFACES

4.1 External System Interfaces

No external interfaces.

5.User Interface Design

5.1 Navigation

Since this application will be developed for use on Android and Apple devices, the application must be downloaded from the Play Store or App Store. The costumer and employee interfaces of the application will be discussed in more detail in section 5.2.

5.2 Screen Definitions

5.2.1 Page descriptions

5.2.1.1 Splash Screen

                  Figure 10 : Splash Screen UI 

5.2.1.2 Costumer Home Page & Company Catalog Page

                  Figure 11 : Home UI 

5.2.1.3 Hamburger Menu For Unknown User

                  Figure 12 : Unknown User Hamburger Menu UI 

5.2.1.4 Hamburger Menu For Registered User

                  Figure 13 : Registered User Hamburger Menu UI 

5.2.1.5 Login Page

                  Figure 14 : Login UI 

5.2.1.6 Costumer Register Page

                  Figure 15 : Register UI 

5.2.1.7 Catalog For Clothe Type Page

                  Figure 16 : Catalog For Clothe Type UI 

5.2.1.8 Catalog For Models Page

                  Figure 17 : Catalog For Model UI 

5.2.1.9 Clothe Examination Page & Try Button

                  Figure 18 : Examination UI 

5.2.1.10 Costumer Shopping Cart Page

                  Figure 19 : Shopping Cart UI 

5.2.1.11 Catalog For Models Page

                  Figure 20 : Payment UI

5.2.1.12 Costumer AR Camera

                  Figure 21 : AR UI

5.2.1.13 Costumer Edit Profile Page

                  Figure 22 : Costumer Edit Profile UI

5.2.1.14 Employee Home Page

                  Figure 23 : Employee Home UI

5.2.1.15 Employee Previous Orders Page

                  Figure 24 : Previous Orders UI

5.2.1.16 Employee Edit Profile Page

                  Figure 25 : Employee Edit Profile UI

6.Process Design

6.1 Sequence Diagrams

6.1.1 Customer Sequence Diagram

                  Figure 26 : Customer Sequence Diagram

6.1.2 Employee Sequence Diagram

                  Figure 27 : Employee Sequence Diagram

                  Figure 28 : Employee Sequence Diagram (continued)

7.Database Design

7.1 ER Diagram

                  Figure 29 : ER Diagram

7.2 No-SQL Diagram

                  Figure 30 : No-SQL Diagram