Comprehensive Product Design
Recycling guidelines create confusion, and many of us wonder if our conservation efforts make a difference. Recycle Hero cuts through the confusion to support users in maximizing their recycling through AI scanning and increasing recycling convenience, all while providing rewards for their conservation efforts. The scope of this project includes the design of a mobile recycling app as well as a corresponding landing page to transition viewers into customers.
Environmentally conscious individuals are overwhelmed by the repetitive challenges of recycling and often feel that there is a lack of opportunity to take personal action on climate change.
Provide users with the tools, information, and incentives to improve their recycling practices while empowering them to take daily personal action against climate change.
UX Researcher, UX Designer, UI Designer, Front-End Developer
4 Weeks
April 20th - May 15th, 2023
Jordan Modic
Emily Martinez
Alex Bigot
Miro, Whimsical, Figma, VS Code, Github, Google Suite
AI Scanning empowers users to make the most sustainable choices in disposal and purchasing.
Responsive landing page design transitions visitor curiosity into customer engagement.
User Interviews, surveys, and analysis uncovered a variety of challenges surrounding recycling participation and taking personal action on climate change.
Complex recycling guidelines and concerns over recycling contamination present a large challenge to recycling participation.
Interviewees felt overwhelmed by climate change and struggled to take personal action to support sustainability.
Recycling specialty items, like plastic film, can be expensive. Interviewees were interested in offsetting these costs.
Researching guidelines, sorting items, and driving to drop off locations presented barriers to recycling participation.
Environmentally conscious individuals require convenient access to recycling information and incentives. Complex recycling guidelines and the mental fatigue associated with climate change can often overshadow their motivation to support conservation efforts.
We set out to address three primary goals: increasing recycling contributions, incentivizing recycling participation, and empowering users to take personal action for conservation.
Our users are seeking convenience and confidence in their conservation efforts. How can we make it easier to make a difference for our planet?
Simple scan interface that quickly identifies sustainable disposal methods.
Suggest alternative purchasing options for non-recyclable items.
Users' points are updated upon recycling pick-up.
User sees growing impact of their conservation efforts.
We pursued user flows that provided the most beneficial tools to our users. Through scanning, recycling mapping, and impact tracking, users are able to take control of their conservation efforts.
Our hi-fi frames included several additions to functionality, including an easily accessible scanning button on the home screen and a simplified scanning interface.
Our frames were brought to life through the addition of interactions, allowing our users to experience the power of recycling confidently.
The home screen design prominently features updated information on rewards, impact, and community events. Wireframing the AI Scanner allowed us to identify our approach for presenting information.
Our initial layout utilized Ridwell's landing page as inspiration, providing compelling CTAs, feature information, and frequently asked questions.
Users found call-to-action sections compelling but indicated a lack of details regarding product features.
Users were unsure if this product was an app or a different offering. They were about how they could access these features.
Users were looking for more information on types of rewards offered.
Recycling statistics motivated user action.
"We need to do something about this."
We expanded upon Ridwell's current styling to create a product-specific logo, a broader color palette, and improved accessibility while maintaining the Ridwell feel.
We chose to expand the color palette to incorporate darker shades of green, providing opportunities for more contrast.
The Recycle Hero logo was iterated several times throughout the design process. This design highlights Ridwell's logo while adapting well for responsive design.
Text and background colors were updated to meet WCAG Guidelines.
We utilized imagery and iconography to address user confusion over product details. The application of our style guide decreased cognitive load and highlighted CTAs.
This time around, users were able to easily identify features and how to access the product. Imagery and call-to-action sections continued to motivate user action.
Users easily identified features and were most interested in the AI Scanner
Users expressed excitement by the potential to improve conservation efforts.
These sessions provided helpful feedback on layout, spacing, and color choices.
By using mobile, tablet, and desktop breakpoints we were able to hone the scalability of our mobile first design. Ultimately providing a consistent experience across the three breakpoints.
This was my first time coding an entire page, and I found that I really enjoyed the process. Figma has helped my understanding of HTML, and vice versa.
This page was coded using HTML, CSS, Bootstrap, and jQuery.
