–

E-commerce- Online Clothes Shopping

PAEVEZ MOHAMMAD SHARIAR 朴维

ID – 1911562106
19lc 软工

Figma Prototype link of my project –

https://www.figma.com/proto/DbxK918fQmmD8eDe4FMF19/E-
commerce--Online-Clothes-Shopping-PARVEZ?page-
id=0%3A1&node-
id=1%3A118&viewport=1203%2C432%2C0.14&scaling=scale-
down&starting-point-node-id=1%3A118

老男孩
 Part 1: System background
In simple words, online shopping is a unique form of electronic commerce (known
as ecommerce) which connects customers and sellers on all corners of the internet
with the use of a web browser. Today, it is not uncommon to come across online
stores that present a range of products, along with specifications, features, photos
and prices to prospective customers.

The Internet has become an essential part of our daily life, and companies realize
that the Internet can be a shopping channel to reach existing and potential
consumers.

With this consensus Online Shopping as a whole has rapidly grown. The biggest
surprise is that clothing is one of the top categories purchased online. Freedman,
argues that this is not surprising at all because, clothing sales has always been a top
category in the catalogue channel, so naturally the Internet channel should be no
exceptions.

Although online Clothes shopping continues to grow, there are problems why
consumers hesitate to shop for clothing online. In this project, the main aim is to
demonstrate that with better interaction features in clothing web sites could improve
sales over the net. Although online Clothes shopping continues to grow, there are
problems why consumers hesitate to shop for clothing online.

Online Clothes shopping is becoming increasingly popular for variety of reasons.

There are certainly outside factors such as increasing gas prices, difficulty in getting
to traditional stores and hassles often associated with shopping malls and other
traditional stores to contribute to the increased interest in online shopping.

Consumers can get full information about the product with its reviews being passed
by the existing users. If one wants to buy a product he/she is no longer limited to
asking the friends and families because there are many products reviews on the
web which gives opinions of the existing users of the product.
Online shopping sites contain wide variety of goods both high quality and mild
quality keeping in mind the level of people :

1) There are no national and International Barriers.

2) In online shopping the consumers will be in a demanding position and suppliers will not
be in a commanding position.
3) There is enormous employment opportunities in online shopping.

The global Clothes market is set to jump in value from 1.5 trillion U.S. dollars (in 2020)
to about 2.25 trillion dollars by 2025.

Major fashion and clothing brands of the world have also seen constant growth, thereby
asserting that the demand for clothing and footwear is rising all over the world.Look up
for the hashtag #OOTD on Instagram and millions of posts will pop up. Almost every
person wants to invest in good clothes and be picture ready every hour of the day.

This has given a huge push to the already popular Clothes industry. From huge retail
chains to mom & pop boutique businesses, there are many new fashion and Clothes
brands springing up each day.

While there may be intense competition, there is still enough scope if you have the
knack for this sector and love to innovate
Nowadays, excluding sites dedicated entirely to fashion ecommerce, shopping portals such
as ebay, amazon or allegro, dedicate whole, expanded sections to widespread fashion.
Both web and designers are more and more ready to push online retail and selling of their
designs. Of course they are being a bit forced to do so by society changing to mobile
society.

Websites owned by fashion magazines, which are forced to adjust to consumers

demands, allows one to shop as well, and are one of the reasons of extinction of the
traditional press. A lot of local clothing shops expand at present as well – mainly
thanks to Facebook and easily accessible ecommerce plug-ins, for example for
WordPress.

Future of Online clothing shops

I’m quite excited when I think about what possibilities future can bring and offer to
technology retailers. I await prevalence of:

 Widened reality – online fitting-rooms.

 Pinterest and using its selling possibilities.
 Siri opportunity, artificial intelligence and personalization of shopping.
 Evolution of fashion remarketing.
More on the fashion ecommerce future in the next part.

So, Online shopping has made life easier, not only by allowing you to buy clothes from
the comfort of your own home, but also because you can often find better deals and
cheaper prices for the same product you would have bought at market price from the
store. More consumers are able to connect to faster Internet connections categories
such as Clothes may experience growth
Part 2: Introduce prototype tools
you used
In this project I used Figma prototype tool which is a Desktop application and
Web(cloud) based graphics editing and user interface design app .  Launched to
the public in 2016, Figma is the brainchild of Dylan Field and Evan
Wallace.

Figma is an all-in-one tool that makes collaboration and accessibility

easy for UX designers, developers, and anyone else on a team with a
browser-based, cloud-hosted platform. If you’ve worked with Sketch
before, you’ll find that Figma has a similar feel that makes it easy to get started with.

Figma's prototyping features allow you to create interactive flows that explore how a
user may interact with your designs. Prototypes are a fantastic way to: Preview
interactions and user flows. Share and iterate on ideas. Get feedback from
collaborators.

Consistency is a priority in web design, and you can use Figma’s flexible styles to
control the appearance of text, grids, and other elements across a project. And a
variety of useful plugins, like Autoflow for illustrating user flows, Figmotion for
creating animations, and many others, enhance Figma’s functionality.

Figma came to the stage in 2016. The tool quickly became a notorious competitor
for tools like Adobe XD, Sketch and others. The reason could be its seamless user
interface and sleek features.
Designers from brands like Twitter, Microsoft, GitHub and Dropbox swear by Figma
as the ultimate UI design tool.
But in my personal opinion, try all four (Figma, Adobe XD, Sketch, InVision Studio)
out to see which one is suits you the best! .

Figma’s prototyping features allow you to create interactive flows that explore how a
user may interact with your designs.

Prototypes are a fantastic way to:

 Preview interactions and user flows

  Share and iterate on ideas
 Get feedback from collaborators
 Test interactions with users
 Present your designs to stakeholders

Before launch, UX/UI designers could only work through installed software with
multiple licenses without live collaborative features. Before this, UX designers were
limited to moving pixels in non-vector-based software like Photoshop 7. Needless to
say, the design landscape was vastly different from the dynamic tools we have
today.

To understand how and why this tool took the design world by storm, let’s examine why
you need to know about Figma and what Figma can do that other design tools can’t.

Some Characteristics and benefits about Figma :

1. In-demand with great educational resources
Alongside these great free resources, I have also taught over 40,000
hours worth of free Figma tutorials on YouTube. In this course, you will learn
advanced file and project management processes, how to design and build a
design system from scratch, build an advanced responsive prototype,
comprehensive UI design principles, and processes on the design handover
implementation workflow.

2. Live collaboration
Working in teams requires collaboration, discussions, and good ole
fashioned show-hows. It allows for all of this in real-time, with little to no lag and
no crashes.

3 You can access your work from any device

The beauty of using a cloud-based app is that you’re no longer limited to
one device or platform.Figma runs on all operating systems, including macOS,
Windows, Linux, and Chrome OS. They also offer a super valuable desktop
application, available for macOS and Windows. An updated version is currently
in beta testing.

4. It’s the ultimate all-in-one tool

Figma allows you to do all your UX/UI design on one tool, across any
device, anytime. Pushing the boundaries of design tools even further, Figma
introduced another innovation: FIGJAM virtual whiteboard tool.
 5. Crash-free zone
Figma’s inbuilt automatic backup system, you’ll be able to recover lost
projects. Your precious edits will save to disk when a document becomes
disconnected from the server. This means that even if you close your tab, you’ll
still have your work.

6. Larger projects will run smooth as silk

With Figma, you can say goodbye to large projects meltdown. It’s capable
of running smoothly on large-scale projects with thousands of components and
variants and won’t cause your device to overheat.

7. The network effect

The Community Resource page is a marketplace for ideas, inspiration,
and those seeking tech support from the Figma resource developers
themselves. Figma has fostered such a strong creative community that users
are starting to branch beyond UX/UI design, sharing things

8. Infinite Figma resources

The community is home to thousands of custom-made files and Figma
plugins designed for Figma users by Figma users. This means that you don’t
have to start from scratch on any project – there’s no learning curve, no time-
wasting trying to figure out how to automate something. You can browse the
Figma Community and grab and go.
 
9. Infinite Figma plugins
An official library of free and paid plugins adapt and improve your
workflow to suit your style. Plugins are there to help you automate your
workflow, remove the need for tedious menial tasks, and give you more time to
create.

10. Affordable
If you’re not entirely sold on Figma yet as a UX/UI design tool, then this will seal the
deal: Figma offers the free Starter plan . which gives you:Unlimited files in drafts,
viewers and commenters, and editors on 3 team files

a. 1 team project
b. 30-day version history
c. Unlimited cloud storage
Figma gives you all the tools you need for the design phase of the project, including
vector tools which are capable of fully-fledged illustration, as well as prototyping
capabilities, and code generation for hand-off.

Part 3: System flow chart

A chart of system architecture

least 3 module chart
Login Module Chart

Checkout Module Chart

Order Process Module
Searching Product Module Chart
Part 4: System screenshots
1.Home page
In homepage section
I have added Nav Bar
, where different route
2 .Sign up
is given such as
about us , home shop
, contact us and
search placeholder .
Then blow that there
is a banner . It is used
for advertisements .
After I added some
brand information so
that customer can
easily find their
favorite products.

Then , I
also showed
some best sold
clothes cart and
added rating
given by the user
,beside price is
also there

In sign up section , I used google and facebook authentication . User will

create account by their google and facebook account . But also manual Sign-
up system is also available .
The login/create account form can live on its own page or be treated as a
modal or dropdown. Make sure creating an account is accessible from the
login fields (and vice versa), so when a user realizes they don’t have a login
they can easily get to Create Account.
3.Login

When a user will

create an account
then user can login
by their Email and
Password. Still user
is able to login with
their google / 4. Search products by category, by
facebook account
brand, by price
Ecommerce sites
with account
functionality allow
customers to save
data such as order
history and
payment
information and can
enable other
interactions such as
The search field is
usually located in
the navigation 5. Product Details
menu.
Make sure to
consider how the
Results page
displays the results.
This page often
follows the
Category Page
template, or it could
have its own unique
design.
Implementing
In product details
page user will find
the size of the
clothes, color ,
more variant ,
pictures and
design. He/she can
also add quantity
there
Sometimes referred
to as the Product
Detail Page, this is
the individual view
of a product with
the full product
details and pricing.
The main call to
action is the add-to-
 6. Wish list

A wishlist allows
consumers to
create customized 7. My Account
collections of things
they want to
purchase and save
them in their user
account for future
reference. Wishlists
show a customer’s
interest in a product
but not their desire
to buy it right away.
it’s labeled as “My
Profile,” “My
Settings,” “Account
Information,” and so
forth, this page
includes all the basic
account fields, such
as name, email, and
change password
details. It’s common
to include any
additional information
that’s collected from
the user, such as
demographic
information.

The
customer’s
account is also a
great place to
offer them
 8.Comments

In comment section
user will add his
review and
comment about the
clothes .
This allows real
people to give their
testimonials in their
own words on their
terms. This builds a
sense of
authenticity for your
brand that people
can trust. People
that can trust your
brand will become
lifelong subscribers.

Comment sections
give readers
opportunities to
interact, to discuss
 9. About us

The About Us page is one of the most important pages on customer's

website. It is an opportunity where their visitors get to know their company.
This is a chance for my customers' to introduce themselves and the kind of
business they do to their clients. So I might as well make it great!
People will know our website strong brand value through this page
10.Checkout

People will know our website strong brand value through this page The
checkout page is the last step before the sale is confirmed, and it requires
customers to enter their information and then finalize their purchase. It plays a
very important role in the overall shopping experience on your website.
11 . Place Order
This is an important step to review all items being purchased, the shipping
info, payment method, discounts, and extra costs like taxes or express
shipping.
11.Order Proceed

Once the customer submits the order, give them a nice thank you message
and confirm that they submitted their order successfully. It’s helpful to display
the order details and info on how to modify the order if the user catches a
mistake after submission.

If this was a guest checkout, take the opportunity to prompt the user to create
an account to save all the information that they just submitted.

Confirmation pages may be used to display a message other than a thank

you. As the system processes the order, something could go wrong and the
site will need to return an error page instead of a confirmation to explain that
an item sold out by the time the order was submitted
谢谢您