UX/UI - Website

re:FILTER


Role:
UX/UI Designer
Tools:
Sketch | Invision | Photoshop | Illustrator
Time line: 7 weeks

Plastic pollution is emerging as a significant public concern whose presence is not expected to diminish but instead double over the next 20 years. By measuring the effects of the plastic lifecycle, researchers have concluded that in contributing to greenhouse gas pollution during decomposition, plastic is also a threat to climate change. In order to reduce plastic pollution and climate change, Vancouver has prepared a sustainability plan. The Greenest City 2020 Action Plan (GCAP) aims to prepare Vancouver for the potential impacts of climate change while building a vibrant community, a thriving green economy, and a greener, healthier city.

The non-profit organization re:FILTER was born to empower individuals, organizations, and government to make sustainable choices for themselves and restore the environment. re:FILTER focus on creating educational opportunities through hands-on events and accessible solutions.

For this project, we have to redesign re:FILTER website. The website must to be easy to navigate and very intuitive for users while they are learning more about plastic pollution and its consequences. On this website, users are informed about events they can attend organized by re:FILTER or its partners. Visual identity is also important, becoming a legit and more professional organization in order to get institutions attention.

As a UX/UI Designer, my team and I were in charge of the visual part, as well as the user interface and design part. We conducted a design research based on a GUT Test, the inception sheet and a mood board for inspiration. Then, we create the design system which consist on a style tile and a style guide. Finally, we design the wireframes based on this style.

refilter screen

Research

As a result of the research, re:FILTER wants to focus on more illustration, short blocks of text, a modern sans-serif typeface, clean website, and an optimistic tone. The concept is educating people about how cigarettes and plastic waste harm the world and to look like a professional organization.

moodboard refilter

Some inspiration from a mood board

Style

For the style, we create a Design System based on our research which is visual, minimal, with modern shapes and professional. The color palette is inspired by nature elements.

style guide of refilter

Some elements from the Design System

Design

low-fi screens refilter

UX team provided us some of low-fidelity and mid-fidelity wireframes.

See the full process

Read Case Study