ecosnap
Designing an app to inspire shoreline protection and community engagement.
project overview
EcoSnap is a mobile app designed to empower users to report beaches and shorelines in need of environmental cleanup by uploading photos and sharing brief descriptions of the affected areas. As part of the 'Interface Design‘ course, our team developed a UI concept to promote shoreline protection and foster community engagement.
ROLE
Visual Designer / UX Researcher
TEAM
1 Visual Designer / UX Researcher
2 UX Researchers / UI Designers
2 Video editors
TOOLS
Figma, Zoom
TIMELINE
June - August 22
OUTCOME
Mockups, Prototype
empathize: understanding stakeholders
Inspired by the sight of garbage on local beaches, our team researched how dump sites are managed and how residents respond, leading us to focus on supporting local beach cleanup events. The team then conducted in-person qualitative interviews with potential users to explore their interests and intentions regarding these events. Additionally, the three researchers organized a meeting with the waste committee at the Society Promoting Environmental Protection (SPEC) to gather valuable insights from the perspective of the environmental organization.
01 INTERVIEWS WITH LOCAL RESIDENTS
- ▶︎ Conducted qualitative interviews with local residents to understand their interests and intentions on local beach cleanup events
- ▶︎ Learned that social incentives could encourage local residents' participation
- ▶︎ Discovered that participants often wait for and rely on organizations to host events and lack visibility on the impact of their efforts, usually learning about results through the news
02 MEETING WITH ENVIRONMENTAL ORGANIZATION
- ▶︎ Held a meeting with 12 members of the waste committee at SPEC to gather insights and feedback on the brief EcoSnap concept
- ▶︎ Learned what stakeholders prioritize in cleanup events, including their focus on the environment and the entire cleanup process, such as waste processing
- ▶︎ Collected feedback on EcoSnap's weaknesses from stakeholders, who overall expressed positive responses and liked our interface concept
define: design opportunity identification
IDENTIFIED CHALLENGES
- ▶︎ Local residents rely on organizations to host cleanup events rather than taking independent action
- ▶︎ Participants lack visibility on the direct impact of their efforts, usually learning about results through news updates
- ▶︎ Social incentives for participation are limited, reducing motivation for long-term engagement
- ▶︎ Stakeholders prioritize the full cleanup process, including waste management, which is often overlooked in current initiatives
DESIGN OPPORTUNITIES
- ▶︎ Introduce social incentives to encourage independent participation in cleanup events
- ▶︎ Provide real-time impact tracking to increase participant engagement and awareness of their contributions
- ▶︎ Improve accessibility to cleanup event information, making it easier for residents to participate proactively
- ▶︎ Align cleanup efforts with stakeholder priorities by incorporating waste processing insights and environmental impact tracking
how might we ...
"streamline the participation process and encourage the community to keep the local shorelines clean and vibrant"?
ideate: feature ideation
Based on in-depth research, interviews, and a meeting with SPEC, our team refined our interface and finalized five key features. Our focus was to address the pain points of both participants and the environmental organization. For participants, we concentrated on increasing autonomy and visibility regarding their impact, while for the organization, we emphasized the importance of including a mission statement on the landing page to highlight the app's purpose and showcasing the entire cleanup process.
01 REPORTING
- ▶︎ Users can report dump sites to raise awareness and prompt cleanup efforts
02 PARTICIPATING
- ▶︎ Users can join cleanup groups and events through the app
03 SCHEDULING
- ▶︎ Users can view, track, and manage upcoming cleanup events
04 LEARNING
- ▶︎ Users can learn about EcoSnap and discover ways to contribute to environmental protection
05 ACHCIEVEMENT
- ▶︎ Users can earn badges for their contributions and download or share volunteer certificates
design: brand identity creation
As the sole visual designer of the team, I explored various color palettes and created logo designs and icons, with a focus on a nature-inspired theme. I experimented with contrasting colors and applied different palettes to the landing page to effectively communicate the app's environmental message.
design: wireflows, mockups & prototype
Our entire team collaborated on designing the wire flows and mockups, ensuring a cohesive user experience throughout the app. We worked closely to refine the structure, interactions, and overall flow. Once the foundational designs were in place, I took the lead in implementing basic interactions within the Figma prototype, which was used for usability testing before final polishing. This allowed us to gather valuable user feedback and make necessary refinements. Meanwhile, another team member specialized in developing more complex and dynamic interactions using Protopie, enabling us to create a high-fidelity prototype that effectively demonstrated the app's functionality and user experience.
test: final polish through user tests
Our team conducted a total of 15 user tests after finalizing the design of all features. I personally conducted six of these tests, gathering valuable insights into user interactions and pain points. Based on the feedback collected, we identified areas for improvement and made targeted refinements to enhance the app's usability and overall user experience.
A/B TESTING
- ▶︎ Conducted A/B testing with think-aloud observation, followed by qualitative interviews with participants for app refinement
- ▶︎ Received positive feedback for the app's practical purpose, clean interface, minimal distractions, and ability to foster a sense of community
- ▶︎ Feedback highlighted a lack of "wow factor' in interaction, photo over-reliance, and the need for a To-Do list feature on the calendar for personalization
FINAL POLISH
- ▶︎ maintain interactivity without overwhelming users, I kept the mission statement on the landing screen, allowing users to skip it for a more dynamic experience
- ▶︎ Photos were crucial to convey the urgency of beach cleanup, so we retained them despite feedback
- ▶︎ Due to time limitations, the personalized To-Do list was deferred to future enhancements
final outcome
reflection
GROWTH AS A DESIGNER THROUGH OBSTACLES
In the middle of the process, our team shifted our design focus to better align with the project's objectives and user needs. Although this change initially impacted our timeline, it ultimately resulted in a more refined concept. As we dedicated additional time to catch up, the app began to improve. I completed my tasks early, experimenting with EcoSnap's color scheme, proposing logo and navigation bar designs, and creating icons while others focused on wireflows. Finalizing the visual elements was crucial for creating mockups, and although it required time and patience, the results were incredibly rewarding.
Although our team faced challenges at the start, I enjoyed the process of designing the interface and am satisfied with the final result. This project helped me discover my strengths and areas for improvement in my design skills.
achievements
- ▶︎ Conducted 1 meeting with the waste committee at SPEC for stakeholder insights
- ▶︎ Proposed 3 logo designs and 5 color palettes to enhance visual appeal and align with nature theme
- ▶︎ Developed wireframes , mockups and a prototype using Figma , ensuring a user-centered design
- ▶︎ Designed 4 badge icons to incentivize user participation, differentiated by role
- ▶︎ Conducted 6 user tests refining visuals and resolving feature issues based on feedback
