Working with the concepts and materials developed in all of your prior projects, you will be designing an offline and online approach to help residents of Vancouver engage and navigate through information on one of the election topics we have covered this term:
- Helping Vancouver citizens vote — particularly new voters, renters who may have moved and need to update their registration, and those with accessibility concerns.
- Explaining how to vote to citizens — specifically different kinds of voting — mail-in, advance, and election day — as well as ID requirements for voting, and/or looking up if you’re registered, where to vote, and how to fill in the ballot.
The goal of this project is to inform and direct the individuals who view the offline materials to move to the online materials.
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.
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. 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.
This project is to be completed in
groups of three.
Before your lab time on Nov 30/Dec 1.
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 Oct 26/27
- 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) that would help inform (insert who is this for) about (insert what it informs about). It would be successful in informing them 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 Nov 2/3 lab:
- 1 team contract signed by everyone (per group)
- 1 sub-set of completed and validated HTML sections (per individual)
- 1 list of additional content (per individual)
- 5 possible offline 'engagement' approaches (per group)
Starting Nov 2/3
- 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 desings for one offline approach to engage individuals. This can include visual, physical, experiential, or audio information design.
Due in your Nov 9/10 lab:
- 1 subset of responsive and styled pages (per individual)
- 1 set of image and information visual content (per individual)
- 1 set of initial designs for an offline engagement approach (per group)
Starting Nov 9/10
- 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 Nov 16/17 lab:
- 1 completed responsive website (per group)
- 1 completed design for an offline engagement approach (per group)
Starting Nov 16/17
- 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 Nov 23/24 lab:
- 1 responsive HTML+CSS website (on your server space)
- 1 offline approach to engagement (digital or physical example, as appropriate).
Starting Nov 23/24
- 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 sminutes 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 Nov 30/Dec 1 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)
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)
- Content/IA — flow through information, content quality/use (3 pts)
- Final Design/UX — visual language, consistency, interactivity, responsiveness (7 pts)
- Code/Development — validity, readability, cleanliness and structure (7 pts)
- Presentation — punctuality, use of evidence, quality of rationale (4 pts)