UX Design, Website
re:FILTER – Designing a community engagement website
Platforms
Wordpress hosted Website
4 weeks
Timeline
Tools
Role
UX Designer.
Collaborated with 2 UX and 3 UI Designers. As part of the UX team, I was mainly involved with UX methodologies which includes UX Research, UX Strategy, Wireframing, Prototyping and Testing.
Sketch, InVision
Overview
This is a Community Partner Project where we are tasked to design the website of re:FILTER that aligns with their business goal. re:Filter is a non-profit organization that provides accessible and inclusive solutions to Vancouver’s plastic problem through in-person clean-ups and community outreach.
The Challenge
There are currently few to no organizations using online presence and community engagement as a way to both educate and restore the environment.
The Solution
A website that creates educational opportunities about plastic pollution while empowering people through hands-on events, resources they can leverage and accessible solutions.
Key Insights found from user research
Sharing Awareness
Sharing awareness plays a big role when contributing to a cause. It can come in the form of social media or simply word of mouth. We had to challenge ourselves to come up with a solution that tackles users who use both these mediums to share awareness.
Visual learner
Users prefer to be educated with visuals than with big block of texts. This has helped us strategize content with a different approach and to incorporate visually engaging graphics.
Corporate Transparency
Users value transparency, especially when dealing with sending off personal information or donating. They would not be as eager to send off information if they trust the organization.
Action speaks louder than words
Seeing how re:FILTER has taken action and observing how it affects the world, people can determine whether it is a good action or bad. Providing images and actual statistics could spark interest in taking action.
01
Proposed Solutions
A cohesive Get Involved CTA
Users appreciate suggestions on what you can do to be involved, and educating how people can start from small steps to contribute to the environment.
02
Instagram feed/stories template
By providing a downloadable stories template and displaying their feed on the site, Refilter encourage their users to share awareness through their social media while informing them on the environmental events held.
03
Interactive educational cards
Taking into consideration that our user prefers to be educated visually, we incorporated micro-interactions to engage the users while adding knowledge at the same time.
04
Revamped membership sign up
Users find the current membership form too detailed and they are not comfortable with providing personal information such as company and work title. Our team came up with the idea of incorporating a dropdown list of the work industry that they’re in and an overall simplified membership form where users would be more comfortable in providing general information that is not overly detailed.
Want to learn more?
Learnings
Define goals early. Having a good understanding of the client's expectation would act as a guideline for your research phase and it would greatly increase your effectiveness. Discovering which device platform your users' use would also affect how you approach your designs. In our case, most of our users browse using their mobile, therefore, we decided to design mobile-first. It definitely is not easy to design mobile-first as there are way too many content too little space to experiment with. This is where we have to content strategize our way out and incorporate design elements that would solve the problem. By integrating some moment of delight, adds value and engagement to the website that would potentially retain a user to keep on wanting to come back to your site.
Take a look at my other projects!
