Redesigning a community engagement website — A UX Case Study
Introduction
This is a Community Partner Project that is carried out by a team of 3 UX Designers (including myself) and 3 UI Designers. Our Client, 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. Their street cleaning initiative is called The Butt Touchers and is focused on collecting cigarette butts and distributing pocket ashtrays.
The Challenge
Plastic pollution, from coffee cups to cigarette butt liters is a growing challenge with insidious consequences. There are currently few to no organizations using online presence and community engagement as a way to both educate and restore the environment. We decided to approach the problem with the following process:
Proposed Solution
A website that creates educational opportunities about plastic pollution while empowering people through hands-on events, resources they can leverage and accessible solutions.
Defining the Goals
After two meetings with the client, we had a solid understanding of our client’s goals and expectations. This acts as a guideline to our research phase and has helped us create questions that are catered towards the end goal. We broke down further the goals into three categories;
Research
Site Audit
Having a clear understanding of the project’s expectations, our first research phase was doing a site audit and researching further about user’s frustrations when using their current website. Some of their pain points were pointed out as follows:
- Inconsistent. Website is re:FILTER but content are mostly displayed as Butt Touchers.
- Website looks disorganized.
- Photos taken does not look very professional.
- Mobile version has black text on blue box background making it very hard to read.
Getting to know our users…
We took note of the following pain points and moved on with deploying surveys through different social platforms as well as the Butt Toucher’s facebook group. Our survey results show that most users browse using mobile, therefore, we decided to go with a mobile-first design approach to optimize the user’s mobile experience. Another big takeaway was that users value sharing awareness when contributing to a good cause, may it be through social media or simply spreading through word of mouth.
To further synthesize with our users, we carried out some interviews to figure out their preferences as well as their pain points. To sum up, these are some insights from our users:
“If you really take action and observe how it affects the world, you can determine whether it is a good action or bad.”
“I wanted to take action when introduced to actual statistics of global warming by taking a course.”
“suggestions on what you can do to be involved, educating to how people can start from small steps”
“I feel uncomfortable with donating if I don’t know the organization”
Based on these findings, we then created Jayson and hopes to design a desirable app experience for him and other potential users.
User Scenario
One evening, while Jayson was partying, he went out for a smoke with his friends. There was no nearby trashcan to dispose his cigarette, so a mutual friend from the group handed him a pocket ashtray with re:FILTER’s website on it.
He was introduced to re:FILTER and Butt Touchers, and was interested in participating at a Butt Touchers event to have fun while cleaning the environment.
He then joined the event and had a blast. He made new friends and is looking forward to going to the next event. He wanted more info so he was referred by the members to re:FILTER’s website.
Jayson’s Journey Map
Planning
Affinity Diagram
The first step of our planning phase was to group our research findings through similar patterns and commonalities with an exercise called “Affinity Diagram”. This exercise helped us categorize users likes & wants, their pain points and also figuring out potential site features to include.
Next, after getting a good idea of our challenges, we brainstormed data-driven solutions in a form of features which were then presented to the clients on our meeting. We asked our client to categorize the features into three classes, Must Haves, Nice to Haves and Not Needed. By the end of this exercise, we understood further our client’s priorities and has greatly helped us with arranging the site’s Information Architecture.
Information Architecture
Their current Information Architecture is outdated and does not allow many opportunities to share awareness. Our redesigned IA involves features that are beneficial to the users like an interactive Learn page as well as a cohesive Get Involved page. We also tried to maximize the use of social media so that users could easily share awareness through their preferred social media platforms.
User Flow
Next, we planned out a series of steps to how a user like Jayson would potentially flow through the website.
Sketching and Wireframing
After solidifying our Information Architecture, we jumped right away to Step 1 of wireframing, which is hand-sketching layouts. We felt that this is a good exercise to throw out our ideas in paper and experimenting on different design approaches. During this process, I felt that designing mobile-first is a bit challenging as there is not much space to work on given a lot of contents. Next step, we translated our initial sketches to digital wireframes using Sketch. We then prototyped our Lo-Fi wireframes using InVision and did usability tests with our users. After receiving feedbacks from our usability tests, we made changes accordingly and ensure that all design functionality are final, and then send it to the UI team to create the high-fidelity wireframes.
Usability Testing
After the planning phase, we were able to conduct A/B usability tests. It is a very crucial step when designing a website as we get to observe user’s frustrations and discover which area of design works and which need improvements. Some of the feedbacks we got were:
- The vague use of the word “Resources”. We initially have a dropdown menu under resources, to get to the learn and blog page, there are some users who find it hard to locate the learn page, since our main goal is to educate people, we felt that the learn page should be more prominent and easier to locate. at our final design we decided to let go of the word resources and just have them as two pages at the navbar.
- Information on mobile page was rather lengthy, to tackle this problem, we had to cut down some sentences and incorporate design elements such as a down arrow that would show more content if you click on them.
- Have a landing page for projects and mention about current and past projects. By having a landing page for projects, user could get a little information about what each projects are without having to click on each of them to figure out what they are.
- Membership form:
— Users find it to be too detailed, users are not comfortable to be providing personal information such as company and work title, instead, we came up with the idea of incorporating a dropdown list of the work industry that they’re in.
— Users also felt that the form should be more transparent, meaning that users need to feel assured that they know where the information would be going to.
The Solutions
Wrapping up our research findings and rounds of usability tests, below are the solutions that we concluded.
1. Cohesive Get Involved CTA
Users appreciate suggestions on what you can do to be involved, educating to how people can start from small steps to contribute to the environment.
2. Instagram Feed/Stories Template
Users would easily use social media such as Instagram to share awareness as well as be informed of environmental events.
3. Interactive Educational Cards
Considering that our user base prefers to be educated visually, we incorporated minimal interactions to engage the users while adding knowledge at the same time.
4. Revamped Membership Sign Up
A simplified membership online form where users would be more comfortable in providing general information and not overly detailed.
View the Prototypes!
My Reflections and 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 because of the many contents and limited space to play around. 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. Clients are very friendly and were extremely pleased with the end product with almost zero concerns.
Thank you for spending time reading my case study, If you have any feedback, I’d love to hear from you. Drop-in a hello to santosa.jessicaa@gmail.com.
