Compost USA

Easy and accessible composting for all

I designed a responsive website for home composting, including pick-up/drop-off, resources, and data tracking.

Tackling the problem of food waste is one of the most efficient ways to mitigate our impact on the environment: it reduces greenhouse gases, helps recover soil fertility, and minimizes our garbage by up to 50%. Yet, very few people are aware of this impact, and even fewer cities in the United States leverage resources toward composting.

‍

My team and I designed a responsive website to help fill this need—bringing composting education, accessible location-based resources, and a robust tracker for users to measure their individual and collective impact.

‍

MY ROLE

I served as UX researcher and designer on my team of four, responsible for sourcing and conducting interviews, early design concepts, usability testing, and final UI prototypes.

TIMELINE

2 Week Sprint (Dec 2021)

TOOLS

Figma, Google Surveys, Zoom

METHODS USED

Heuristics, User Interviews, Affinity Map, User Persona, User Journey, Problem Statement, Feature Prioritization, Sketching & Design Studio, Prototyping & Iterating, Usability Testing

Challenge

We face a series of converging global crises, but perhaps no issue ranks higher in our lifetime than the climate crisis. Some of the best ways to positively contribute to our global sustainability are to modify consumption habits and take action to produce less waste. Unfortunately, many cities do not have programs in place that help their residents with options like composting - some cities lacking resources for recycling as well.

🎯 Project Goals

Encourage more people to compost
Foster community engagement and environmental impact
Consolidate compost knowledge and resources

🔎 Problem Statement

How might we boost awareness of the impact of food waste on the environment, so that people can properly dispose of their food waste?

‍

The following are concept designs for a student project during a User Experience Design Immersive program at General Assembly.

THE SOLUTION

An easier way to compost

‍

We created a fresh and approachable responsive website to help our users in their composting journey. Compost USA lets users:

01

Find nearby compost drop-off locations and convenient pick-up services

02

View accurate and up-to-date educational information in one place

03

Track pounds composted, methane emissions cut, acres fertilized, and more…

View Prototype Desktop Prototype

Impact

My team members and I worked diligently to incorporate our research and findings into a responsive website. We designed a core set of features that addressed the highest priority user needs, including: finding access to local composting services, finding accurate and up to date resources and information about composting, and acknowledgement that their small contribution matters in battle against climate change.

‍

💬 Here's what a few users said:

“Wow, I wish I had this in my life because it would be so much easier to understand how to compost in my city.”
“This is cool! It’s like Strava for composting! This would really make me feel competitive and be better about my composting habits”

‍

Quote from users about how impactful the new app design is

We tested a variety of screen flows that met the goals and needs of our users, and here's how our design improved people's experience:

6 seconds faster

Users completed the flows 6 seconds faster

9.4% more direct completions

Users completed the flow with an average of 92% directness

4.5/5 easiness rating

We improved easiness slightly by 0.07 points (from 4.4 to 4.45)

My team and I were able to create a website that delighted our users and solved their needs — but how exactly did we get there?

‍

Getting to the root of the problem

We identified a target audience of renters or homeowners living within cities and metropolitan areas in the United States. My team members and I then went on to conduct generative user research with seven members of this target audience, drawing together really great insights about the pain points, goals, and needs of our users around composting.

‍

Here's what we heard from interviews:

Compost USA insight card from user interviews

Key takeaways

Green checkmark to represent a Key Takeaway

Access to composting sites and services

Resources, education, and accurate composting information

Validation, incentives, and ways to visualize impact

USER RESEARCH & SYNTHESIS

Getting to the root of the problem

‍

Here's what we heard from interviews:

Image of a competitive analysis of insurance companies

Key takeaways

Not a single provider or app allows you to add other insurance providers to their own

Most apps are clunky and buggy

Lemonade is the most modern and intuitive for today's user

USER RESEARCH & SYNTHESIS

Getting to the root of the problem

‍

Here's what we heard from interviews:

Home screen for new users

Key takeaways

Red "X" mark to denote a change we would be making

Home page should be more inviting to new users

Text/stroke weight is thin for accessibility standards

Existing hamburger menu

Key takeaways

Confusing labels led to trial and error

Taxonomy needs updates to improve findability

Drafting and tagging screen

Key takeaways

Too many steps to create a new Hoot

Need to decrease redundant steps for clarity

PERSONA

Who are we designing for?

Our team found it important to summarize our research and the needs, challenges, and goals of our target audience by creating a single, fictitious ‘persona,’ which we named Erina. Erina became a helpful way to remind us of who the user is and focus our design and development efforts on solving the user’s problems.

‍

Meet Erina! 👋

‍

‍

JOURNEY MAP

What issues did we dig up?

We mapped out Erina’s day-to-day life as a way to visualize the steps, probable pain points, touch-points with websites, and her emotions throughout the process. These findings ensured we were designing a product that solved our users’ challenges.

‍

Key takeaways

We needed to provide a single place for users to view all their insurance policies

We needed to create a way for users to view upcoming bills and see payment schedules in one place

We needed to create a helpful visual tool for users to better take advantage of their benefits

Key takeaways

Too much time was wasted searching across multiple sites for the right information

It is difficult to know what composting services are nearby, and whether they will pick it up or offer a place to drop compost off

People feel good when they know they are making an impact, and they want to be able to see this to feel inspired to keep going

IDEATION

Prioritizing features

We took these core insights from research and began the ideation process. We first prioritized the most important features and capabilities needed to solve our persona’s challenges and goals. We began to sketch these out with a design studio to explore various concepts and ideas.

Key takeaways

Location services (GPS and ability to use a map) to find pick up/drop-off options

Tracking and/or incentives for people to view their impact

Educational resources and information

PERSONA

Who are we designing for?

Our team found it important to summarize our research and the needs, challenges, and goals of our target audience by creating a single, fictitious ‘persona,’ which we named Erina.

‍

Meet Anna! 👋

‍

Key takeaways

We needed to provide users with a way to look back on and receive reminders of milestones, memories, and anniversaries

We needed to create a way for users to draft and save notes in LittleHoots

We needed to provide a way for people to customize their designs

We needed to create a path for users to select their Hoots and order photo books right from the app

PERSONA

Who are we designing for?

Our team found it important to summarize our research and the needs, challenges, and goals of our target audience by creating a single, fictitious ‘persona,’ which we named Erina.

‍

Meet Anna! 👋

‍

Key takeaways

We needed to create an easily accessible draft function right in LittleHoots that keeps unpublished Hoots safe for future sharing.

We needed to streamline the Hoot creation process, with fewer screens and questions in order to get the important details down quicker.

We needed to prioritize customizable designs for users to make their Hoot unique.

We needed to create a memory and "time-hop" feature, to remind busy parents of their kids' quotes from months and years prior.

We needed to think through designing an integration feature with an existing third party printing service (like Chatbooks) to quickly create a photo book.

IDEATION

Prioritizing most-needed features

We took the core insights we discovered in business research, user research, and usability testing of the existing site to guide our design process. We conducted two UX methods — the MoSCoW Method as well as the Feature Prioritization Matrix — to help us prioritize the features we wanted to deliver in our product redesign. As a team on a deadline, we wanted to be sure we were focusing on the right thing.

Eliminating features

Must-have features

"Inner Circle"
Users prefer existing social media sites

"Hootstream"
Replace with Instagram integration

Shopify
Focus on Chatbooks integration

Write and save drafts

Simpler memory creation process

Customizable designs

Reminders of past milestones

Easier process to design and print books

PERSONA

Who are we designing for?

Our team found it important to summarize our research and the needs, challenges, and goals of our target audience by creating a single, fictitious ‘persona,’ which we named Erina.

‍

Meet Anna! 👋

‍

Key takeaways

We needed to have clear, concise language (not legalease) for users to better understand their coverage details

We needed to build a seamless sign-up process that pulls personal information across all accounts

We needed to make one app, similar to a digital wallet, for all insurance policies

We needed to create the option to align payment schedules across all accounts

We needed to provide better diagrams and data visualization to view benefits, deductible, expiring benefits

IDEATION

Prioritizing most-needed features

We took the core insights and began the ideation process. We first prioritized the most important features and capabilities needed to solve our persona’s challenges and goals through feature prioritization.

Our must-have features included:

Image of feature prioritization sticky notes

Insurance cards

Single sign-in to all accounts

Payment/billing information

Ability to schedule bills together

Clear coverage details

"Add new" insurance cards quickly

SKETCHES

Early design concepts

We began to sketch key features out with a design studio — a rapid-fire approach to quickly explore various concepts and ideas, and collaborate with team members to identify the best ones. We wanted our designs to accomplish three main goals:

‍

Add a new insurance policy and view policy card + details
View all payments and schedule bills together
View benefits, particularly FSA benefits remaining in account

‍

We chose the best designs from each of our sketches to bring into mid-fidelity.

Early hand-drawn sketches of PoliFolio insurance app

Home/dashboard screen

Add new insurance policy

View payments and schedule bills

View benefits dashboard

SKETCHES

Early design concepts

‍

Add a new family member to the app
Create Hoot and save it as a draft
Design a Hoot with more robust customization
Select photos to create a photo book in Chatbooks

‍

We chose some of the best designs from each of our sketches to bring into mid-fidelity.

Early hand-drawn sketches of LittleHoots redesign

Adding a new child to profile

Create a Hoot and save as draft

Design a Hoot with custom selections

Select photos to create a photo book

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

In order to see if our product was helpful to users, we went through two rounds of usability testing, with a total of 10 users. We gathered feedback and data and made revisions to address problem areas. After our first round of feedback, we updated our designs to hi-fidelity.

‍

Below are the major areas for improvement we gathered from our users over two rounds of testing:

Minimizing distracting details

PoliFolio insurance app screen in black and white

Users tried to click the text rather than the “+” when it was on the left side

Users spent time trying to read the fine print on the insurance card page

We moved the “+” buttons to the right side and made the full text clickable

We removed the insurance details from the screen to keep our users focused on the main card function

"I didn't know which category or button to select"

Screen image of PoliFolio insurance app in black and white

Users got confused between clicking on “Insurance Subscriptions” or “Payments” right beneath it in order to view their billing

Many users overlooked our “Combine Payments” button as it didn’t visually stand out

We provided better naming conventions and consolidated these categories into “Billing & Payments”

We boosted the contrast and color to make it clearly look like a button

Confusing flow

Users got tripped up on the ‘combine payments’ page because there was an overload of information

Users were uncertain if they had completed the task when they saw the Congratulations page because there was still a call to action

We simplified the screen to show a breakdown of fees and the new payment schedule options

We simplified the language and removed the CTA to show users they had finished the task

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

In order to see if our product was helpful to users, we went through two rounds of usability testing, with a total of 10 users. We gathered feedback on mid-fidelity designs and made revisions to address problem areas for our hi-fidelity design.

‍

Below are the major areas for improvement we gathered from our users:

Flow confusion

Screen capture of LittleHoots mobile app in black and white

Users had a hard time understanding the taxonomy and labeling of buttons

It wasn't intuitive who was speaking during each part of the conversation

Users couldn't navigate between pages without misclicks and trial and error

Screen capture of LittleHoots mobile app in color

Simple steps to start a conversation

System now automatically highlights the alternating speakers to decrease number of clicks

Flow now consistent with text messaging for improved learnability

Visibility troubles

Screen image of LittleHoots app new design in color

Users were confused if the small 'x' on the design tool overlay would cancel their selection or just close the overlay

Users had trouble seeing which selection of the design tool was the active page

We added a checkmark on one side and an 'x' on the other (confirm or cancel) and made both larger to improve visibility

We changed to a tab form to show the active page more clearly

Icon issues

Several users did not associate the 'shopping bag' icon with creating a photo book

Users were confused about the "upload" icon and concerned it would send their photos to a text or post

We changed the shopping bag to a custom book icon

We switched to a paper airplane button, but then switched to a "Done" button and displaced the account avatar to improve usability

Introducing the new LittleHoots app!

Take a look at some of the major updates we made to improve the user experience for busy parents.

Adding a new family member

The process to add a family member or friend to your account.

The new process of adding a family member to the platform is streamlined with fewer steps within a new “Account” section—where users can quickly see their family in one place, alongside their own account details and information.

Drafting a Hoot (Memory)

Draft a Hoot process with easy access and saving.

Users were drafting their Hoots in emails or notes on their phone because the previous LittleHoots did not have a draft function. Now, users can pause their draft at any stage and never worry about losing or forgetting what their kids have said.

Designing a Hoot

The process a user would take to design and customize their "Hoot"

Users unanimously expressed wanting the ability to customize their Hoots, add sophisticated designs, and have greater ability to edit past Hoots. We developed a robust editing and customization design tool right in the app for users to have much more choice in their designs, which according to testing, already boosted the value of the LittleHoots product.

Selecting & sending Hoots to Chatbooks

The process a user would take to select the images/Hoots they'd like to create a photo book with.

One of the greatest values that users identified with the LittleHoots app is the possibility to physically memorialize Hoots into a photo book. We designed an integration with Chatbooks for users to select their Hoots right from the app, and seamlessly customize in Chatbooks.

ADDITIONAL PRODUCT HIGHLIGHTS

✨

And there's more!

We created several additional features to improve the user experience. These include:

iPhone homescreen showing LittleHoots widget

An iPhone widget for quick draft access right from the home screen

iPhone home screen showing LittleHoots app home page

Dashboard with memories to resurface past Hoots and funny stories

iPhone homescreen showing LittleHoots notifications

Push notifications to remind users to finish drafting their Hoots

Welcome to the PoliFolio App

Take a look at some of the major features we incorporated to aid users in their access, organization, and understanding of insurance.

Single sign-in and policy dashboard

Home dashboard with all policies available

My team and I knew that PoliFolio needed to come across as immediately valuable and trustworthy from the get go—so we decided to use a single-sign on API (Okta) so users would feel confident signing into all accounts through PoliFolio. We created a dashboard of individual “insurance cards” (a truncated version of their policies) to live on the main screen, and made these scrollable so they could quickly access the policy they needed.

Adding new insurance to the app

Process of adding a new insurance policy to the app.

We wanted one of the core features of the app to be an easy way to add new insurance to the app—as users expressed changing insurance frequently with new jobs and other life changes. Here, they can add a new policy to their dashboard by seamlessly finding their insurance provider and adding their policy number.

Combining and scheduling payments

Viewing all billing schedules together, with option to combine payments

Some of the biggest pain points were heard from users was about hidden fees, payment scheduling, and unknown bills. PoliFolio pulls all insurance fees and bills into a single app and offers a place to both view these details, as well as combine all premiums into a single annual or monthly payment.

Viewing your benefits

Dashboard of benefits across accounts

Users overwhelmingly expressed annoyance with realizing their benefits had expired and they didn't know about it. PoliFolio provides users with a dashboard of all their benefits across accounts, so they understand what to take advantage of before losing things like a healthcare visit or a flexible spending account balance.

SKETCHES

Early design concepts

We took these core features into our design studio, to start to sketch out wireframes and user flows. We wanted our end product to accomplish the following, so we focused our designs here:

‍

Locating the nearest site to drop-off compost
Finding helpful resources, like what can and can’t be composted
Viewing personal composting statistics and data on their contribution to positive climate action

Below are some of our first sketches from Design Studio.

Sketches of early concept designs for Compost USA app

Homepage/Dashboard

Local services and geo-location screens

Educational resources section

Visualizing and quantifying impact

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

In order to see if our product was helpful to users, we went through two rounds of usability testing, with a total of 14 users. We gathered feedback and data and made revisions to address problem areas. After our first round of feedback, we updated our designs to hi-fidelity.

‍

Below are the major areas for improvement we gathered from our users over two rounds of testing:

"These button names are too similar.."

Screen image of compost app home page in black and white

Users were not sure what the difference was between "How it Works" and "Education" buttons

Screen image of compost app home page in color

We changed "Education" to "Educational Resources" and "How It Works" to "About Compost USA"

"What is the difference between 'pick-up' and 'drop-off'?"

Users were not sure what “Local Services” meant on the homepage

Users did not immediately know the difference between “pick-up services” and “drop-off services”

We added more details about pick-up and drop-off rather than using “Local Services” on the home page

We incorporated helpful diagrams and additional language to help users understand their options

Location unknown?

Screen image of compost app location service in black and white

Users tried to enter their zip code because it was front and center on the screen, but we also showed the location as Denver

When users selected a local site on the app, it wasn’t clear to them which they had chosen

Screen image of compost app location service in color

We created a delayed pop-up to show users that the app was detecting their selection, and they wouldn’t need to enter a zip code

We made a micro-page for each individual compost site so users could find relevant details

Introducing... Compost USA!

Take a look at some of the major features we incorporated to aid users in their compost journey.

Convenient compost drop-off locations and pick-up services

Process of finding a local area to drop off compost

My team and I knew that one of the biggest hurdles for users was lack of local resources and infrastructure to make composting work for them. We wanted to prioritize accessibility to these resources first and foremost, both to show users where they could take their compost if their city does not pick it up, as well as a service to have someone come collect your compost on a schedule that works for your household.

A new hub of accurate educational resources

Screens showing trusted educational resources on composting

In our research, we discovered that many people have a vague idea of composting, but it hasn't become a daily part of their life because they feel like they wouldn't do it correctly. They expressed frustration with the amount of resources online—sometimes conflicting—and didn't know which to trust to get started. We've put together an Educational Resources page to be a composting knowledge base for users to find exactly what they need.

Impact dashboard shows your personal contribution

Dashboard with personalized compost impact

We learned from users that it's not always easy to change behavior unless you are (a) incentivized to do so and (b) can see your direct impact. We knew we'd have to create some sort of validation and digital representation of each user's impact, to encourage them to continue to compost and contribute to climate action. We designed a dashboard to measure metrics like pounds composted, soil replenished, food diverted from a landfill, and more.

🖥️ Don't forget desktop

Desktop view of Compost USA

Because a website as resourceful as Compost USA will often be viewed on a desktop or laptop, we created a responsive desktop view. Users can now find the same experience of Compost USA on both mobile and desktop.

NEXT STEPS & REFLECTION

Moving forward...

‍

Next steps:

If we had more time as a team to continue improving the Compost USA site, we would take the following actions:

Continue adding statistics and data breakdowns to our Account and Tracking tool, to help users further see their impact.
Improve location services and expand beyond Denver
Make the infographics inside the “Education” tab more interactive, and add information based on location
Conduct additional rounds of high-fidelity prototype user testing, both on mobile and desktop
Build out all mobile and desktop pages and test with users over time to see our Tracking tool in action and continue making improvements

‍

Reflection

I really loved working on this project because I have tried to compost in my daily life since the 4th grade—which is actually a very difficult feat! Being able to compost is so much more than just capturing food scraps, and relies on city infrastructure, funding, and priorities. And not everyone can compost in their backyard. I wanted to tackle this problem through a concept project because it's one that is near and dear to my heart.

‍

People need incentives

Yes, this was a big insight that we designed our product around, but it still sits with me as a larger takeaway for all UX design. People want to be able to see their impact, and visualize the change they're making. Better yet, they want to be rewarded for this—whether that's through recognition or even monetarily. There is a lot of opportunity for gamification and data visualization that I will remember as I approach new UX projects.

‍

Don't be afraid to imagine something totally new

My team and I would often get hung up on the existing limitations surrounding composting and environmental impact in general. It was easy to say "that will never work" or "how would we begin to track that" but then we leaned into dreaming bigger about the products we COULD offer users, rather than the ones that currently exist. I learned in this project that sometimes it's the 'crazy' or seemingly unrealistic ideas that make for the best products.

Next up

LittleHoots

Memory capturing made easy

PoliFolio

All your insurance policies, in one place.

Easy and accessible composting for all

‍

My team and I designed a responsive website to help fill this need—bringing composting education, accessible location-based resources, and a robust tracker for users to measure their individual and collective impact.

Challenge

🎯 Project Goals

🔎 Problem Statement

THE SOLUTION

An easier way to compost

01

02

03

Impact

6 seconds faster

9.4% more direct completions

4.5/5 easiness rating

My team and I were able to create a website that delighted our users and solved their needs — but how exactly did we get there?

Read more about my research and design process below ⬇️

USER RESEARCH & SYNTHESIS

Getting to the root of the problem

Key takeaways

USER RESEARCH & SYNTHESIS

Getting to the root of the problem

Key takeaways

USER RESEARCH & SYNTHESIS

Getting to the root of the problem

Key takeaways

Key takeaways

Key takeaways

Who are we designing for?

What issues did we dig up?

Key takeaways

Key takeaways

IDEATION

Prioritizing features

Key takeaways

Who are we designing for?

Key takeaways

Who are we designing for?

Key takeaways

IDEATION

Prioritizing most-needed features

Eliminating features

Must-have features

Who are we designing for?

Key takeaways

IDEATION

Prioritizing most-needed features

Our must-have features included:

SKETCHES

Early design concepts

SKETCHES

Early design concepts

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

Minimizing distracting details

"I didn't know which category or button to select"

Confusing flow

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

Flow confusion

Visibility troubles

Icon issues

Introducing the new LittleHoots app!

Adding a new family member

Drafting a Hoot (Memory)

Designing a Hoot

Selecting & sending Hoots to Chatbooks

ADDITIONAL PRODUCT HIGHLIGHTS

And there's more!

Welcome to the PoliFolio App

Single sign-in and policy dashboard

Adding new insurance to the app

Combining and scheduling payments

Viewing your benefits

SKETCHES

Early design concepts

MID-FIDELITY → HI-FIDELITY USER TESTING

Testing with users

"These button names are too similar.."

"What is the difference between 'pick-up' and 'drop-off'?"