ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date March10,2020 Date Received 1st submission

Re-submission Date March 10 Date Received 2nd submission

Student Name Trần Vũ Linh Student ID linhtvgcs18741

Class GCS0706A Assessor name Vo Thi Thanh Van

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.

Student’s signature

Grading grid

P5 P6 P7 M4 M5 D2 D3
 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

ASSIGNMENT 2 BRIEF
Qualification BTEC Level 5 HND Diploma in Computing

Unit number 10: Website Design & Development

Assignment title Web Services Presentation and Guidebook

Academic Year 2018 – 2019

Unit Tutor Vo Thi Thanh Van

Issue date March 10 Submission date

Page 2
IV name and date

Submission Format:

Format:
1. A report document including some sections
- Section 1: A review of appreciate web design principles, standards and guidelines.
- Section 2: Design document for online shopping website.
- Section 3: Implementation of website design.
- Section 4: Test plan and test evaluation.
2. A compressed file that encapsulates all source code and particular necessary resources including files of
images, style sheets, java script and other files to support to install multipage website such as sql script
and installation guide.

Submission Students are compulsory to submit the assignment in due date and in a way requested by
the Tutors. The form of submission will be a soft copy posted on
http://cms.greenwich.edu.vn/
Note: The Assignment must be your own work, and not copied by or from another student or from
books etc. If you use ideas, quotes or data (such as diagrams) from books, journals or other sources, you
must reference your sources, using the Harvard style. Make sure that you know how to reference
properly, and that understand the guidelines on plagiarism. If you do not, you definitely get failed

Unit Learning Outcomes:

LO3 Utilise website technologies, tools and techniques with good design principles to create a multipage
website.

LO4 Create and use a Test Plan to review the performance and design of a multipage website.

Assignment Brief and Guidance:

You work as a full-stack web team leader for a leading creative web solutions and marketing company. Your team
is about to have a big contract to develop an online shopping mall.

In order to finish your work effectively you need to review all appropriate principles, standards and guidelines for
website designing and development, evaluate all technical challenges to produce a good design document for the
online shopping website with wireframes, functional illustrations and a full set of client and user requirements.
Then, you lead your team to utilize web design and development technologies, tools and techniques to implement
your web design to develop the online shopping website. To get good result, you always ask your team for
following your design document by comparison between created multipage website with your design document
and evaluation.

As your role, to ensure that the multipage website for online shopping developed by your team is a high quality
product, you also need to ask your team members to follow quality assurance process and implement it during

Page 3
your design and development stages by creating a suitable test plan. The test phase should be seriously
implemented by reviewing and analysing all test results to evaluate applied quality assurance process and point
out suggestions of improvements for online shopping website

Page 4
 Learning Outcomes and Assessment Criteria

Pass Merit Distinction

LO3 Utilise website technologies, tools and techniques with good design
principles to create a multipage website

P5 Create a design document for a
branded, multipage website
supported with medium fidelity
wireframes and a full set of client
and user requirements.
M4 Compare and contrast the D2 Critically evaluate the design and
multipage website created to the development process against your
design document. design document and analyse any
technical challenges.

P6 Use your design document with

appropriate principles, standards
and guidelines to produce a
branded, multipage website
supported with realistic content.

LO4 Create and use a Test Plan to review the performance and design of a D3 Critically evaluate the results of
multipage website your Test Plan and include a review
of the overall success of your
P7 Create a suitable Test Plan M5 Evaluate the Quality Assurance multipage website; use this
identifying key performance areas (QA) process and review how it was evaluation to explain any areas of
and use it to review the implemented during your design success and provide justified
functionality and performance of and development stages. recommendations for areas that
your website. User Experience (UX) require improvement.
and User Interface (UI).

Page 5
Content:
P5 Create a design document for a branded, multipage website supported with medium fidelity wireframes
and a full set of client and user requirements……………………………………………………………………………………..
P6 Use your design document with appropriate principles, standards and guidelines to produce a branded,
multipage website supported with realistic content…………………………………………………………………………….
P7 Create a suitable Test Plan identifying key performance areas and use it to review the functionality and
performance of your website. User Experience (UX) and User Interface (UI)………………………………….....…
Reference: . ………………………………………………………………………………………………………………………....………………

Page 6
P5 Create a design document for a branded, multipage website supported with medium fidelity
wireframes and a full set of client and user requirements
1.1 Client and user requirement analysis

❖ Customer request:
➢ My client asked me to design a website to sell clothes. The layout requirements should
be clear and show the full information of the store.
❖ Website users:
➢ Viewers are often drawn to sites that have clean layouts, harmonious colors,
comprehensive product information and great discounts.

1.2 Use case diagram

Page 7
Page 8
Page 9
1.3 Site map
➢ What is a sitemap?
▪ Definition:
• Sitemap (map system of a website) is a text file containing all the URLs of the
website, namely the system of links to the main page and sub-pages which are
clearly and clearly displayed. circuit.

• In addition, your sitemap can also provide valuable metadata associated with the
websites that you list in the sitemap. It provides information, such as when the page
was last updated, how often the website has changed, or how important the page is
to other links on the site.

▪ Function of the sitemap:

Page 10
• Different from what many people think, the sitemap does not immediately
increase the ranking of your website. The entirety of the main job of Sitemaps is to
assist in directing the tools, the search engines can access and collect information
from the website efficiently and simply for an accurate assessment of the website.
more.

• At the same time, the sitemap will retain the function of updating changes on your
website when you make changes, such as adding a new page or modifying the
current website, etc.

Page 11
 - To create a website, attract customers and remind them of the website in order to note the following
points:
-The location of the tools on the website should be organized in a scientific and user-friendly manner.
Convenient for users and customers.
-The image of the product must be clear, preferably with simulated and enlarged images for easy
reference by customers, the price must also be clear to avoid any confusion when receiving the goods.
- Requirements for product types: classification specific to the product and on each type requires the
fastest product search engine.
- List of products by category, sorted by product screen according to certain criteria such as price, product
launch date or product name.
-Provide the details of each product to customers: name, price, image, usage information, special
attributes or need to be aware when using the product.
-The website ordering tool must be clearly displayed on each product.

P6 Use your design document with appropriate principles, standards and guidelines to produce a
branded, multipage website supported with realistic content.

Page 12
Page 13
Login :

Page 14
Click button:

Page 15
P7 Create a suitable Test Plan identifying key performance areas and use it to review the functionality
and performance of your website. User Experience (UX) and User Interface (UI)

❖ There are three reasons why we recommend testing:

➢ To reduce risk. Reducing the risk of failure normally increases the chances your
product will succeed.
➢ To reduce costs. Investing in testing with users ensures that issues get caught
sooner, good ideas are introduced faster, and unnecessary product design and
development efforts are reduced.
➢ To make the product better. Creating user-centric, award-winning UX typically
involves testing. [1]

❖ 10 User Experience Testing Methods to Improve Your Website UX:

➢ Card Sorting:
• Think of card sorting as a way to efficiently determine how elements
of your website should be organized. You’ll develop a site hierarchy
and navigation that meets your users’ specific needs.

Page 16
 ▪ At first, you don’t know the order in which the cards go. As you
test, you’ll figure it out.
▪ Take the jumbled card graphic above. Each card has
information on the reverse side: product descriptions, for
instance, or support pages, informational content, and so on.
▪ You ask users to categorize the content. You want rows and
columns. Columns might represent page categories, for
instance, while rows show importance
▪ You can do this with people in person or virtually through an
online tool. Either way, you want real users’ feedback.

➢ Moderated User Testing

▪ In moderated user testing, someone moderates the testing
experience. It could be an individual in a room with participants
or a moderator in a discussion group.
▪ Whatever the case, moderators can answer questions from
participants, help guide the process, and provide insight into
what the website wants to achieve.
▪ Moderated user testing is also useful when you want someone to
explain how a product or interface works. If confusion exists,
there’s probably an issue with UX. A moderator can report back
on what he or she witnessed during the test.

➢ Unmoderated User Testing:

▪ Many experts believe that unmoderated user testing is more
effective. After all, won’t people feel more comfortable sharing
their actual feelings when nobody’s breathing down their necks?
▪ This is true to a certain extent, but you also have to leave room
for user error and unfocused participant behavior. Running both
Page 17
 moderated and unmoderated user experience testing can make
the results far more accurate.
➢ Voice of Customer:
▪ There are a few hard facts when it comes to customer feedback.

▪ For instance, fewer than 5 percent of dissatisfied customers actually

contact the company to complain. This means that 96 percent simply
suffer in silence, and according to one study, 90 percent will never
return to that business.

▪ Learning how to listen to your customers can become an excellent

exercise in user experience testing. Sources of information might
include:

• Product or service reviews on your website

• Reviews on third-party websites
• Emails and phone calls
• Submitted feedback forms
➢ Asking your users
▪ You don’t have to wait for users to contact you. Consider setting up a
poll or survey to ask people for their opinions directly.
▪ You can do this on your blog, homepage, or anywhere else you like. If
you have a large social following, consider asking users to weigh in on
Facebook, Twitter, or Instagram.
Page 18
 ➢ Recordings
▪ Have you ever wondered how exactly users interact with the pages on
your website? If so, you can find out through recordings.

▪ This type of user experience testing allows you to record sessions as

users interact with your website. You’ll see where they click and how
they navigate the site.

➢ Availability and accessibility:

▪ You’ve probably encountered this before. You type a URL into your web browser
and see something like this:

Page 19
 ▪ Annoying, right? That’s a problem with accessibility.

▪ Maybe you’ve also visited a website where you click on what you
assume is a link, but it doesn’t take you anywhere. Or perhaps the link
to the About page in the navigation pane leads you to the contact
page.

▪ Auditing for accessibility and usability is essential for user experience

testing.
➢ Aesthetics
▪ We’ve all heard you shouldn’t judge a book by its cover, right? But be
honest. Which of these two books would you be most likely to buy?

▪ I think we can all agree that one is more appealing than the other.

▪ User experience testing should always involve aesthetics, However,

everyone has different opinions about beauty.

Page 20
 ▪ That’s why you can’t take one person’s opinion. You need a
representative sample to figure out what aesthetic details your specific
audience prefers.

➢ Brand Consistency:
▪ When your brand appears, sounds, or behaves differently from one
page of your website to the next, you risk confusing — or worse,
alienating — your target audience.

▪ It’s kind of like your favorite comedian. You’re used to his specific brand
of jokes. Then you buy tickets to his latest show, and you’re
flabbergasted. He sounds nothing like himself.

▪ And you might never buy tickets to one of his shows again. Why? You
wouldn’t know what to expect because his credibility has been
shattered.

➢ A/B Testing
▪ I run lots of A/B tests. If you asked me how many I’ve conducted over my
career, I couldn’t tell you.
▪ And I still stand by them. There’s no easier way to compare two versions
of a marketing asset, collect results from your target audience, and
identify a clear winner. You change one element on the page or in the
email — or whatever you’re testing — and you push both versions live. At
the end, you know which one performed better.
▪ It’s like the two book covers I showed you above. I could make the test a
little more practical by changing nothing more than the color.

Page 21
 ▪
▪ I’m not a fan of manual A/B testing though. I don’t have time to rifle
through pages and pages of data. That’s why I love tools like Crazy Egg and
Hello Bar. They let you run automated A/B tests to your heart’s content.

Reference:
[1] Fresh Consulting. 2020. 8 Methods Of UX Testing - Fresh Consulting. [online] Available at:
<https://www.freshconsulting.com/8-methods-of-ux-testing/> [Accessed 10 March 2020].
[2] The Daily Egg. 2020. User Experience Testing: UX Methods And Tools. [online] Available at:
<https://www.crazyegg.com/blog/user-experience-testing/> [Accessed 10 March 2020].
[3] Draw.io. 2020. Flowchart Maker & Online Diagram Software. [online] Available at:
<https://www.draw.io/#G1lSug6r-2y7iU1auSVVTAUjH7WnWjzFaf> [Accessed 10 March 2020].
[4] Mona Media. 2020. Sitemap Là Gì? Cách Tạo Sitemap Và Khai Báo Với Google - Mona Media. [online]
Available at: <https://mona.media/sitemap-la-gi-cach-tao-sitemap-va-khai-bao-voi-google/> [Accessed 10
March 2020].

Page 22