Hubei University of Technology (HBUT)

湖北工业大学

Human Computer Interaction

Prototype model of

Online Shopping
Name: Rashid Md Mamunur
ID: 1811562126
Class: 191c 软工
Part-1: System Background
Online shopping has become a popular way of shopping for consumers. This new innovation for
shopping not only brings a great number and variety of merchandise to potential consumers, but
also offers a numerous business activities and huge market. Social media is no longer known only
as a media that facilitates its users to present themselves on the internet but also as media to
sell some products to consumers known as an online shop. Because of the numerous advantages
and benefits, more people say that they prefer online shopping over conventional shopping these
days (Singh & Kashyap, 2007). Online shopping or marketing via internet is the use of technology
(computer) for better marketing production.

Although online sunglasses 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
sunglasses shopping continues to grow, there are problems why consumers hesitate to shop for
clothing online.

Online sunglasses 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:

❖ There is enormous employment opportunities in online shopping.

❖ There are no national and International Barriers.
 ❖ In online shopping the consumers will be in a demanding position and suppliers will not
be in a commanding position.
❖ Saves time and efforts.
❖ The convenience of shopping at home.
❖ Wide variety/range of products are available.
❖ Good discounts / lower prices.
❖ Get detailed information about the product.
❖ We can compare various models/brands.

• Revenue in the Sunglasses segment amounts to US$23.42bn in 2022. The market is

expected to grow annually by 5.82% (CAGR 2022-2025).
• In global comparison, most revenue is generated in the United States (US$4,665.00m in
2022).
• In relation to total population figures, per person revenues of US$3.09 are generated in
2022.
• In the Sunglasses segment, volume is expected to amount to 926.87m pcs. by 2025. The
Sunglasses segment is expected to show a volume growth of 5.3% in 2023.
• The average volume per person in the Sunglasses segment is expected to amount to 0.11
pieces in 2022.

Sunglasses are perceived as a luxury fashion accessory. The sunglasses market share had
increased rapidly within the luxurious fashion goods industry in the past decade. The sunglasses,
besides providing style and fashion design, also offers valuable functions. Sunglasses are meant
to provide comfort to the eyes by blocking the bright rays of the sun. According to the National
Eye Institute, around 20% cases of cataracts are caused due to the UV exposure. Sunglasses
blocks 99% to 100% UVA and UVB rays of the sun and protect the eyes from the sun’s glare.
Increase in consumer awareness regarding eyes protection along with rise in disposable income
fuel the global sunglasses market significantly. Moreover, the growing demand for fashionable
accessories among the global youth population is another notable factor responsible for fostering
the growth of the sunglasses market during the forecasted period.

The outbreak of COVID-19 had negatively affected the manufacturing activities and disrupted the
distribution network of the sunglasses market globally. People were forced to stay at their homes
to stop the spread of the disease. The government’s stringent rules regarding social distancing
and complete lockdowns had resulted in huge losses for the vendors operating in the market. All
the major brand outlets and other sales channel were closed during the lockdown period.
However, a V-shaped recovery is expected in the post-COVID period. The approval of few
vaccines developed by major economies would probably show a positive impact in the sunglasses
market. Moreover, the online sales channel is projected to witness a significant growth due to
the pandemic in the upcoming years. Key players are constantly developing their online sales
channel to provide a superior consumer experience to their customers. The future lies in the
digitization of the supply chains in the sunglasses industry throughout the globe.

Revenue:

Revenue change:

Online revenue share:

Global Comparison:

Part 2: Introduce prototype tools I used:

Fig: Figma
Figma is a vector graphics editor and prototyping tool which is primarily web-based, with
additional offline features enabled by desktop applications for macOS and Windows. The Figma
mobile app for Android and iOS allow viewing and interacting with Figma prototypes in real-time
mobile devices. The feature set of Figma focuses on use in user interface and user
experience design, with an emphasis on real-time collaboration.

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, Fig motion 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
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. 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.

3. 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.

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. 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.
 6. 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.

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

• 1 team project
• 30-day version history
• 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

Main flowchart of this online sunglasses shopping:
Or
module chart of online sunglasses shopping:
Customer Login Module chart:

Customer buying product module chart:

Customer payment module chart:

Admin add product & Check feedback Module:

Part 4: System screenshots
1-Home Page:
In homepage section I have added Nav Bar, where different route is given such as Home,
category, Brand, Price, Cart, and profile. So that customer can easily find their favorite
products by searching category, by brand, by price etc.
Then, I also showed some best sold sunglasses and added rating given by the user,
beside price is also there.

2-Sign Up:

To sign up user must input their email address and phone number also, so that we can
send verification code to confirm the legal user.
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, so when a
user realizes they don’t have a login they can easily get to Create Account.

3-Log in:
When a user will create an account then user can login by their Email and Password.
Ecommerce sites with account functionality allow customers to save 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.

4-Product search by category:

The search field is usually located in the navigation menu.

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 the need to go to a dedicated search results page.

5-Product search by Brand:

This page often follows the Brand Page template, or it could have its own unique
design. Implementing ‘suggested search’ surfaces products while the customer is
typing to remove the need to go to a dedicated search results page.
6-Product search by Price:

This page often follows the Price Page template, or it could have its own unique
design. Implementing ‘suggested search’ surfaces products while the customer is
typing to remove the need to go to a dedicated search results page.
7-Details of product:

In product details page user will find the size of the sunglass, frame 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 products, and user-generated content from social media to this
page can help drive customers to add-to-cart.
8-Wish list:

A wishlist allows consumers to create customized 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.
Customers’ wish lists are sets of preferred items saved to their user accounts, for which
they have shown curiosity but not an imminent interest in purchasing them.o save a
wishlist on most eCommerce websites, you must first build an account.

9-User Account:

The customer’s account is also a great place to offer them access to their saved Wishlist
items. Most companies incentivize account sign ups by only allowing a customer to save
an item to a Wishlist if they have an account.
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.
10-Customer review & Ratings:

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 an asset for journalists — allowing them to engage
with readers and identify stories that are important to the community.

11-Discount and billing details:

Here customer can pay digital payment and can pay cash on delivery. Here customer
must put their name, address, contact number, email etc. we can see billing details from
here. And also, can see the discount price has been added or not.

12-Order Complete:
THE END. THANK YOU LAOSHI.