ASSIGNMENT 2 FRONT SHEET
Qualification
BTEC Level 5 HND Diploma in Computing
Unit number and title
10: Website Design & Development
Submission date
Date Received 1st submission
Re-submission Date
Date Received 2nd submission
Student Name
Huỳnh Trần Anh Khoa
Student ID
GCS200252
Class
GCS0903A
Assessor name
Hồ Nguyễn Phú Bảo
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
X
P6
X
P7
X
M4
M5
D2
D3
❒ Summative Feedback:
Grade:
❒ Resubmission Feedback:
Assessor Signature:
Date:
Signature & Date:
Table of Contents
Table of Contents
2
P5 Create a design document for a branded, multipage website supported with medium-fidelity wireframes and a full set of client and
user requirements.
3
User Story
3
Function of Website
3
Use Case Diagram
5
Wireframes
6
Site Map
15
P6 Use your design document with appropriate principles, standards, and guidelines to produce a branded, multipage website supported
with realistic content.
17
Home Page and Landing Page
17
Login Page
21
Register Page
22
Profile Page
23
My Cart Page
24
Admin Page
25
GIT Hub Code
26
KhoaKelbin1604/Kelbin-Garage (github.com)
26
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).
26
P5 Create a design document for a branded, multipage website supported with medium-fidelity
wireframes and a full set of client and user requirements.
User Story
The proprietor of a supercar dealership in Ho Chi Minh City approached my firm and requested me to create a website to sell supercars. To make
it simpler for consumers and showroom administrators to use, the website should be very simple to use. Customers may order and purchase
limited edition supercars online, as well as modify them. Admins and showroom owners, in particular, can use this website to add or delete
automotive products from their showroom for simpler customer communication. Because this is a new supercar dealership, it is still modest and
has few items; there are only ten models for sale right now, and they are all extremely rare supercars from across the world that consumers come
to buy. The vehicle is really packed. This website primarily assists showroom owners and personnel in controlling the quantity of consumers that
come to buy.
Analyze user requirements:
+ Based on the situation above, I explain the thoughts that the customer wants to see on their website.
+ Make the website as basic and user-friendly as feasible.
Login Page and Register Page:
+ Register: As a supercar buyer who has not yet created a separate account, I would want to create one so that I may use the system. Those
who have not registered are unable to add things to their carts or make purchases.
+ Login: As a registered supercar buyer, I'd want to check in to the system so that I may access all features and attributes. Registered
purchasers will have access to the store's access rights and preferred rules, as well as the ability to purchase and add to cart.
Profile Page:
+ Profile page: The purchaser of these things must create a distinct profile. Full name, Citizen ID, B2 driver's license, handover address,
exterior color, personal inside color, email, and phone number are all required. Because this is a huge and expensive product, I need to
present enough information to the showroom so that they can select the best product.
Home Page (Products on display):
+ Displaying product: This is the store's homepage: this page will exhibit some of the usual supercar models available in the showroom.
Some things will have to wait until they can be shipped back to Vietnam. Quantities are limited, so place your purchase as soon as possible.
Orders Page (Shopping cart to buy):
+ Shopping basket to purchase: This function is only available to those who have previously created an account. Those who already have an
account will be able to order the suitable supercar they have selected by clicking on the Orders page. Those without an account will be sent
to the account signup page.
Admin page for administrators:
+ Administrators have the ability to add new supercar models and delete any goods that are no longer available. The administrator has the
authority to manage client accounts.
Function of Website
●
●
-
Customers
Login and register
Choose Cars
Orders Cars
Choose a personalized color
Admin
Manage Cars
Manage Category
Manage Customer’s Account
Manage User
Updates Cars
Use Case Diagram
Figure 1: Diagram
Wireframes
Figure 2: Home Page (Landing Page)
Figure 3: Home Page mockup
Figure 4: All Products’s Page
Figure 5: Orders Page (My Cart Page)
Figure 6: Profile Page (In Orders Page)
Figure 7: Login Page
Figure 8: Register Page
Figure 9: Admin Page
Figure 10: Create a product (In admin page)
Site Map
Figure 11: Site Map
P6 Use your design document with appropriate principles, standards, and guidelines to produce a
branded, multipage website supported with realistic content.
Home Page and Landing Page
Login Page
Register Page
Profile Page
My Cart Page