University of Central Punjab

BSCS FINAL PROJECT

<Software Design Specification>

Virtual Try-On

Project Advisor

Mr.Jawad Hassan

Presented by:
Group ID: F22BS050

Student Reg#L1f19bscs0187 Student Name: WASIF

Student Reg#L1f19bscs0188 Student Name: Zeeshan Sameer
Student Reg#L1f19bscs0207 Student Name: Muhammad Umar
Student Reg#L1f19bscs7208 Student Name: Mariam

Faculty of Information Technology

 University of Central Punjab

University of Central Punjab

 University of Central Punjab

Software Design Specification

SDP Phase II

<Virtual Try-On>

Advisor: Mr. Jawad Hassan

Team <Team F22BS050>

Member Name Primary Responsibility
Wasif All
Zeeshan All
Sameer
Muhammad All
Umar
Maryam All
 <Virtual Try-on>

Table of Contents
Table of Contents............................................................................................................................i
Revision History.............................................................................................................................ii
Abstract...........................................................................................................................................1
1. Introduction..............................................................................................................................1
1.1 Product.......................................................................................................................................1
1.2 Background................................................................................................................................1
1.3 Objective(s)/Aim(s)/Target(s)....................................................................................................2
1.4 Scope..........................................................................................................................................2
1.5 Business Goals...........................................................................................................................2
1.6 Document Conventions..............................................................................................................3
1.7 Miscellaneous.............................................................................................................................3
2. Overall Description..................................................................................................................4
2.1 Product Features.........................................................................................................................4
2.2 Functional Description............................................................................................................4
2.3 User Classes and Characteristics................................................................................................4
2.4 Design and Implementation Constraints.....................................................................................4
2.5 Assumptions and Dependencies.................................................................................................5
3.Technical Architecture...............................................................................................................5
................................................................................................................................................................ 6
2.6 Application an d Data Architecture............................................................................................6
................................................................................................................................................................ 7

................................................................................................................................................................ 8
2.7 Design Reuse and Design Patterns...........................................................................................18
2.8 Technology Architecture..........................................................................................................18
3. Screenshots/Prototype...........................................................................................................19
3.1 Workflow.................................................................................................................................19
3.2 Screens.....................................................................................................................................22
3.3 Additional Information.............................................................................................................29
4. Other Design Details..............................................................................................................29
5. Revised Project Plan..............................................................................................................30

..................................................................................................................................................31
6.References..................................................................................................................................32
[1]. Luna.io...................................................................................................................................32
[2]. loreal-paris.co.uk...................................................................................................................32
Appendix A: Glossary.................................................................................................................32
 VS-Code(Visual Studio Code)............................................................................................32
 MVC(Model View Controller)...............................................................................................32
 ERD(Entity Relationship Diagram).....................................................................................32
 ID(Identification)....................................................................................................................32
Appendix B: IV & V Report..........................................................................................................33

< F22BS050 > SDP Phase II (SDS) Page i

 <Virtual Try-on>

Revision History
Name Date Reason For Changes Version

< F22BS050 > SDP Phase II (SDS) Page ii

 <Virtual Try-on>

Abstract
As we know that the world is moving towards online shopping. People buy many products,
accessories, clothes online but many people hesitate to buy online accessories and go through the
hustle of going market. So, we are making a software which we will be linking it with a website. In
this website there will be different products and you can select any of them. The software which we
will be developing will detect your body part and place the select product on that part of your body.
All of this will be displaying on your screen.

1. Introduction

1.1 Product
Every person nowadays approximately need shopping online. The choice of product may vary but
almost every person need to see how the product is look like on them in real. This whole idea is so
appealing that everyone wants to try a product while sitting at home. Unfortunately, not every shopify
website provide that option because it’s not an easy task to add. So it remains as every person
dream to try their desirable product at home. We are just going to make their dream come true by
giving people virtual environment of shopping while at home. It’s a website which will provide
functionality of trying products virtually. And make their online shopping more reliable.

1.2 Background
It is a project in which we are making website and a software where customer try different products,
through this software you can try different product while being at your home or in the physical store.
This software can easily be used by just clicking on the try on button. Anyone can use this user-
friendly software because it’s just only a button.

Products:
This software will be consisting of three modules:
1. Spectacles
2. Lipsticks
3. Watches

Before this, there is no such online website in Pakistan which has try-on function where you can try a
product virtually on yourself by the access of camera.

Online Problem:
Whenever someone wants to buy any product online they always get conscious about their money
and doubtful about the product. That is because they don’t trust online shopping in comparison to
physical shopping. Because they don’t get to see the product in person before buying so they aren’t
sure about the product. So, everyone gets some kind of questions such as:
 How will it look like? What if it’s a scam?
 Is it Worth it……….!
 Would it suite my face, lips, and hand?
They’ll always be conscious about the product. And will always be uncertain about buying anything.

< F22BS050 > SDP Phase II (SDS) Page 1

 <Virtual Try-on>

Physical problem:
. Not everyone wants to go to the physical store because many of us don’t have time, mood, or just
simply tired etc. Another problem is unavailability of markets and shops in some areas. So for those
who cannot have access to the physical stores this product of ours can be a life savior.

Related Work/ Literature Survey/ Literature Review

We will be developing a website in which there are two types of users one is admins which will list
the different category of products and the other one is the customer which will buy the products. We
will build this website frontend with help of html, css
and backend with JavaScript. We will be adding a MVC framework of Django to work as a bridge
between data, interface through controller. In this website there will be many products in it. But the
try on software which we will be attaching with this website will be on some of the products like
glasses, Lipsticks, watches.
If we like some product spectacle or a watch, we can add them in cart. And go back for shopping if
we want to buy more products or try them and add more products too respectively. When you are
done with your shopping consumer can checkout and add their details about him like name,
address, number, area etc. Then while checking out consumer can see the final bill including the
price of delivery. We can cancel or order too before dispatching from a warehouse. If it got
dispatched the product will arrive at your home, then you can return it by clicking return product
option from our website. Then the rider will come and collect the product from your doorstep and
your payment will be returned.
We will have all the records like how much customer order this product and how many they order
stuff like that. It will be done with the help of database, so we our website will automatically display
sold out to the product which aren’t available. Our website will have different options of payments
like Cash on Delivery, Debit/Credit card, JazzCash, EasyPaisa etc. At the end we will be storing our
website files on free cloud storage server like AWS, so everyone in the world can have a access on
our website.

1.3 Objective(s)/Aim(s)/Target(s)
Target:

Our target is that user can use try-on virtually by sitting wherever.

Objectives/Aim:

• To gather dataset.
• To develop a website.
• To develop a software.
• To make animation.
• To link software with animation and website.
• To make online shopping easier and trustable.

1.4 Scope
The scope of our project is a person should have a mobile/laptop at least for an access of a camera.
Otherwise user can’t try a product. And the boundaries of our projects are our site would have at
least 3 products to try-on.

< F22BS050 > SDP Phase II (SDS) Page 2

 <Virtual Try-on>

1.5 Business Goals

Our plan is to make this software efficient, so we can sell our software and site to some optical
brands or lipsticks brand to make our revenue. Then after getting the feedback from those brands
we will expand our virtual products and will add some jewelry to try-on, so that selling jewelry online
can become easier for stores. We plan to take a part revenue if a person buys from our site by using
try-on virtually at home.

1.6 Document Conventions

Following are the conventions of this document:
 Document is written in Arial
 Size of normal text under headings is 11
 Subheadings size is 14
 Main headings size is 18
 Other headings 12
 Line spacing is 1.5

1.7 Miscellaneous
N/A

< F22BS050 > SDP Phase II (SDS) Page 3

 <Virtual Try-on>

2. Overall Description

2.1 Product Features

The main feature of our product is live trying of different products. We are developing a website
which will be very user-friendly and anyone can locate their desired product easily. We don’t require
too much personal information for using our website. Our product will show guidelines for accurate
result which will help you to place your body part in that guidelines. Each product will have 2 to 4
colors that customers can choose different color of each product they like. Product image will have a
special button If the customer clicks on the button it will show Try it and while clicking on Try it you
can Try the product on yourself virtually.

2.2 Functional Description

Functional description of our website is to use the try on feature you have to select the item, when
you’ll select the item it will have a try-on button you have to click that button. It is important to note
that access to your camera is important so when it is asked to give permission make sure you have
enabled the camera.

2.3 User Classes and Characteristics

Classes:

We have two user classes

 Admin
 customer

Characteristics:

Customer:
customer has to create a new account in the beginning. He can login/logout from the
account. He can add to cart remove from cart the item. He can try on different products.

Admin:
Admin can have access to all the details of the customer. He can login/logout from the admin
account. To access all the details, he has to login in the admin account. He has the right to
watch over all the activities of the site. He can restrict any of the customer who isn’t following
the rules and regulations of the system. He will have the full access to the data base of the
system.

2.4 Design and Implementation Constraints

Implementation Constraint:
The application should open on a laptop/pc having a webcam.

< F22BS050 > SDP Phase II (SDS) Page 4

 <Virtual Try-on>

Design Constraint:
The interface of the application should be responsive and user friendly and easy to use.

2.5 Assumptions and Dependencies

We want to make software and a website which will be an online store and will provide different
products to the user. The unique feature of this website than other online websites would be that it
will provide user to try different products on themselves virtually before buying them which would
help them in buying it. Then it would have an online payment method to pay for the product. Now
what we require in making this website is a server for hosting of the website. Then we require VS-
code for its implementation and coding. Then we need Blender for designing of the modules which
would be in the website.

< F22BS050 > SDP Phase II (SDS) Page 5

 <Virtual Try-on>

3.Technical Architecture

Architecture Diagram

< F22BS050 > SDP Phase II (SDS) Page 6

 <Virtual Try-on>

2.6 Application an d Data Architecture

ER Diagram

< F22BS050 > SDP Phase II (SDS) Page 7

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 8

 <Virtual Try-on>

Class Diagram

< F22BS050 > SDP Phase II (SDS) Page 9

 <Virtual Try-on>

Use Case Diagram

Sign up

login

Select category <<include>>

Forgot
Select item password

Try on

<<include> Update cart

Add to
Customer cart
Admin

View
cart

Confirm
order

logout

< F22BS050 > SDP Phase II (SDS) Page 10

 <Virtual Try-on>

Activity Diagram

< F22BS050 > SDP Phase II (SDS) Page 11

 <Virtual Try-on>

Component Diagram

< F22BS050 > SDP Phase II (SDS) Page 12

 <Virtual Try-on>

DFD level 0

< F22BS050 > SDP Phase II (SDS) Page 13

 <Virtual Try-on>

DFD Level 1

< F22BS050 > SDP Phase II (SDS) Page 14

 <Virtual Try-on>

Collaboration Diagram

< F22BS050 > SDP Phase II (SDS) Page 15

 <Virtual Try-on>

Decision Tables

 Login

Conditions
Email Yes Yes No
Password Yes No Yes

Action
Logged In Yes - -
Try Again - Yes Yes

 Try-On

Conditions
Select Product Yes Yes Yes
Camera Yes No No
Upload Image - Yes No
Action
Try-on Product Yes Yes -
Cannot Try-on - - Yes

 Add to Cart

Conditions
Select product to add Yes No No
No product added No Yes No

Actions
View add to cart Yes Yes Yes
Edit add to cart Yes - -

< F22BS050 > SDP Phase II (SDS) Page 16

 <Virtual Try-on>

 Purchase

Conditions
Select Product Yes Yes Yes Yes No
Enter Credit Card Yes No No Yes Yes
Cash on Delivery No Yes No No No
Enter Address Yes Yes Yes No Yes
Actions
Purchase Yes Yes - - -
complete
Cannot do - - Yes Yes Yes
purchase

 View Products

Conditions
Login Yes No Yes
Buy products No No Yes

Actions
View products Yes Yes Yes
View add to cart - - Yes

< F22BS050 > SDP Phase II (SDS) Page 17

 <Virtual Try-on>

Sequence Diagram

< F22BS050 > SDP Phase II (SDS) Page 18

 <Virtual Try-on>

2.7 Design Reuse and Design Patterns

N/A

2.8 Technology Architecture

The following is the anticipated infrastructure required to support the application and
information:

 Developing a web base application that will be available on all mobile and laptop
browsers.

 Supporting all browsers above Android v5.0+ and safari for IOS to the latest versions.

 Supporting all browser of MAC and Windows, Internet Explorer vIe10+ to latest
versions.

< F22BS050 > SDP Phase II (SDS) Page 19

 <Virtual Try-on>

3. Screenshots/Prototype

3.1 Workflow
Workflow Diagram

< F22BS050 > SDP Phase II (SDS) Page 20

 <Virtual Try-on>

Swimlane Diagram

< F22BS050 > SDP Phase II (SDS) Page 21

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 22

 <Virtual Try-on>

3.2 Screens

< F22BS050 > SDP Phase II (SDS) Page 23

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 24

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 25

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 26

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 27

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 28

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 29

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 30

 <Virtual Try-on>

3.3 Additional Information

N/A

4. Other Design Details

N/A

< F22BS050 > SDP Phase II (SDS) Page 31

 <Virtual Try-on>

5. Revised Project Plan

< F22BS050 > SDP Phase II (SDS) Page 32

 <Virtual Try-on>

< F22BS050 > SDP Phase II (SDS) Page 33

 <Virtual Try-on>

6.References

[1]. Luna.io

[2]. loreal-paris.co.uk

Appendix A: Glossary

 VS-Code(Visual Studio Code)

 MVC(Model View Controller)

 ERD(Entity Relationship Diagram)

 ID(Identification)

< F22BS050 > SDP Phase II (SDS) Page 34

 <Virtual Try-on>

Appendix B: IV & V Report

(Independent verification & validation)
IV & V Resource

Name Signature

Fix Time
S# Defect Description Origin Stage Status Minute
Hours
s
1

Table 1: List of non-trivial defects

This document has been adapted from the following:

1. Previous project templates at UCP

2. High-level Technical Design, Centers for Medicare & Medicaid Services. (www.cms.gov)

< F22BS050 > SDP Phase II (SDS) Page 35