GreenCircle app logo
Making A Difference Is One Tap Away
Any individual or community can take action and see the impact they've made, and enjoy a do-good, fee-good experience
GreenCircle app mockups

Duration

3 months

Team

5 UX/UI designers, 4 Full-stack developers

Methodology

Agile

Role

UX/UI designer including branding, marketing / Project Manager

Objectives

Project Overview

Any individual or community can take action and see the impact they’ve made, and enjoy a do-good, feel-good experience.

GreenCircle is an MVP mobile app that empowers users to take part in nature cleanups in a more convenient, engaging, informative, and impactful way within their community. The application allows users to browse, join and host cleanup events whilst providing real-time data from the waste tap counter. To foster additional engagement and growth, GreenCircle celebrates achievements and user impact, and provides environmental awareness and wellbeing via educational content.

The Problem

The current signup processes to join cleanup events often lack clear information and location based options. Additionally, the use of pen and paper to tally the different types of waste collected is inconvenient to the user, as they have to hold too many items, which could lead to errors. Most information about cleanup events comes through social media and websites, and often doesn't allow for spontaneity — as most events are planned weeks or months in advance. Users may lose interest over time due to the whole process of cleanup events,  so they need motivation, support and meaningful insights about the places they’re conducting the cleanups.

Target Users

Environmental enthusiasts

Our primary target users are environmental enthusiasts. However, we designed GreenCircle to be accessible to anyone, enabling individuals and communities to easily join or host nature cleanup events and contribute to their community.

Design Process

We iterated our design solutions weekly using the Agile methodology, incorporating qualitative research methods such as user interviews and usability testing to create GreenCircle. This approach enabled us to rapidly identify user pain points and refine the design accordingly.

Market Research & Competitive Analysis

Most people are somewhat environmentally conscious and want to help solve issues like climate change and waste reduction. Nature-based cleanups are a great way to build community and make a tangible difference to the environment. While many competitors use collection counters for trash tallying, none offer all the features of our GreenCircle.

GreenCircle app competitive analysis

LitteratiLitterati is a global platform that encourages users to pick up and document litter in their communities. The app allows users to photograph litter, tag its location, and categorize the type of waste.

Strengths:
 Engages a global community to tag and map litter with advanced analytics and integration of AI
Weaknesses: Lacks educational content and event coordination

Clean SwellClean Swell is designed for tracking trash collection during beach, waterways and ocean cleanups. Users can log the type and amount of debris they collect.

Strengths:  Detailed impact reporting for marine debris tracking and ability to share records with experts worldwide
Weaknesses:  Limited scope to just coastal areas

TrashOut TrashOut is an app that allows users to report illegal dumps of trash and organize cleanup events. It helps address illegal dumping areas worldwide.

Strengths: Effectively maps illegal dumps and collaboration with municipalities and NGOs
Weaknesses:  Less emphasis on organized cleanup events and user engagement

User Interviews & Persona

We interviewed 10 potential target users before creating our main persona. We gained valuable insights which allowed us to ensure that our design aligns with the needs of our users. We discovered that the majority desired a way to understand their impact after participating in cleanups, as well as environmental issues in general. We also learnt that they found it challenging to discover nearby events with clear details. Additionally, we learnt that whilst some enjoyed the idea of competitive elements via gamification, the majority preferred a more spontaneous approach without the pressure of competition.

GreenCircle app user persona

Site map

The GreenCircle app features a well-organized navigation system that allows users to easily explore cleanup opportunities and track their environmental impact. The journey begins on the "Home" page, where users can access our core features. In the "Browse" section, users can discover nearby events, with filters for options such as location, date, or accessibility. Clicking on an event provides detailed information, including a description, location (linked to a map), date, time, meeting point, and suggestions for similar events or nearby cleanups. The "Achievements" section highlights user progress, incorporating gamification elements to enhance engagement. The "Impact" section displays the overall environmental impact of the user’s efforts, offering a clear view of their contributions. The "Profile" section serves as a personalized hub where users can manage account settings and update information. The GreenGuide provides resources on sustainability and well-being.

GreenCircle app site map

User Flow

GreenCircle offers a seamless experience for both new and returning users. We simplified the sign-up process, addressing one of the key problems we identified. Unlike many other applications, we decided not to ask users for a profile photo, considering that finding a suitable picture can be time-consuming and may raise privacy concerns. Upon signing up, new users set their preferences before accessing the homepage, which showcases achievements, upcoming and suggested cleanup events, and the GreenGuide. From the home screen, users can explore events through a map or list view, join ongoing events, or create their own. We’ve also streamlined the "Join an event" process by eliminating unnecessary steps. During cleanups, users can use the waste tap counter to track the waste they collect. After the cleanup, a summary of their activity is presented, which then redirects them to the homepage. On the Achievements page, users can review their progress, see the impact they’ve made, and view the history of events they’ve participated in. The GreenGuide section provides educational resources, including wildlife information and safety tips. The Profile section allows users to manage personal information, adjust preferences, and log out.

User Flow(Google Drive)

Our Solution

Based off of our UX research, we decided our main features.

Location-Based Events
GreenCircle app location based events

This functionality utilizes user-friendly mobile technology to address a key hurdle in cleanup initiatives: accessibility and awareness. The feature goes beyond simply locating events and provides clear navigation routes, ensuring a smooth arrival. Additionally, users can filter events based on their preferences, ensuring a smooth cleanup experience.

Educational and Wellness Widget
GreenCircle app educational and wellness widget

The Green Circle app's educational widget empowers users by offering informative content accessible anytime, anywhere.  This goes beyond environmentalism, promoting a holistic approach that connects users to their surroundings and well-being.  To further enhance this feature, safety tips can be integrated, including pre-cleanup guidelines.  This commitment to user safety fosters responsible participation in cleanups and enriches the overall Green Circle app experience.

Waste Tap Collection Counter
GreenCircle app waste tap counter

This feature empowers users and benefits the app in several ways. Users can ditch the pen and paper – with a simple tap for each type of trash collected, the app offers a real-time and convenient way to track their cleanup progress. But the benefits go beyond user experience, as this data becomes the backbone of GreenCircle's valuable data collection.

Achievements
GreenCircle app achievements

With achievements via gamification, users are motivated to see their real-time progress and results of the difference they have made to the environment within their community. As users participate in cleanup events and collect trash, they'll witness growth from a virtual seedling to a thriving evergreen!

Mid-fidelity Wireframes

GreenCircle app wireframes 1
GreenCircle app wireframes 2
GreenCircle app wireframes 3

Mockups

GreenCircle app mockups 1
GreenCircle app mockups 2
GreenCircle app mockups 3
GreenCircle app mockups 4

Onboarding

GreenCircle app onboarding screens

UI Kit

Components
GreenCircle app ui kit

GreenCircle's components makes sure consistency across all screens. Rounded corners gives a sense of friendliness. All components passes WCAG guidelines for better accessibility.

Illustrations
GreenCircle app achievements illustrations

A core component of my role was designing achievement illustrations. We introduced a gamified progression system using virtual seedlings, inspired by the natural growth cycle. Five stages – Seedling, Sapling, Blooming, Forest, and Evergreen – each represented by three visually evolving illustrations, created a dynamic and engaging user experience.

Icons
GreenCircle app icons

We created all the icons used in GreenCircle using Figma and Adobe Illustrator. We ensured the icons were pixel-perfect, with each having at least a 2px stroke and a size of 24px by 24px.

Branding

Logo
GreenCircle app logos

The GreenCircle logo, featuring two leaves cradled by a branch, is a powerful symbol of nature's resilience and the collective action it inspires. The leaves represent growth and environmental well-being, while the branch signifies the interconnectedness of our actions. The GreenCircle secondary logo takes a combination mark approach, combining the impactful image of the primary logo (two leaves and a branch) with the clear, written name "GreenCircle."

Typeface

I selected application typefaces, Red Hat Display for heading, and Red Hat Text for body. As we wanted to eliminate competitive elements while maintaining gamification, we wanted to friendly typeface. Red Hat Display grabs attention to headings/titles while Red Hat Text ensures high legibility and readability for small body text.

Color Palette
GreenCircle app color palette

GreenCircle's colour palette is inspired by nature. Primary green (#005435) anchors the app in environmentalism while the accent color, lavender (#5940c1), adds a touch of elegance. Black (#131313) ensures enough contrast on a white (#F7F8FB) background, white (#FFFFFF) provides clean looks for our UI elements.

Marketing Materials

I was responsible for social ads, a one-pager, the project proposal, and a promotional video. Due to the characteristics of the GreenCircle app, I ensured that the content was organized neatly and looked clean.

Project Proposal(Google Drive)Promotional Video(Google Drive)One Pager(Google Drive)Social Ads for Facebook(Google Drive)Social Ads for Twitter(Google Drive)
Social Ads For LinkedIn
GreenCircle app social ad for LinkedIn
Promotional video for social media

Dimensions: 720 x 1280 | Tools: Adobe After Effects, Adobe Premiere Pro

Instagram post
LinkedIn post

Future Features

We also asked our users for feedback to enhance future updates. A social feed would connect users, creating a more engaging experience. Notifications would allow users to receive real-time updates about upcoming events and other information, such as environmental issues. Integrating AI would enable users to have a more interactive and engaging cleanup experience.

Reflections

Optimal Font Sizes

Font size is crucial. While creating wireframes, I struggled to find the right balance. Small fonts can affect accessibility, while large ones can impact user experience and lead to poor interfaces. Balancing these aspects will be my next improvement.

UI for iOS and Android

Since we developed a cross-platform application, it was challenging to design interfaces suitable for both iOS and Android. I found that some UI elements are more aligned with iOS, while others resemble Android interfaces. I need further research on the differences and how to achieve better user interfaces for both platforms.

Team Management

Keeping everyone in the loop and active was challenging. To address this, I set deadlines earlier and established reminders to ensure we could deliver our outcomes every week.

Team

Designers

Tia Le Santo(Lead Designer), Anthony Okoduwa, Trish Clemente, Anjali Rajesh, Naoya Sasaki

Developers

Alberth Rodriguez, Ching Chen Su, Emre Aydin, Masahiro Kanamaru

Thank you for reading!

View other projectsBack to Home