DA NANG UNIVERSITY OF ECONOMICS

-----🙞🙜🕮🙞🙜-----

WEB ANALYSIS & DESIGN

Delivery 03: Web Design

Lecture : PhD. Trương Hồng Tuấn

Group :C

Class : 47K31.1

Member : Đặng Thị Mỹ Duyên

Trần Lê Bữu Lập
Nguyễn Bảo Ngọc
Dương Đình Nhân
Lê Ngọc Đan Nhi

Da Nang, 05/11/2023
GROUP C - ANALYSIS & DESIGN WEB

TABLE OF CONTENT
I. Web specifications ................................................................................................................ 3
1. Features ............................................................................................................................ 3
1.1. Specifically ............................................................................................................. 3
1.2. Overview ................................................................................................................. 5
2. Event tables ...................................................................................................................... 6
3. User flows ...................................................................................................................... 10
3.1. Process Mapping ................................................................................................... 10
3.2. User flows ............................................................................................................. 11
4. Requirements ................................................................................................................. 11
4.1. Functional Requirements ...................................................................................... 11
4.2. Nonfunctional requirements.................................................................................. 11
II. Design layouts and site infrastructure ............................................................................ 13
1. Wireframe ...................................................................................................................... 13
2. UI mockups design ........................................................................................................ 21

2
GROUP C - ANALYSIS & DESIGN WEB

I. Web specifications
1. Features
1.1. Specifically
Page Features Features description

- User friendly navigation - Header includes a search bar and clearly

-Shopping cart and login icons lists category pages on the navigation bar.
Header - Search bar Along with the appropriate types of
- Subsidiary page navigation navigation makes it easy for users to carry
out their actions and intentions

- Slide Show - At the top, there are slideshows of current

- Best seller & New collection and upcoming events, promotions as well
products as featured products with CTAs.
- CTAs like “Xem Thêm”, “Thêm - Simple, eye-catching homepage with
Home Page
vào giỏ hàng”, etc reasonably distributed content and
- Simple layout, easy to use prominent CTAs to help orient customers
easily

- Form to fill in Reasonable layout and navigation make the

username/password account creation and login process more
- Account registration form convenient
- Navigation navigates to the
Login & registration page if you do not have
Sign in Page an account
- Navigation navigates to the
forgot password page and changes
password

- Business information - Provide users with basic information

- Customer feedback about the business
About Us
- There is a feedbacks section that adds
Page
credibility to the business and website

- Product information is clear and - The product page provides clear images
objective. with product name and price. In addition,
- High quality product images, the product image also displays % discount
alternate views of the tags to encourage purchases.
product/multiple view. - There is navigation in the product image
- Display the latest promotions and and name section to navigate to the product
Product
offers information page. There is also an “Thêm
Page
- Advanced product filtering and vào giỏ hàng” CTA button directly above
search functions the product image. Helps users make
- Breadcrumb navigation purchases easier.
- Button “Thêm vào danh sách yêu - On the left side of the page is the product
thích”, “Thêm vào giỏ hàng” and category. There are also filters available
social share above such as filtering by product type

3
GROUP C - ANALYSIS & DESIGN WEB

- Product review function according to newest and best selling. Helps

- Related products users more conveniently find products and
fit their purchasing needs.
- The product information page provides
full detailed descriptions of the product in
terms of size, material, color and place of
origin. With clear, high-quality product
images, with many shooting angles from
far to close and with zoom mode,
customers will have a more detailed
overview and view of the product. There is
also a color view for product lines with
different colors. And CTA buttons
according to each need.
- Below the product image, customers can
see reviews and read actual feedback about
the product to have a more objective view
before deciding to buy the product and also
make a product worth buying. more
reliable.
- The related product section suggests
similar, related products for customers to
refer to and stimulate the intention to buy
more.

- Frequently asked questions, - Respond quickly to user inquiries with

Support FAQs FAQs to enhance customer service
Page - Shopping guide - Provide detailed instructions to support
users in the purchasing process

- Business contact form - The "Contact" section is for customers

who want to send comments, feedback or
questions to Dau Ngot. Helps users interact
Contact
with businesses through the website
Page
- Thereby being able to answer questions
and problems to improve customer service
quality

- Blog search - Users find it easier to search and read

- Blog share button blogs
Blog Page
- Blogs have filters to sort by - There are filters suitable for each different
chronological order or popularity need

- Product information and quantity Help customers easily adjust their shopping
(cart cart to checkout
details)
Cart Page - Total price
- Button to change quantity
- Add and delete products
- Payment CTA

4
GROUP C - ANALYSIS & DESIGN WEB

- Billing & shipping address - Easier ordering and payment process

- Shipping methods - Satisfy all forms of payment to optimize
Payment - Voucher/Promo codes the customer payment process
Page - Advanced payment options - There is navigation to the policy page to
- Navigate to the policy page provide information and policies during the
ordering process

- Contact information - Provide a summary of necessary

- Policy & Support information for users
Footer - Social media links - Live chat is used to interact directly with
- Live chat customers and handle problems at any time

Table 1 - Website futures

1.2. Overview
User-friendly design:
The homepage is simple, easy to use with reasonably distributed content and prominent
CTAs to help orient customers easily. At the top there are slideshows of current and upcoming
events, promotions as well as featured products.
The header includes a search bar and clearly lists category pages on the navigation bar.
Along with the appropriate types of navigation makes it easy for users to carry out their actions
and intentions.
The website's footer will include information, address, policies and support from the
store.
Product information is clear and objective:
On the product page, there are filters available such as filtering by product type by
product type. newest, best-selling, more convenient in the process of searching for products
that fit customer needs.
The product information page provides full detailed product descriptions in terms of
size, material, color and place of origin. With clear, high-quality product images, with many
shooting angles from far to close and with zoom mode, customers will have a more detailed
overview and view of the product. There is also a color view for product lines with different
colors.
Below the product image, customers can see reviews and read actual feedback about
the product to have a more objective view before deciding to buy the product and also make
the product trustworthy. more reliable.
Buy & Pay easily:
With the shopping cart icon on the right side of the header, it's easy to find. In addition,
each product also has CTAs, "buy now" and "add to cart" buttons that encourage users to click,
making the buying process easier.
In addition, the Sweet Strawberry website also offers many forms of payment, both
direct payment upon receipt and many online payment methods.

5
GROUP C - ANALYSIS & DESIGN WEB

Having generous return policies and vouchers motivates customers to buy

Customer service:
Frequently asked questions are intended to answer customers' questions and problems
quickly and conveniently.
Chatbot to interact directly with customers and handle problems at any time.
In addition, the website also has a "Contact" section for customers who want to give
comments, feedback or questions to Dau Ngot.

2. Event tables

Event tables

Type of Event Trigger Source Use case Response Destination

event

External 1. User Register Customer Show Registered Website

requests to website registration successfully interface
create an page
account

External 2. User logs Log in Customer Show login Logged in Website

in website page successfully interface

External 3. Users Requires Customer Show Products Website

search for product website products page interface
specific name page
products

External 4. View Detailed Customer Show Detailed Website

detailed information website product information interface
product details page page
description

External 5. Customer Request to Customer Add product - Product Website

adds add to cart website to cart has been interface
product to updated in
cart the cart
- Display
products
successfully

6
GROUP C - ANALYSIS & DESIGN WEB

added to the
cart

External 6. New order Customer Create new - Product - User

Customers available website order detailed interface
buy information - Bank
products table - Customers
- Order - Transport
confirmatio
n
- Order
details
-
Transaction

7. Receive Customer - Show bank - Confirm - User

Customers order value website account successful interface
pay by via bank information payment - Customers
transfer - - Transfer - Bank
Instructions information
for making a
bank
transfer

External 8. User Order status Customer Show order Information User interface
checks tracking about order
order status page location and
carrier

External 9. User Request to Customer - Show user User Account Page

changes change account information
personal personal information updated
information information page successfully
- Settings to
change user
information

External 10. View Search for Customer Show Promotion Homepage

promotional information information and discount
code and on about codes have
discount promotion promotion been

7
GROUP C - ANALYSIS & DESIGN WEB

information codes and codes and successfully

discounts discounts on saved
special
occasions

External 11. Product Want Customer There is a - Response Help Page

feedback feedback on page to send has been
the product feedback sent.
about the - Show chat
product and box right on
there is a the website
chat box
right on the
page for
easier
communicat
ion

External 12. Want to Customer There is a Orders are Cart Page

Exchange exchange/re "Đổi, trả being
and return turn order hàng" exchanged
of goods button 24 or returned.
hours after
receiving Orders Help Page
the goods cannot be
with the returned
condition of because
recording a there is no
video when authentic
opening the video
product

External 13. Cancel Want to Customer There is a The order Cart Page
order cancel order "Hủy đơn has been
hàng" successfully
button 2 canceled
hours after
ordering Orders Help Page
cannot be
canceled
because the
time limit

8
GROUP C - ANALYSIS & DESIGN WEB

has passed.
If any
information
changes,
please
contact us
for help

Temporal 14. Check At 10:00 & Displays a List of Management

orders 20:00 every list of orders specific
during the day that have orders
day been placed includes
customer
and product
information

Temporal 15. Revenue End of Track Revenue Management

reporting week, revenue report
month,
tracking reports
quarter and
time year

Temporal 16. Change Following Change the Change Website

website annual style of website's interface
holidays
style website to colors,
according to match the images, and
holidays occasion fonts to
holiday-
inspired
colors and
images

State 17. Order Manage Look up Order status Management

Manager product ment order status details
inquiry
wants to
check order
information

Table 2 - Event Tables

9
GROUP C - ANALYSIS & DESIGN WEB

3. User flows
3.1. Process Mapping

Figure 1 - Buy Process Mapping of Dâu Ngọt website - Link HD

3.2. User flows

Figure 2 - User flows of Dâu Ngọt Website - Link HD

4. Requirements
4.1. Functional Requirements
Product catalogs must be complete and detailed, including product names, descriptions,
prices, images, videos and other options. There should also be filters and search tools to help
customers find products that suit their needs.

10
GROUP C - ANALYSIS & DESIGN WEB

The shopping cart must be easy to use and allow customers to add, delete, and edit
products easily. The shopping cart always displays the total order value and shipping costs.
The website must support a variety of payment methods, ensure safety and always email
customers every time they make a successful payment.
The website must allow customers to create accounts and store their personal
information. In addition, it also allows users to reset their password when they forget their
password.
The website must provide customers with a way to track the status of their orders. And
must display information about order status, expected delivery date, and any issues that arise
during order processing.
The website must have a customer support system to answer questions and handle
customer complaints.
4.2. Nonfunctional requirements
a. Technical requirements
The website must be compatible with many web browsers and mobile devices so
customers can access it from anywhere.
The website must be able to handle large amounts of traffic, even during peak hours.
b. Performance requirements
Website loading speed must be fast and stable, even with heavy traffic.
The website must be able to handle multiple simultaneous transactions without delay.
The search system must quickly and easily find the products that customers are looking
for.
The payment system must be fast and secure.
c. Usability requirements
The website interface must be easy to use and simple to navigate.
Product information must be clear and complete so customers can make their
purchasing decisions.
The payment system must be easy to use and secure.
The customer support system should be easy to access and provide useful information
d. Reliability requirements
The website must be able to operate continuously without interruption
The website must have an effective data backup system to protect customer data in case
of an incident.
e. Security and privacy requirements
Websites must have security measures to protect customers' personal information, such
as data encryption and two-factor authentication.
Website must comply with data privacy laws and regulations.
Website must have a clear and transparent privacy policy.

11
GROUP C - ANALYSIS & DESIGN WEB

II. Design layouts and site infrastructure

1. Wireframe
HomePage

Figure 3: Home Page wireframe

12
GROUP C - ANALYSIS & DESIGN WEB

Login & Sign in Page

Figure 4: Login & Sign in Page wireframe

About us Page

Figure 5: About us Page wireframe

13
GROUP C - ANALYSIS & DESIGN WEB

Product Page

Figure 6: Product Page wireframe

14
GROUP C - ANALYSIS & DESIGN WEB

Details Product Page

Figure 7: Details Product Page wireframe

Support Page

Figure 8: Support Page wireframe

15
GROUP C - ANALYSIS & DESIGN WEB

Policy Page

Figure 9: Policy Page wireframe

FAQ Page

Figure 10: FAQ Page wireframe

16
GROUP C - ANALYSIS & DESIGN WEB

Shopping Guide Page

Figure 11: Shopping Guide Page wireframe

Contact Page

Figure 12: Contact wireframe

17
GROUP C - ANALYSIS & DESIGN WEB

Blog Page

Figure 13: Blog Page wireframe

Cart Page

Figure 14: Cart Page wireframe

18
GROUP C - ANALYSIS & DESIGN WEB

Payment Page

Figure 15: Payment Page wireframe

Thank you Page

Figure 16: Thank you Page wireframe

19
GROUP C - ANALYSIS & DESIGN WEB

2. UI mockups design
Home Page

Figure 17: Home Page UI mockups design - 01

Figure 18: Home Page UI mockups design - 02

20
GROUP C - ANALYSIS & DESIGN WEB

Figure 19: Home Page UI mockups design - 03

Figure 12: Home Page UI mockups design - 04

21
GROUP C - ANALYSIS & DESIGN WEB

Figure 21: Home Page UI mockups design - 05

Figure 22: Home Page UI mockups design - 06

22
GROUP C - ANALYSIS & DESIGN WEB

About us Page

Figure 23: About us Page UI mockups design - 01

Figure 24: About us Page UI mockups design - 02

23
GROUP C - ANALYSIS & DESIGN WEB

Figure 25: About us Page UI mockups design - 03

Figure 26: About us Page UI mockups design - 04

24
GROUP C - ANALYSIS & DESIGN WEB

Product Page

Figure 27: Product Page UI mockups design - 01

Figure 28: Product Page UI mockups design - 02

25
GROUP C - ANALYSIS & DESIGN WEB

Figure 29: Product Page UI mockups design - 03

Figure 30: Product Page UI mockups design - 04

26
GROUP C - ANALYSIS & DESIGN WEB

Detail Products

Figure 31: Detail Products Page UI mockups design - 01

Figure 32: Detail Products Page UI mockups design - 02

27
GROUP C - ANALYSIS & DESIGN WEB

Figure 33: Detail Products Page UI mockups design - 03

Support Page

Figure 34: Support Page UI mockups design

28
GROUP C - ANALYSIS & DESIGN WEB

FAQ Page

Figure 35: FAQ Page UI mockups design - 01

Figure 36: FAQ Page UI mockups design - 02

29
GROUP C - ANALYSIS & DESIGN WEB

Shopping guide Page

Figure 37: Shopping guide Page UI mockups design - 01

Figure 38: Shopping guide Page UI mockups design - 02

30
GROUP C - ANALYSIS & DESIGN WEB

Policy Page

Figure 39: Policy Page UI mockups design

Purchasing policy Page

Figure 40: Purchasing policy Page UI mockups design - 01

31
GROUP C - ANALYSIS & DESIGN WEB

Figure 41: Purchasing policy Page UI mockups design - 02

Payment policy Page

Figure 42: Payment policy Page UI mockups design - 01

32
GROUP C - ANALYSIS & DESIGN WEB

Figure 43: Payment policy Page UI mockups design - 02

Delivery policy Page

Figure 44: Delivery policy Page UI mockups design - 01

,

33
GROUP C - ANALYSIS & DESIGN WEB

Figure 45: Delivery policy Page UI mockups design - 02

Privacy policy Page

Figure 46: Privacy policy Page UI mockups design - 01

34
GROUP C - ANALYSIS & DESIGN WEB

Figure 47: Privacy policy Page UI mockups design - 02

Contact Page

Figure 48: Contact Page UI mockups design - 01

35
GROUP C - ANALYSIS & DESIGN WEB

Figure 49: Contact Page UI mockups design - 02

Figure 50: Contact Page UI mockups design - 03

36
GROUP C - ANALYSIS & DESIGN WEB

Blog Page

Figure 51: Blog Page UI mockups design - 01

Figure 52: Blog Page UI mockups design - 02

37
GROUP C - ANALYSIS & DESIGN WEB

Figure 53: Blog Page UI mockups design - 03

Account Page

Figure 54: Account Page UI mockups design - 01

38
GROUP C - ANALYSIS & DESIGN WEB

Figure 55: Account Page UI mockups design - 02

Figure 56: Account Page UI mockups design - 02

39
GROUP C - ANALYSIS & DESIGN WEB

Figure 57: Account Page UI mockups design - 02

Cart Page

Figure 58: Cart Page UI mockups design - 01

40
GROUP C - ANALYSIS & DESIGN WEB

Figure 59: Cart Page UI mockups design - 02

Figure 60: Cart Page UI mockups design - 03

41
GROUP C - ANALYSIS & DESIGN WEB

Payment Page

Figure 61: Payment Page UI mockups design - 01

Figure 62: Payment Page UI mockups design - 02

42
GROUP C - ANALYSIS & DESIGN WEB

Figure 63: Payment Page UI mockups design - 03

Figure 64: Payment Page UI mockups design - 04

43