top of page

Clean Environment "CEN" App

Project Overview 

This is a Mobile, Tablet, and Desktop application created to help our cities, towns, and neighborhoods become environmentally cleaner, mentally healthy, and safe! These applications are made with the user in mind, for those that are on the go or prefer the comfort of the tablet or desktop view.

Reporting trash, and viewing the results with image notifications will motivate anyone to take part in their community's environmental cleanliness and providing a healthy and safe habitat for all its citizens! 

usgs-JiuVoQd-ZLk-unsplash.jpg
Mobile app Final landing page_edited.jpg
Tablet landing page report_edited_edited
Laptop landing about page.jpg

Project Duration

3 Months of Design Sprint

Software used

  • Photoshop

  • Wix 

  • Filmora

  • Figma 

The Project Problem

  • ​Reporting trash is so hard, that users give up on reporting

  • Government websites makes it to complicated and often there is no follow up

  • Users notice trash along their commute to work, which add stress to their day.

  • Trash on the streets bring personal morale down, bacteria and pollutes our environment. 

The Goal

  • Help citizens to report trash in their community, fast and convenient

  • Have follow ups of reports done with before and after images to create a rewarding experience

  • Make it easy for anyone to report trash, it can be on the go or at home

  • Help underrepresented communities to live in a more cleaner environment

My role: UX Designer, Researcher,
Brand Designer & Facilitator

My responsibilities are:

  • User Research 

  • Wireframing 

  • Prototyping 

  • Moderator 

  • Editor 

Understanding the User

User research summary

I used competitive audit research to understand the already existing websites, especially the cities’ and counties’ websites where citizens should be able to report trash in their neighborhoods. I found after conducting usability studies that citizens are frustrated and confused about how to report trash, and the user flow is difficult to proceed with, and often times they give up. I also was able to understand the motivation of the good citizens to report trash, and how the community feels when their environment is clean, they feel safe.

 

​

Paper Wireframe Prototype Mobile-Design

IMG_9454_edited.jpg

Paper Wireframe Prototype Web-Design

Challenges & pain points

1

PAIN POINT 

Government websites are difficult to navigate, as well reporting trash in my community 

3

PAIN POINT 

Pollution in the community and unresponsive government

2

PAIN POINT 

Making a trash report is so complicated and not getting updates is frustrating

4

PAIN POINT 

Not able to notify trash on the freeway while driving

Persona: Carlos 

Persona 1.png

Carlos is a social Science professor, that loves to drive over cities and towns of communities that are developing.

​

he knows that the quality of life of people its shows on how the streets, and freeways looks like.

​

Hes goal is to have minorities and underrepresented communities to live and have cleaner environment, and encourage all to be part of the community by taking a stand and report trash.

Persona: Mayira 

Mayira is a retire grandma, that loves to do chores by foot. She loves to walk around down town and visit new neighborhoods. 

​

she feels unsafe when walking on streets, and towns that are full of trash, she knows is unsanitary.  

​

Her goal is to see more walking on streets, and towns that are clean and represents a healthy and safe environment for all. 

High-Fidelity Wireframing process 

After the second usability study interview using the low-fidelity prototype, couple of users gave specifics insights on how the use existing Government website and applications work.  Users feel frustrated to make reports about trash and stated that "there is no follow up, or any type of notification from government websites after a report is been done". So they will never know when the report is been taking care of. 

 

After gathering this information, I started understand the process of navigation flows and users request for this application. So I focused on the user request for the application, what's the easiest method for them to report trash and how would they know the report is being taking care like "Getting a notification" to reach the goal. 

​

​

Affinity Diagram 

Insights of the usability studies .jpg

After organizing the Affinity Diagram 

Using the affinity diagram method help me to recognize patterns and themes. On here I discovered what the process would look like, and what themes to implement on my app, to help the user goals. These themes where: 

  • Navigation 

  • Reporting

  • Goals

  • Notification  

See below how the transformation of low-fidelity prototypes becomes a more informative, and visual appealing high-fidelity prototype after all the interview rounds, themes and discovered patterns. I hope you enjoy! 

Low-Fidelity Digital Wireframe prototype 

High-Fidelity Prototype 

High Fidelity prototype demonstrating how by utilizing google maps, navigation system CEN can help those on the go, to make reports easy and accurately

Low-Fidelity prototype to High-Fidelity Prototype

low Fidelity prototype flow.jpg
High Fidelity prototype flow.jpg

High-Fidelity Prototype tablet 

High-Fidelity Prototype Desktop 

Laptop landing report page.jpg

High-Fidelity Prototype user journey 

After the second round of interviews of the low-fidelity Mobile prototype design. I gather new relevant data that convey the users paint points, and user goals, I implement all those insights to the Tablet and Desktop web prototype after re-organizing it. I use the Architecture information to guide my process and maintain a continues flow for all design. 

These points below are the core goal that I use and applied to all deigns. 

​​

  • Easy access to the app, make trash report with multiple options  

  • Follow up notifications with pictures of before and after  

  • Reward the citizen's by reporting trash

  • Create a profile and save reports 

​

Architecture information help with the web design application 

 

User journey "CEN" Clean environment video

High-Fidelity Mobile Design
Click here to view

High-Fidelity Tablet Design Video

High-Fidelity Tablet Design app
Click here to view

High-Fidelity Website Design Video

High-Fidelity Desktop app
Click here to view

Moving Forward

Takeaways

​

With the insight and final application High-Fidelity prototype, the applications, mobile, tablet and desktop were able to convey the users goals and purpose.

 

Users stated "With this app, I'm able to report trash and get notification with pictures, I absolutely love it" 

What I learned 

​

Being able to solve real world issues is rewarding. Being able to give the tools to the user and empower communities. Already established government websites are cumbersome and confusing to the user. Designing with the user in mind allowed me to create an app that will help solve these everyday issues in their communities. 

Next steps

1

Learn how the application is used, and continue to interview users to understand what other optimizations can be made

2

I will look for ways to reward users whenever they do a report, this will motive them to keep on reporting 

3

Addition of news and local updates of environmental trends that can help to improve the environment  

bottom of page