re:FILTER — Designing a website
Pursuing a lasting solution to cigarette butt litter and plastic waste
Summary
Designing a website for re:FILTER, a non-profit organization focus on concerns and educate people about how harmful plastic waste and cigarette but is, enhance the user flow and bringing the community to re:FILTER’s events.
About re:FILTER
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 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.
Every project has a goal
Business goals: Reaching different communities to educate and inspire a positive change in cigarette butt litter. Becoming a more legit organization and get funds from institutions by enhancing its visual identity.
Project goals: Educate users about cigarette waste, inspire them to take personal actions and spread their knowledge. In design terms, look more visual and professional and put more educational content.
User goals: Learn about cigarette waste and to get involved.
Our persona
After exhaustive research, UX team defined our user persona:
Jayson Anderson
The smoker millenial
Age: 23
Occupation: Student
Goals
To make new friends and have fun at social events and be educated about the environment in simple bite sizes.
Motivation
Enjoys social gatherings.
Likes making new friends.
Likes sharing motivational posts on Instagram via DM.
Pain points
Wishes community events are more fun.
Finds it troublesome to dispose of cigarettes at the bar/clubs.
User flow
After meeting our persona, UX team defined the user flow for the website:
After that, the user flow is tested in order to check its functionality. People complain about the vague use of the word “Resources”, the membership form is too detailed and the information length on the mobile version. People need a landing page for projects and a more transparent membership form.
New features are added to the website: cohesive CTA, Instagram grid upcoming events, member, donation Instagram stories templates; a learn page with interactive card facts, revamped membership sign up process and categorized current & past projects page.
Sketches
UI design process
Gut test
During our first meeting with re:FILTER we tested our client’s likes in terms of UI design by Gut Test. The results provided us answers about what kind of design direction we can follow for this website.
re:FILTER wants to focus on more illustration, short blocks of text, a modern sans-serif typeface, clean website, and an optimistic tone. For the color palette, re:FILTER preferred one bright color combined with blue, green or coral.
Inception sheet
Then we went for the inception sheet in order to educate people about how cigarettes and plastic waste harm the world and to look like a professional organization:
Space: Visual, simple, clean, assembled and balanced.
Color: based on elements of nature, sunrise, ocean, grass. Bright, coral, green blue and teal.
Shape: vectorized, rounded, simple, modern, and minimal. Organic shapes, inspired by the waves, overlapping waves, pictures of past events.
Movement: dynamic, fluid and interactive.
Mood: inspiring, professional, optimistic, relaxing, legit, cheerful and semi-casual.
Moodboard
Based on Gut Test and the inception sheet, we collected different images as a source of inspiration for the website. Mainly, the images are influenced by nature, ecologism, sans-serif typefaces, recycling resources, differents elements of nature, a color palette based on the sunset and minimal illustrations and icons.
Style Tile
For the style tile, as a keyword, we thought about some words such as optimistic, educational cheerful, rounded, empowering, minimal, visual or inviting. The color palette was based on sunrise, ocean, and grass and also, a secondary lighter palette. Buttons were rounded and minimal as well as the icons. Evolve was the typeface we chose for style tile, a modern and cheap sans-serif. We added more real stock pictures about nature and fewer illustrations.
Style Guide
We focused on the objectives that were determined at the beginning: a more visual website and professional organization which has more personality. The final color palette gathers colors from nature and was inspired by the sunrise, ocean, and grass. In the beginning, Proxima Nova was an inspiration for the typeface. Making research, we decided to choose to Evolve Sans which is a modern sans-serif and cheaper than Proxima Nova. With regards to the iconography and inspired by our mood board, we designed some simple and minimal icons. Finally, we collected some UI element as examples in order to show how can design some sections for the website. These UI elements were clean, with modern shapes and very visual.
High-Fidelity Wireframes
The final result for the website was the following one:
Check out our prototype!
Click here to view the project re:FILTER Desktop
This prototype brought to you by InVisionApp
invis.io
Team
Eric, Jessica, JiMi, Max, Malvin, Miriam
Tools
Sketch | Invision | Photoshop | Illustrator | Medium
