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!
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
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
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
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
High-Fidelity Prototype tablet
High-Fidelity Prototype Desktop
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