UX/UI design

North BK Composting App

Creating an informative composting app that makes volunteering in the community easier.

My Role

User Research
UX Designer
UI Designer

Tools

Figma

UXTweak

Details

Jan - Mar 2024
Passion Project
Figma Presentation

Impact

"It's an easy way to engage with the community and find volunteer opportunities."

Composting Mystery

I’ve been a North BK resident (Brooklyn) for 3+ years. Throughout the few years I've been at my apartment, there's been a confusing appearance / disappearance cycle with a brown bin in our designated trash area outside. As a garden-club member and a frequent farmers-market peruser, I kept noticing less and less local compost volunteers. So, I thought, what is happening? What is the deal with composting in our neighborhood, why are composting resources seemingly decreasing, and are other people as confused and curious as I am?

Neighborhood Chats

To investigate and learn about the state of composting, level of composting knowledge, and composting attitudes in my community, I developed a survey that I posted in community Facebook and Nextdoor groups. As it turns out, people had lots of thoughts about composting. I used an empathy map to translate survey responses into different insights and takeaways. These insights fueled my desire to create a single source of composting truth in our neighborhood, with an overarching goal of increasing composting efforts.

Finding 1: There is a wide range of knowledge around how to compost and the benefits of composting with some wanting to learn more and others not interested

Finding 2: People who compost frequently are frustrated with local politicians and resources being cut

Finding 3: Composting is a mandatory regulation that not all landlords comply with

Finding 4: There is no centralized place to get up-to-date community composting information

Needs to support:
1. Composting overview and how-to's
2. List of local composting resources
3. Compost benefits
4. Addressing compost concerns
5. Volunteer sign up
6. Email list

The Newest North BK Community Members

To capture these insights, understand user needs and guide a design solution, I created new "neighbors": Jasmine, Dan, and Stephanie. Each neighbor represents a different attitude around composting, level of knowledge, and set of concerns that was seen in the community survey. For each neighbor, I created a:

User story

User journey map

Problem statement

Hypothesis

Goal statement

Through these methods, I narrowed down a design solution of a mobile app and determined the neighbor needs that needed to be supported. With the help of my neighbors/"neighbors", it became clear that this solution needed to be flexible, covering compost education, resources, and opportunities to get involved.

Learning How to Support All Neighbors

To get inspiration, I completed a competitive audit (here) and looked at how other sites/apps consolidate and showcase compost information, as well as how to cater to a range of composting knowledge and excitement (because let's face it, some people just want the information the need and to get out).

To understand neighbors’ actions with the composting app given their different use cases, I created a user flow, a big-picture storyboard, and a sitemap to visualize interactions. Using these methods together allowed me to scope in / out of the app functionality, setting me up for specifics to consider when sketching. I landed with four distinct pages and their flows: Home, Community Initiatives, Volunteering, and Composting 101.

Designing for Neighbors

After gathering some initial design ideas using the Crazy 8 method, I completed my first round of sketches for each page and noted my design decisions, starring design elements that I felt best supported our neighbors based off of their range of needs in our app. I combined the starred design elements into a design direction that I applied to my second iteration of sketches, landing with designs that met neighbor needs and supported the composting information I wanted to showcase.

Testing Designs with Neighbors

I created low-fidelity wireframes and prototypes using a mobile-first design approach, since most neighbors would be using the app on their mobile devices.

I conducted usability testing with neighbors via UXTweak. The objective was to determine app clarity, relevancy, hierarchy, and ease of use. I also wanted to focus on how to refine the email and volunteer sign up processes. I had 5 participants, all community members, with varying genders / ages / compost activity / composting knowledge to correlate with the neighbors from my survey and personas.

I used an affinity diagram from to gather insights from my first usability test to incorporate into the next round, and I refined my low-fidelity prototype. Improvements included:
‍

Increase the size of the modal close button

Note where composting site map will be

Add links to external NYC composting sites

Include pop ups for composting modals

Include info for educational opportunities

Bringing the App to Life

After iterating my low-fidelity prototype design based off of previous usability test insights and completing another round of usability testing, I reached a level of success (ease of use, flexibility, and support) that I felt happy with. I created a high-fidelity mockup using a design system based off of Material Design, and added interactivity to create a high-fidelity prototype.

The final design allows neighbors learn about composting, what the benefits are, composting barriers, and how to compost in our neighborhood in a flexible and self-guided way. Through the Community Initiatives, Composting 101, and Volunteer pages, neighbors are able to learn and explore however they choose.

The impact: "it gives great info for what I can do individually and as part of a group for composting... Love a good intuitive menu, and the pop ups are nice so I don't have to navigate to a bunch of different pages. It's an easy way to engage with the community and find volunteer opportunities."

View the high-fidelity prototype here!

The Future of North BK Composting (App)

By keeping my neighbors and their range of composting needs at the heart of this process, this app aims to support community members at every level of knowledge / interest regarding composting. This concept of creating flexible experiences to support a range of needs is applicable to all products; humans are not the same, and we need solutions that take that into account.

Next steps include supporting a desktop experience and connecting with the NBK Community Garden to gauge interest with app involvement, and signing up for some of these amazing composting volunteer opportunities that I found through my research!
‍

*DISCLAIMER: This app uses resources and links to other websites - EPA, DSNY, GrowNYC, Phys.org, Cornell, NYC 311 - for convenience and extra info, but is not responsible for their content or availability. Always double-check the original sources for accuracy.