Information Architecture / Web Design
Design website from an ecological footprint report for the City of Vancouver. The website goal is to have Vancouver residents engage in what is ecological footprint and understand their individual and collective impact to the environment.
Nicole Woo, Alishba Bilal, and myself
Develop sitemap and wireframes, design content illustration, microcopy, and code HTML/CSS
Axure RP, Sketch, HTML, CSS
RESEARCH & STRATEGY
Since user research was not part of this project, I created a map of user needs to help with empathy. With two criteria, level of interest and prior knowledge, I separated users into 4 groups:
Expert, want in-depth information
Expert, look for specific information
Novice, want to learn about the topic
Novice, randomly land on the website
This became important when selecting content from the report to display on the website. With each part in the report, I asked myself if any of the four user groups would find it useful.
If it's likely that no group needs the information, that part will be excluded from the website.
If one group might need the information, progressive disclosure will be used to meet the need of that group without making the website complex for others.
If more than one group need the information, that part will become the main content to display.
When outline strategies, I found three factors to be vital to the project success:
Header microcopy and images (assume people will read nothing else)
Links connecting pages to engage expert users
Friendly graphs to engage novice users
Highlights from user tests:
Broad and vague labels create misinterpretation
Users can't understand the content of Food, Buildings, Consumables, and Transportation page without viewing the Overview page first
Information on Tool and Pilot Project pages are not useful and even create confusion for users
User tests for the revised sitemap revealed:
Users are confused with the differences between Ecological Footprint and GHG Emissions
Sustainability gap section information is unnecessarily detailed
Finally, the Tips to Live Green section was replaced with information about an initiative called Future Bag.
CONTENT & MICROCOPY
Sample mockups were made to help my team visualize possible aesthetic style with the wireframe.
When looking for stock images, I realized it was challenging to find pictures that not only add visual aesthetic, but also aid understanding of the content. For this reason, our team decided to make an illustration site. I was tasked with creating illustrations for the content.