top of page
Responsive Design Devices.jpg

Ecohero

UX Case Study:
Mobile App &
Responsive Web Design

Project Overview

Duration: 2023

Responsibilities: Sole UX Designer & Researcher

Responsive web UX design in Figma & Adobe XD for the 3rd and final project of the Google UX Design Professional Certificate program.

I explored designing EcoHero out of a need I observed in my own life many times over. Whenever traveling I have often wondered if I was making the right environmental impact by disposing my waste the right way, where to do it, and what the policies were. It was time for all information on the different policies, collection methods and locations, and community engagement for environmental activism to come together and be accessible from anywhere

Empathize & Problem Identification

The user research was focused on two user groups. The primary user group was young adults who frequently travel to places with different local waste disposal policies. The secondary user group was for community members who are actively engaged with local environmental policies want to share tips & tricks with family and friends.

In order to better understand my users and their pain points, I conducted interviews and created:

  • Empathy Maps

  • User Personas & Problem Statements

  • User Journey Maps

Problem:

The research highlighted key pain points that current solution resources are often hard to find, hard to understand, and lack sufficient information about local policies, events, and proposal submission. This creates a major obstacle for users that need to quickly know how to dispose of their waste in an unfamiliar place, or want to easily educate those in their community.

Ideate

After the problem statement was defined and the goals of the design set, I began ideating on how to meet my users' needs through:

  • "How Might We" frameworks: Reframing the problem in different ways to provide directions towards possible solutions

  • Crazy 8's: Rapid warm up design exercise to remove mental constraints on what was possible, allowing ideas to flow

  • Competitive Audit: By looking at both direct & indirect competitors, I could identify key aspects of their UX and user flows that worked well that I could incorporate to enhance my design and aspects that did not work well that I should avoid

Competitive Audit
Design

Before any designing could be done, I had to develop an initial Sitemap to lay out the appropriate information hierarchy.

Paper Wireframes proved the most effective method for my initial designs of each screen for each user flow:

  • "Find out how and where to dispose of your waste."

  • "Connect with local officials to submit proposals for a policy change and a local educational event."

 

After consolidating the multiple paper wireframes I created into a single refined version for each screen, I transferred them to Digital Wireframes and Low-Fidelity Digital Prototypes, using AdobeXD for the dedicated mobile appdesigns and Figma for the responsive web designs.

Sitemap
Lo-Fi Wireframes

Mobile App

Mobile Web

LoFi Wireframes - Mobile App _edited.jpg

Tablet Web

Desktop Web

Test, Iterate, and Refine

I conducted a Moderated Usability Study on my low-fidelity prototype with a sample group of my target users to get feedback that I could use to iterate and improve my designs.

Round 1 Findings:

  1. Users of the dedicated mobile app wanted a feature where they could log their positive actions to build stronger habits.

  2. Users preferred to check the waste disposal guidelines of an item by using their camera to identify it.

  3. Users preferred to use a map page to set and view their location before viewing the location details.

During the design of the High Fidelity Mockups and Prototype, I gave special attention to these Accessibility Considerations:

  • Color contrast ratios of key CTA buttons were increased to meet AA standards after initial design proved insufficient

  • Added labels to buttons to enhance digestibility for non-digital-native users

Hi-Fi Prototypes
Takeaways & Future Steps

Impact:

Users shared that the app helped them better understand the waste disposal guidelines of many items that they had wrong assumptions about for a long time.

“I had no idea that recycled plastic bags actually made things worse by clogging up the collection machines!”

What I Learned

I learned that even though the vast content on the topic of environmental consciousness confuses many users, providing an easy way to digest the basics and instill just a small amount of better habits can create a larger positive impact than people imagine.

Next steps

If the EcoHero project were to continue in its development, the next steps I would implement are:

  • Populate and connect its educational resources to credible sources.

  • Create incentivizing events to increase user engagement and rewards for sharing with their friends.

  • Conduct research on how successful the app would be in helping people learn how to dispose of their waste properly.

*Case Study slide deck available upon request*

bottom of page