Working with the concepts and materials developed in all of your prior projects, you will be designing an offline and online approach to have Vancouver residents engage in the following:
- What is an environmental footprint? Help a non-specialized audience understand the concept.
- What is the city's environmental footprint? Help them understand how the larger community impacts the environment.
- What is their contribution to an environmental footprint? How do they as individuals impact an environmental footprint, and how might they influence an environmental footprint?
The goal of this project is to inform the individuals who view the offline materials — which present an introduction — to move to the online materials — where they can get more depth (as appropriate). Within this project you can take a more persuasive approach if you would like by suggesting direct actions that individuals should take. Though keep in mind that within this course you should never intentionally misrepresent the data you are presenting for the purposes of swaying someone's opinion.
This project is to be completed in groups of three.
What are 'offline' materials?
The offline materials are any non-web-based material that helps inform residents and directs them to the online materials for further information. The offline materials are flexible in their form (i.e. print, physical, experiential, etc.) and you should consider the different approaches to information design we have seen and discussed over the course of the term. Please ensure that these materials are produceable today; as in, we can actually make what you are proposing using today's technology.
The final offline materials need to be sufficiently refined to help us understand the information being conveyed and the experience of the audience. For example, print materials should be fully realized, while physical items — i.e. a talking trash-can — can be Wizard of Oz'd. Should you be unsure of level of refinement expected, please check with your instructors.
Due to problematic use in prior terms of this project, offline materials may not make use of QR codes without research supporting their use. It is recommended that you talk with your TA or instructor to ensure you have a sufficient rationale for their use.
What are 'online' materials?
The online materials must be a fully-responsive website and should be formed of the existing collection of information provided by the city — the updated EF Tool Report, the new ecoCity Pilot Report, and the Lighter Footprint Goal Presentation. This being said, please design the site without any Vancouver City branding and focus on tailoring the content and structure as needed for your project.
There are no set number of pages required for the online materials, so ensure that you are conveying the information provided effectively. You are welcome to edit the content if you would like but please be mindful of your time, as we will only be grading you on information architecture concerns such as content structure and labelling.
Before your lab time on Apr 10/11.
30% of your final grade.
There are a number of weeks in which to complete this project, so please make sure to read the instructions below carefully and note what are individual and group deliverables.
Starting Mar 6/7
- As a group complete the team contract for P04.
- as a group, determine all the sections that need to be built for your online materials and split the sections as evenly as possible amongst yourselves for building. Feel free to draw on your earlier wireframes as a reference of what to build.
- Individually build out your subset of HTML for all your sections (no CSS yet). Ensure that you are using:
- Valid HTML5.
- Semantic markup.
- Commenting as much as possible (for your own ease of understanding).
- Use as much real content as possible.
- Individually, identify what additional content is needed. This list should include:
- What kinds of photos or images might be necessary?
- What kinds of icons might be used?
- Are there any information visuals that might be required?
- As a group, come up with five possible offline approaches to engaging individuals in the given information. Think about all the different approaches to information design we have seen and discussed over the course of the term, and what might engage individuals sufficiently to have them then engage in the online materials. We challenge you to think beyond the confines of 'traditional' information design.
As time will be tight in the labs, we recommend the following "mad-lib" structure to prepare explanations of your offline approaches with: Our 'offline' approach is a (insert final form). It would be successful in informing our audience about environmental footprints because (insert why it would succeed) and would guide them to the online materials through (insert how they are lead to the online materials).
Due in your Mar 13/14 lab:
Starting Mar 13/14
- Individually, with your subset of pages apply a responsive grid structure and begin styling them. Ensure the following:
- The HTML and CSS validates.
- The grids are defined in a grid.css file
- The grids are responsive; they collapse on smaller devices or displays
- Individually, from your list of content compile the image and information visual content you require as needed (some options listed below). Keep photos useful and realistic (i.e. avoid palm trees). Cite any material that is not yours in your code.
- As a group, develop your initial designs for one offline approach to engage individuals. This can include visual, physical, experiential, or audio information design.
Due in your Mar 20/21 lab:
Starting Mar 20/21
- As a group, consolidate your pages into one set. Ensure that:
- The HTML and CSS validates.
- There is a clean file and folder structure.
- File naming conventions makes sense.
- The website is functioning as expected on different devices and display sizes.
- We can begin testing and talking about the design of the pages.
- As a group, refine your desings for your offline approach.
Due in your Mar 27/28 lab:
Starting Mar 27/28
- Based on crits in the labs revise your website as a group, focus on:
- Creating a consistent experience between devices.
- Ensuring the user knows how to navigate the hierarchy of information.
- Effectively and appropriately using information (visual, textual, interactive).
- Creating a positive experience for the user.
- Clarifying interaction and navigation for the user.
- As a group, refine your offline approach and prepare a final digital or physical copy of the designed materials (as appropriate).
Due in your Apr 3/4 lab:
Starting Apr 3/4
- Based on final crits refine both your website and offline materials to a high-fidelity final version. Please take into consideration the requirements of the rubric to aim for your ideal grade.
- Put together a presentation which takes only three minutes to:
- Explain how and why the audience would understand the online/offline materials.
- Clearly present the successes of the design using common language.
- Present a clear and convincing rationale for why we would use your design in an actual implementation.
Final deliverables are due to Canvas before your Apr 10/11 lab and make sure to double-check all your submitted files to ensure they can be opened. Final submission is:
- 1 final responsive HTML+CSS website (on your server space)
- 1 final offline approach to engagement (digital or physical submission, as appropriate).
- 1 set of presentation slides with URL to final project (PDF)
Your project will be graded on the following criteria, a more detailed rubric is available on the course pages.
- Process — weekly deliverable checks, quality/quantity in exploring designs (4 pts)
- Final Design/UX — visual language, consistency, interactivity, responsiveness, fidelity of offline material (7 pts)
- Code/Development — validity, readability, cleanliness and structure (7 pts)
- Content/IA — flow through information, content quality/use (3 pts)
- Presentation — punctuality, use of evidence, quality of rationale (4 pts)