| Website Design Brief |
| Rings and Things |
| ICTWEB501 Assessment Task 2, Part A Naomi Molineux – 471500230 |
| 12/11/2021 |
Contents
Accessibility and Web Standards. 5
Summary of Website Design
Due to the current COVID-19 situation a local jeweller has decided to move her business online. The client wants an e-commerce website that show cases the stores jewellery. The client has requested a website that has a simple but intuitive and modern design with the goal of a functional user-friendly website that also has low set up and maintenance costs.
Through the website users need to be able to create an account, which allows them to add items to their cart which they can then purchase. The users account details, order details and product details will be stored in a database. The client would like to be able to manage the website and database through an administrator account where she can add, delete, and update the store products, as well as check the details of customers’ orders.
The client and users of the website expect a website that:
- Is functional and intuitive to navigate
- Works seamlessly across multiple devices and browsers
- Meets industry standards and includes modern technology
- Stores users’ personal information securely
- Meet the accessibility standards
- Only allows authorised access to secured pages
Business rules
The client has specified the following business rules:
- A user can not add an item to their cart unless they are logged in
- Only users with accounts can purchase items
- Only administrators can access the update products page and the orders page
- Administrators accounts cannot purchase items
- Administrators accounts must be created through the back end database, they cannot be created through the website
- User passwords must be a minimum of 8 characters in length
- Only the necessary information should be stored in the database as the client wants to keep the website simple and the database small to minimise server requirements.
- Forms need to be validated before data is entered into the database to avoid invalid data being stored
- Administrator can see a list of all orders with order date and shipping date
- Administrator can see a list of unshipped orders and enter date order is shipped
- Website design to be simple, intuitive and modern
- The website is to pe primarily white, with black, grey and dull lime green as secondary colours
Website Structure
Below is a visual representation of the website structure in the form of a site map. The Home page is accessible from all pages. If a user tries to add a product to their cart or view their cart when they are not logged in, they will be taken to the Login page. If a user successfully logs in as an administrator, they will be taken to the Update Products page. If a user successfully logs in as an account holder, they will be taken to the Shop page where they can add products to their cart which they can then buy through the checkout page.
Use Cases
Below is a use case diagram that shows how users interact with the site. There are two types of users the customers and the administrator.
The customers can browse products, sign up for the newsletter, register and login. To login customers are required to be registered. To add products to their cart customers are required to be successfully logged in. To check out customers need to have products in their cart, and to complete their payment customers will be directed to an external payment service.
To access the administration area of the website the user is required to successfully login to an administrator account. Once logged in the administrator can manage the shops products and view customer orders and update the shipping date of unshipped orders.
Accessibility and Web Standards
It is expected that the website meets the international industry web standards. These standards are developed by the World Wide Web Consortium (W3C). These standards ensure accessibility for all users and web developers in terms of:
- Ensuring that code is valid and correctly structured
- Functionality across different browsers
- Functionality across different devices and screen sizes
- Accessible to people with disabilities
- Functionality on assistive technologies
- Media is accessible
- Text alternatives for non-text content
- Content is easy to see and hear
- Users can easily navigate and understand website and it operates in a predictable way
- Users can use different input modalities beyond keyboard
- Content is compatible with current and future user tools
The website will be tested against these standards using the following services:
| Name of Service | Link | Level |
| W3C markup validation service (tests HTML and XHTML) | https://validator.w3.org/ | HTML 5 |
| W3C CSS Validation service | https://jigsaw.w3.org/css-validator/ | CSS level 3 + SVG |
| AChecker Web Accessibility Checker | https://achecker.achecks.ca/checker/index.php | WCAG 2.0 level AA |
AChecker is designed to test websites against a variety of Accessibility Guidelines. The Guidelines that are most widely used across the industry is the W3C Web Content Accessibility Guidelines (WCAG) Version 2.0 developed by W3C. The WCAG sets out requirements to help web designers ensure that the websites they create are accessible to people with disabilities. It is a requirement that all Australian Government websites now comply with this standard to level AA. The Rings & Things website will be tested to ensure it meets WCAG 2.0 level AA.
Database requirements
The database has been designed to meet the business specification of minimising the server requirements while being fully functional. The website requires minimal data from users and only displays minimal product data, which keeps the website simple and reduces the database storage requirements. The data is stored across four tables, as seen in the diagram below.
When users register using the form on the website, this data will be stored in the Users table. Only very basic personal information is stored. The administrator field determines if the user is an administrator. An administrator is represented by a 1 and all other users a 0. The password is stored across two fields, one for the password salt and one for the hashed password.
Technical Requirements
The website will be designed with the mobile device user in mind. It will be displayed seamlessly across all sized devices and will be compatible with the latest versions of the following browsers:
- Desktop: Chrome, Firefox, Safari, IE + Edge
- Mobile: Chrome Android and iOS, Safari iOS
The database will be created through PHPMyAdmin using the MariaDB server linked to the Apache web server. The languages that will be used to create the website include HTML 5, CSS 3, Php 7.4.6, MySQL and ECMAScript (AKA JavaScript) 2018. The storage of the data and server requirements will be handled by a third party.
The shopping cart data will be stored in the session data, so it won’t be accessible to users the next time they log in. The alternative is to store cart data in the database, but this requires more data storage and a system to check that the items in the cart are still valid each time the user logs in.
For the initial website design, the system uses simple cart management and a small database to keep the costs low. However, as the business grows there is opportunity for additional technology to meet the growing demands of the website. This could include Order Management System (OMS) software integrated with the database and website. OMS would promote and better user experience through a more dynamic cart, where they could return to their cart over multiple sessions, a seamless returns process and more information available to customers about their orders and the products. It would also allow the business to handle an increased number of orders due to better inventory management and more automation along the supply chain.
Security
The security of the website will be maintained through multiple systems. To protect users accounts, when registering users will be required to create a password that is a minimum of 8 characters. Passwords will be hashed using SHA265 plus a salt to provide maximum password security. When creating accounts for administrators the passwords will be extremely strong to reduce the risk of unauthorised users gaining access to the database and account holders’ personal information.
To ensure the website is stable and protect the database from SQL injection attacks, the php variables will be escaped. Forms and data will also be validated on the client-side and through the server-side to ensure only valid data is stored.
The website will be extensively tested before deployment to ensure functionality and security of the site.
Project Delivery Schedule
| Phase | Completion Date |
| Design Brief | 12/11/2021 |
| Front-end Prototype | 19/11/2021 |
| Back-end Prototype | 26/11/2021 |
| Testing and Debugging | 1/12/2021 |
| Website Deployments | 2/12/2021 |
| Finalization – Correct any Errors | 3/12/2021 |
