top of page
CleanUp Crew
Let's cleanup together!
CleanUp Crew is an app created as part of General Assembly's Environmental Sustainability Hackathon. Devised, designed and developed in a six day sprint, CleanUp Crew engages users to step out and into their local communities and clean up litter and incentivizing cleanups using gamification. Sound interesting? Keep scrolling!
Overview
Team size: 2 UX Designers, 2 Developers
Role: Lead UX Designer
Duration: 6 day sprint
Tools: Figma, React, Zoom, Slack, Canva
Introduction
I attended my first hackathon with General Assembly in November, 2022. It was an exciting learning experience where I got to work alongside developers to design and develop an app towards environmental sustainability, the theme of this hackathon. As my team started to ideate possibilities for an app, I started to think about my local community and environmental causes that have been on my mind, which led me to the idea of a gamified anti-littering campaign that gets users out of their homes and outdoors to clean up their community. As a UX designer, my core responsibilities included user research, journey mapping, persona creation, lo-fidelity and mid-fidelity wireframing, hi-fidelity prototyping, and usability testing. In this case study, I will go over the steps I took in order to show my UX process and provide more context for the designing phase.
Research
When first embarking on this project, we recognized the importance of conducting thorough research to inform our UX design decisions. Our initial phase involved a comprehensive feature analysis, where we meticulously examined the functionalities and interactions of existing apps in the same domain. This comparative analysis allowed us to identify gaps and opportunities for improvement.
Additionally, we performed an in-depth element analysis, dissecting the UI components and visual elements of successful apps to determine their effectiveness and user appeal. By conducting this research, we were able to gather valuable insights that significantly influenced the subsequent design process.
Persona
From user research, we were able to glean insights about how people feel when they see litter in their local community.
Some points include:
- Wanting to get involved in volunteer groups
but being unsure where to find these groups
- Being concerned about the amount of litter polluting their local parks and walkways
- Not knowing how to get others involved in cleanup efforts, such as friends and family
- Showing interest in cleanups and volunteer events but being too busy or having scheduling conflictions
With this information, we were able to create Tiana! She is a persona we created to give us a better understanding of our target user group and why they may want to engage with an app like CleanUp Crew.
Persona
Persona
Tiana's Journey Map
Mid-Fidelity Wireframes
Our developers needed some wireframes in order to get the ball rolling on their side, so we started by creating a mid-fidelity wireframe of the app. This helped give a better idea of what the app would look like and how it would function, specifically looking into the main interaction of starting a new cleanup.
After the wireframe was completed, we went ahead and prototyped it so that the elements were functional and allowed users to smoothly navigate through the cleanup process. This would also help us to conduct usability tests on the mid-fi prototype and give us insights on what works and what users seem to have trouble completing.
High-Fidelity Prototype
Once the mid-fidelity wireframes were completed, my team was able to advance to the high-fidelity responsive desktop design.
Below you can interact with the prototype, check it out!
Hi-Fidelity Usability Test Results
Once we completed the hi-fidelity prototype, we conducted various usability tests to see how the main user flows improved from the mid-fidelity usability results. We saw a significant improvement in users being able to successfully complete a cleanup and access the leaderboard to check out their rankings. This showed us that users understood how to navigate the app without assistance or any pain points, which showed that our app was intuitive for users to get to where they need to be.
Deploying the App & Next Steps
With the hi-fidelity prototype and usability test results completed, we handed off our design to the dev team so they could start coding in the elements and deploying the app. Below is the link to CleanUp Crew, check it out!
https://cleanup-crew.netlify.app/
Some next steps my team and I would take include:
- Add camera app feature to allow users to access their camera and take the before/after picture
- Implement the slider feature so users can see the impact they have made with their cleanup
- Iterate further on the hi-fi prototype and conduct further usability testing, as well as A/B testing
bottom of page