Mo’ Green Mobile App
Mo’Green is a mobile app that utilizes gamification to incentivize users to recycle and collect trash.
Project Summary
Mo’Green was a full exploration into the UX Design process. The process began with identifying a problem I was passionate about solving. In this case, it was creating greener experiences in my local parks. I interviewed residents to find consensus in common problems - specifically all the trash that is left behind.
I brainstormed different ideas and narrowed it to one: incentivize patrons of the parks to take action and clean the place up. Essentially, the idea was to create a prize worth getting for cleaning actions. When someone participates in a park cleaning event, they are given a code which gives them a prize box to open. The prize box contains credits they can redeem for cash, or prizes sponsored by local businesses. I wrote user flows, created wireframes, and eventually a design prototype that I could share for usability testing. I also checked the project for visual accessibility and readability. The project was well received by my classmates and peers.
My Role
Research, user interviews, synthesis, low-high fidelity wireframes, design, prototyping, usability tests
Company
Mo’ Green (Self Project)
Date of Project
Q2 2021
The Challenge
In order to create a solution, we need to find a problem worth solving. The process began with an initial goal: I want to learn Modesto residents’ current feelings about the parks and public spaces available to them, whether their park needs are being met, their feelings on sustainability, and where opportunities lie for environmentally conscious improvements to parks. The first step was to conduct research and interviews to get to the root of a problem we could tackle.
The Solution
Research
In I conducted interviews from members of the Modesto community, with variances in age, neighborhood, political affiliation, and career, in order to best represent the target audience. After conducting interviews, key takeaways from those conversations were synthesized through affinity mapping to determine which environmental and public space problems were shared across this population. I was brought to the following problem statement, “Modesto residents are looking for ways to clean the mess and address the lack of recycling options in the local parks so that they can be further enjoyed.”
It was clear that residents shared a desire for cleaner parks but lacked the incentive or ambition to clean it themselves. When imagining and brainstorming solutions for this problem, it was clear I needed to empower and incentivize the local population to clean the parks themselves. I also wanted to resolve the secondary issue, the lack of recycling options in parks as well.
My best solution was inspired by two existing concepts: The idea of reverse vending machines and the digital mechanic of loot boxes in online videos games. Reverse vending machines take in used plastic bottles and in exchange for discounts in the amount of the bottle’s refund value. Loot boxes are a mechanic which randomizes outcomes for in-game purchases. Instead of buying an expensive item, a user could spend far less on a loot box which typically contains common items but has the potential to result in those high level items. Based on these concepts, I came up with a mobile app which recognizes when users participate in park clean-ups and recycling efforts, rewards them with credits that can be used on loot boxes that award a range of point values that can be exchanged for money or discounts at local participating businesses.
Feature Prioritization
Using Miro, I brainstormed all of the potential features that would make my app a success. Then, I organized those ideas into a chart based on the estimated effort required to implement versus the importance of that feature as requirements for the minimum viable product. This helped me focus on the key features when developing my wire frames and eventually, the high-fidelity prototype.
Site Map
I compared existing apps as well as feedback from my users through card sorting to come up with an intuitive site map. This app is feature-light and simple so there isn’t a lot to map out. It is also very flatly organized given it is a native app and all main pages can be accessed from all pages, similar to a main navigation of a website. We are focusing on building two habits for users: one is to recycle and throw away trash in parks, and the other is to use the app. We want to make that process as simple and straightforward as possible. Now it’s time to begin building wireframes and prototyping.
Prototypes
After gathering and synthesizing feedback, and exploring different solutions and feature sets, it was time to tie it together visually through prototyping. I started on a tablet with very quick sketches blocking out sections and capturing the elements. From there, I could start to elevate those sketches into prototypes that had more structure and information. Once I had a section laid out, I could break it out into more definition. Once those pieces were put together, I was able to integrate design elements using Figma. Once I created all of the different pages, I connected the pages for a high-fidelity functioning prototype to use for usability testing.
Usability Testing
Once we had a working prototype, it was time to test it. Were the tasks easy to understand and complete? Was the navigation intuitive? Where did users struggle? The pandemic made it difficult to meet in person so we held our tests over Zoom. Users shared their screen as they navigated through the essential tasks we had prepared for them. Besides the initial explanation that set the stage for our users, we were very hands off during the process. We wanted to see where users might get stuck, and if so, what their next course of action would be to solve it. We were able to capture lots of feedback during the testing, as well as receive general feedback during a debrief session. Combining the two, we were able to see consistencies across multiple sessions and updated our prototype accordingly.
Conclusion
This project was a complete design experience where the focus was demonstrating each of the steps in the design process. We started in the beginning with defining a problem, using research and interviews to define the problem space. Once there, we generated possible solutions until we were able to narrow it down to a specific idea. We built out our MVP in various levels of wireframes until we had a working prototype to test our ideas. We refined our idea through feedback gathered during usability testing and iterated further on our project.
While this was initially a theoretical project demonstrating key steps of the design process, the feedback was overwhelmingly positive, with most people suggesting this should be an actual product. I’m currently exploring ways we could bring this concept to life for residents of Modesto and beyond.
