(Your company name)1 Ecobrand for the planet!2

Former university mates and start-up co-founders, Alex Tearoa (a clothes and fashion design expert), Dave Smith (a sustainability and environmental expert), and Ella Jiang (a data and user experience expert), have founded a social enterprise based on sourcing and selling ethically produced and environmentally sustainable designer clothing. From their initial market research  in  New Zealand, they  have  identified  an  upsurge  in demand for  ethically  and sustainably sourced designer apparel.  It  is clear from these three young  entrepreneurs’ research  that  a  growing  percentage  of their  generation  are  climate  conscious  and  are increasingly cautious about the impact of their shopping habits on the future of the planet.

The factors required for a fashion label to be considered ethical and ‘green’ or eco-friendly include the following:

•    Its production generates a minimal amount of toxic waste (e.g., dangerous chemicals and microfibres) released into the environment, and supports animal welfare

•    It is produced in fair working conditions and sold using fair-trade principles

•    The supply chain is circular such that it supports recycling, upcycling, and thrifting

•    There is transparency about its supply chain and carbon footprint

•    It is fashionable but the styles are classic enough to be worn for several years

Alex, Dave, and Ella have decided to create an online presence for their social enterprise, that strongly relies on a website to communicate their message and to sell their apparel. The young entrepreneurs realise that they need to demonstrate that their clothing brand leads to less strain on the planet’s resources as eco-friendly clothing is made through sustainable practices. They also realise that, to have a selling point and to compete with other brands, their apparel needs to be distinctive and unique. So far, Ella, their data and user experience expert, has created a very simple one-page website to get the company started.

To ensure a clear branding is well-communicated, Alex, Dave, and Ella have agreed to run with the motto “Ecobrand for the planet!” Their hashtag #EcoB is quickly trending and catching a following on their social media platforms. They have also prepared information that they would  like to  have communicated creatively via their website. This  includes  transparent communication about where they source their apparel and materials, how the materials are produced, and who is involved in their supply chain. The three entrepreneurs also want their customers to be able to calculate the carbon footprint and ethical impact that each apparel item is associated with, based on some metrics (e.g., shipping distance from production site, average salary, microfibre risk level, and carbon impact of raw materials). Additionally, they vow to ensure that all their employees and everyone working in their supply chains are paid a living wage. The three realise that to connect with their customers, they also need to gather feedback from them, and therefore they would like to have this function on the website.

Your Task for this Project

Alex, Dave, and Ella have enlisted you to develop a better website for their social enterprise. 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, communicating all of the information  in  the  case  description  (above),  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 you’ll 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:

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 company’s 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 designer clothing and other apparel that the company offers. This page should include information about the specifics of the products that help to communicate the sustainability and eco-friendly goals of the company.

(i)    You need to use this page to create supply chain profiles of some of the clothing (e.g., information such as where and how the clothing or apparel were sourced. Remember that Alex, Dave, and Ella want to emphasise ethical and sustainable sourcing). Be creative, this is your time to showcase your presentation skills using CSS!

(ii)    On the products page you should include a carbon footprint calculator. A customer

should be able to calculate the carbon footprint of some clothing or apparel. Thus, you should create both (i) the metrics for calculating this and (ii) at least ONE JavaScript function to allow customers to perform such a calculation.

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 clothing and apparel products ethically sourced?”, “Do you provide 100% organic clothes?”, and “How do I contact you if I don’t receive my 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 apart from those given here.

4. A registration & payments page – the HTML document should be titled “regpay.html” . This page should contain two things.

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

(ii)  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 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.

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:

1.  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.

2.   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.

3.  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.

4.  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’ .

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

6.  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.