Our Environment

Environmental Issues Facing New Zealand

In 2019, the Ministry for the Education and Stats NZ published Environment Aotearoa, a report outlining the 9 most important environmental issues facing New Zealand. Through its expressive animated illustrations, Our Environment guides the user along a sleek, concise visual summary of these priority concerns.

Year
2019
Category
Culture & Education
Single-Page
Art & Illustration
Social Responsibility
Technology
Webflow
Team
No items found.
Collaborators
Awards

Awwwards: Honorable Mention

Launch Site
User interface designs for Our Environment website
What We Did

Environment Aotearoa is a report produced by the Ministry for the Environment and Stats NZ. Backed by a team of internationally recognised scientists, it highlights the most important issues affecting the health of our environment. Using the latest data on 60 environmental indicators, the report identifies the 9 most wide-reaching, lasting and escalating problems for our country and culture.

The website aims to draw awareness to Environment Aotearoa, by displaying data points in a visually impactful and compelling narrative. We felt that storytelling through motion was an effective way to summarise these 9 key issues and provide the audience with an open and honest conversation about what we have, what we are at risk of losing, and where we can make changes.

Our environment is where we stand, our tūrangawaewae – where we live, learn, work and earn a living, play, and socialise. It is our home and our identity, and the foundation of our national culture and tradition.

No items found.
How We Did It

Through its animated illustrations, the website aims to guide the user through a total of 9 sections, embarking on a visual summary of Environment Aotearoa. We focused on design principles such as contrast and negative space, to maintain consistent hierarchy across all typography.

As the user scrolls, the illustrations change colour from green to grey, reflecting society's role in the health of our environment. We bridged each section with a single line drawing which was illustrated and animated in Adobe After-Effects. Our biggest obstacle was ensuring the linework remained cohesive as the user scrolled through the website.

Through the use of horizontal scrolling, we wanted to develop a cinematic experience. To enhance the user journey we added an index bar to the bottom of the website, creating a visual cue that reflects the order and number of each section.

By using paper-based textures and san-serif fonts, we created an interface that mimicked the appearance of an article.  Our aim was to replicate the likeness of a scholarly report.

User interface designs for Our Environment website
No items found.
User interface designs for Our Environment website
No items found.
User interface designs for Our Environment website
No items found.
User interface designs for Our Environment website