Professional Documents
Culture Documents
- PARVEZ MOHAMMAD SHARIAR- 朴维- E-commerce-Online Clothes Shopping
- PARVEZ MOHAMMAD SHARIAR- 朴维- E-commerce-Online Clothes Shopping
https://www.figma.com/proto/DbxK918fQmmD8eDe4FMF19/E-
commerce--Online-Clothes-Shopping-PARVEZ?page-id=0%3A1&node-
id=0%3A1&viewport=1272%2C329%2C0.14&scaling=min-zoom
老男孩
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.
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 :
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.
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'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.
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.
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.
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.
1.Home page
In homepage section
I have added Nav Bar
, where different route
is given such as
2 .Sign up
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
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 /
facebook account
Ecommerce sites
with account 4. Search products by category, by
functionality allow
customers to save brand, by price
data such as order
history and
payment
information and can
enable other
interactions such as
wish list
management, the
accrual of
rewards/loyalty
points, and special
access to deals.
The search field is
usually located in
the navigation
menu.
Make sure to 5. Product Details
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
‘suggested search’
surfaces products
while the customer
is typing to remove
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-
cart button.
Adding
reviews, related
6. Wish list
A wishlist allows
consumers to
create customized
collections of things
they want to
purchase and save 7. My Account
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.
Customer
s’ wish lists are
sets of
preferred items
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 8.Comments
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
access to their
saved Wishlist
items. Most
companies
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
stories, and to learn
from each other.
They can also be a
valuable asset for
journalists —
allowing them to
9. About us
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.
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.