INFO101: Website Project [30%]

INFO101: Website Project [30%]

Due: 5pm Friday 14th October 2022

(Your company name)

Former university friends Lina Zhang (a health and wellbeing expert), Paora Kairua (logistics expert) and John Brown (a data and user experience expert) have decided to set up a company delivering care packages within New Zealand. Though the continuing rounds of Covid and requirements for self-isolation have opened this market up, they are aware that there are already several existing players in this area and have thought carefully about how to make their offering unique. They are going to target the 18 to 40 demographic and want to make sure their packages appeal to all genders (e.g., not just soap and scented candles!). They propose to offer packages that will delight and entertain as well as offering creature comforts. Sustainability is central to the companys philosophy, and they will sell New Zealand made products only. They have also determined that all their packaging will be fully recyclable, and that no products in the care packages will contain single use plastics. Due to limited storage facilities, they are going to offer only non-perishable goods (e.g., no fresh foods, flowers etc.). Their care packages need to stay affordable and will range in cost from $40 to $150. Many of their potential customers live in apartment blocks or halls of residence and they are aware that ensuring a package is delivered to the right person can be an issue in communal residences, especially if that person is self-isolating. So, one of their key selling points is a guarantee that their packages will arrive on time and to the designated giftee.

Their vision is that customers will be able to browse the website and select a suitable care package from a range of options. They will then enter details of who the package should be delivered to (the giftee) providing a full address and selecting a delivery window. On the day of delivery, the giftee will be texted a unique code that will be used to confirm delivery of the package.

Note:

There are some items that should not be included in the care packages e.g.,

Alcohol

Carbonated beverages/aerosols

Drugs

Cigarettes, vapes or nicotine

Fireworks

Flammable materials

Lithium batteries

Pornographic materials

Your Task for this Project

Lina, Paora and John have enlisted you to develop a website for their company. You are expected to effectively use your INFO101 skills to do this and to help them realise their goals. This includes coming up with the company name and appropriate branding, incorporating the products offered by the company, and creating the content, functions, and layout of the website.

The website should have a clear target audience and purpose, it should be informative and offer clear insight into the company and its values, and it should be easily navigable by the user.

The pages of the website should be consistent (i.e., font, colour, and formatting) to give a comfortable user experience. The brand design and logo for the website should also be clear and consistent with the goals of the company.

Importantly, the user should feel that their experience is unique, which means that youll need to get creative. Try to set your design apart from the design of websites for other organisations.

You are expected to showcase the use of a variety of HTML, CSS, and JavaScript, as learnt in INFO101 throughout your website. Under no circumstances should you use a template for this project as this would not be a demonstration of your coding skills learnt in INFO101.

The website MUST contain the following FOUR html pages:

1. A home page the HTML document should be titled index.html. On this page you should write a brief who we are story (150 words maximum) about the company and the companys mission. Include company contact information on this page. You need to make this up be creative!

2. A products page - the HTML document should be titled products.html. This page should display the range of care packages that the company offers. This page should include information about the specific contents of each of the care package, e.g., beeswax lip balm, 300ml, sourced in Takaka.

3. A frequently asked questions (FAQ) page the HTML document should be titled faq.html. It should show a list of answers to questions customers frequently ask, e.g., Are all your products ethically sourced?, How should the packaging be recycled?, and How do I contact you if my giftee doesnt receive their order? At the end of this page, you should add a form that enables customers to provide feedback to the company or ask any questions not addressed in the FAQ. Please remember to add your own questions in addition to those given here.

4. A registration & payments page the HTML document should be titled regpay.html. This page should contain four things.

A form that allows customers to register as a customer/create a site account and enter their details for future use.

Customers should be able to enter detailed address details for their nominated giftee including room or apartment number and mobile phone contact details.

Customers should also be able to nominate a delivery window for their package by selecting a specific date and a two-hour time window between 8am and 6pm.

A form that permits customers to pay for products they have purchased via the website. Two or more functioning buttons should be present (e.g., register and pay now), and they should each call a separate JavaScript function.

You are not expected to create fully functioning forms that can actually register people or take payments, but the buttons should display the appropriate messages that indicate that a JS function has been accurately used (for instance a correct result from a calculation operation or a message such as, Thank you for registering!).

You are expected to integrate content from your Workshops and Workshop Guides. As outlined in the marking rubrics (see page 4) the skills you have learnt in the workshops will form the basis of the assessment of your project. You are welcome to integrate HTML, CSS and/or JavaScript elements from outside of the workshop guides, in addition to what you have learnt in this course. In that case, you are required to reference any borrowed code, and to make sure you are doing that correctly. You also need to add a comment to tell us if you are using coding skills from previous web projects/courses; we need to know where your knowledge comes from so that we can be sure to assess your work accurately! Note that effectively implementing what has been covered in the workshop guides will be sufficient to obtain full marks of the coding requirements of this project; you do not need to do extra.

Project Submission Instructions

In your Website Project folder on Blackboard there is a Zip folder containing: 4xHTML, 1xJS, and 1xCSS documents. To use the files correctly, you will need to extract the zipped folder and save the individual files within the same folder in your computer. You may choose to use this as a starting point, or you can begin on your own. Do not create and submit more than the number of documents stated here (e.g., more than 4 HTML documents). If you do, this will result in you losing some marks for not following the project requirements (see Deduction of Marks for not following Instructions page 4).

If there is any part of this brief, project, or code you are not sure of, please refer to your workshop materials and/or post questions on the Blackboard discussion board. Please pay attention to the following:

When uploading your file please follow the submission guide on Blackboard. This guide is in the same content area as this assignment brief and submission link.

Please remember to check your @myvuw email address in the weeks following your website submission. You will be contacted through that address if there are errors which require you to resubmit.

We strongly advise you to submit your work a few days before the deadline. We recommend that you use Google Chrome, Microsoft Edge, or Firefox browser to submit this assignment. Alternative browsers may result in errors.

We cannot pre-mark assignments (i.e., tell you, in advance, whether your assignment is likely to achieve a passing grade). We do recommend that you perform a self-assessment before submitting your attempt, using the rubric as a checklist.

Any projects submitted after the due time will incur a late penalty of a 10% deduction in the available grade per day, and any submissions made 5 days (or more) after the due date will not be accepted for grading.

A reminder that a credible attempt of this assignment is a mandatory course requirement (MCR). This means that, in order to pass the course, you MUST submit this assignment, with an obvious attempt to address ALL of the requirements stated throughout this project brief. No submission means that you will have effectively failed INFO101.

Website Project Marking Rubric

Content Grade Contribution

[10 marks]

Target & Purpose: A user should be able to understand what the company does from reading the "who we are blurb and information about the company information on the Home Page. 3 marks

Information: All information on the website should offer accurate and clear insight to the user about the company and the products they sell. 3 marks

Text: The fonts and effects should be stylistically appropriate, and professional in presentation. 2 marks

Spelling & Grammar: All text on the site should be readable to the user and exhibit no spelling or grammar errors. 2 marks

Structure and Layout Grade Contribution

[8 marks]

Consistency: The user should experience a consistent layout (colour, text, format) across the whole website. 2 marks

Branding: The user should see a connection between the brand and the design features e.g., the logo and company name used. 2 marks

Creativity: Website should feel unique to the user. 2 marks

Navigation: The user should be able to navigate the website easily (e.g., go to different web pages & return to the home page). 2 marks

Code Elements Grade Contribution

[12 marks]

HTML: A variety of HTML elements is provided throughout website (images, hyperlinks, maps, tables etc.). 3 marks

CSS: A variety of CSS elements are provided throughout website. 3 marks

JS (Register and pay page): A correct and working use of JavaScript has been provided. The function contains an if statement, a variable (var) and an operator (e.g., +, -, *, /, %). 3 marks

Delivery Window (Register and pay page): Ability to select a specific date and 2-hour time window for delivery. 3 marks

Deduction of Marks for not following Instructions

Please note: The following criteria will be applied if you submit more than the number of files required for this project (i.e., more than 4 HTML files, 1 CSS file and 1 JS file).

HTML file - 2 marks will be deducted from your overall mark for every additional file

CSS file - 3 marks will be deducted from your overall mark for every additional file

JS file - 3 marks will be deducted from your overall mark for every additional file

Website Project Marking Rubric Extended Version

Assessment Areas Excellent Good Satisfactory Unsatisfactory

Content

[10 marks] Target and purpose 3marks - The user can very easily understand what the company does from reading information on the home page. This clearly derived from the project brief. 2 marks The user can understand what the company does from reading information on the home page. This is derived from the project brief. 1 mark The user can somewhat understand what the company does from reading information on the home page. This is derived from the project brief. 0 mark - The user cannot understand what the company does from reading information on the home page / This is not derived from the project brief.

Information 3 marks - All information on the website offers accurate and clear insight for the user about the company and the products offered 2 marks - Accurate information about the company and its products is offered although his could be clearer in some pages. 1 mark - Information about the company and its products is offered. Could have major clarity issues or limited information. 0 mark - Incorrect information / Information is not derived from the project brief.

Text 2 marks - The fonts and effects are stylistically appropriate, and professional in presentation 1 mark - The fonts and effects are stylistically appropriate in presentation. Some minor issues. 0.5 mark - There are some major readability issues with the fonts and effects used. 0 mark - The fonts and effects / styles are not readable due to poor contrasts.

Spelling and Grammar 2 marks - All text on the site is exhibits good language use with no spelling or grammatical errors. 1 mark - Some spelling and grammar errors are noticeable, but generally okay. 0.5 mark The work needed to be revised for major spelling and grammar errors. 0

No readable text / gross grammatical errors throughout.

Structure and Layout

[8 marks] Consistency 2 marks - The user experiences a consistent layout (colour, text, format) across the whole website. 1 mark - The user experiences a mostly consistent layout (colour, text, format) across the whole website. 0.5 mark There are many issues with layout consistency (colour, text, format) across the whole website. 0 mark - The user does not experience a consistent layout (colour, text, format) across the whole website.

Branding 2marks - There is an excellent connection between the brand and the design features e.g., the logo, company name, and colours used 1 mark - There is a good connection between the brand and the design features e.g., the logo, company name, and colours used 0.5 mark - There is a limited connection between the brand and the design features e.g., the logo, company name, and colours used 0 mark - The user does not see a connection between the brand and the design features e.g., the logo, company name, and colours used

Creativity 2marks - Website feels unique to the user 1 mark - Website feels mostly unique to the user 0.5 mark - Some elements feel too familiar 0 mark - Website does not feel unique to the user (i.e., copied from a template)

Navigation 2 marks - The user can navigate the website easily (e.g., follow links, go to different web pages and return, no dead links) 1 mark - The user can navigate the website somewhat easily (one link may be problematic) 0.5 mark There is limited navigability. The user encounters some broken or dead links. 0 mark - The user cannot navigate the entire website. Navigation bar does not work/not there, and all pages are not linked.

Code Elements

[12 marks] HTML 3 marks - A variety of HTML elements have been provided throughout website 2 marks - Some HTML elements have been provided throughout website 1 mark - Some key HTML elements are missing. 0 mark Only one HTML element provided

CSS 3 marks - A variety of CSS elements have been provided throughout website 2 marks - Some CSS elements have been provided throughout website 1 mark - Some key CSS elements are missing. 0 mark CSS missing throughout the website

JS

(Register and Pay Page) 3marks - A correct and working use of JS has been provided in the registration or payments form (or both). This JS function contains if statement, variable (var) & operator (e.g., +, -, *, /, %). 2 marks - A mostly working use of JS has been provided in the registration or payments form (or both). The function must contain some of the following: if statement, variable (var) & operator (e.g., +, -, *, /, %). 1 mark - There is a clear attempt to provide working JS features, but some errors have been made that prevent everything from running as intended. 0 mark - No JS features provided / JS file is missing / JS has been used but does not address the question (e.g., JS has been used to create interactive dates, time, calendar etc.)

Delivery Window (Register and Pay Page) 3 marks Ability to enter a specific date and time window is available and looks professional. 2 marks Ability to enter a specific date and time window is available but presentation is amateurish. 1 mark Clear attempt at date and time window but some functionality is lacking. 0 mark No ability to enter date and time window.