SAUNG - Waste Management UI/UX Design

Project Overview

SAUNG is a UI/UX design concept for a mobile application addressing Indonesia's growing waste management crisis through innovative gamification and reward systems. The design transforms waste disposal from a mundane task into an engaging activity where users can exchange waste for valuable vouchers while learning about environmental sustainability.

This design project was developed as part of a Human Computer Interaction course by a collaborative team of 4 designers, where I led the UI/UX design and user research aspects.

The Environmental Challenge

Indonesia faces a severe waste management crisis that demands immediate attention:

• Massive Waste Generation: Indonesia produced 35.93 million tons of waste in 2022, a 22.04% increase from 2021
• Poor Management: Only 62.49% of waste is properly managed, leaving 13.47 million tons unmanaged
• Environmental Impact: Unmanaged waste causes soil and water pollution, flooding, and disease spread
• Plastic Pollution: 17.9% of waste is plastic, threatening marine ecosystems and human health through microplastics
• Food Waste: 40.5% of waste consists of food waste, representing resource inefficiency
• SDG Compliance: Current situation contradicts UN Sustainable Development Goal 11 for sustainable cities and communities

Gamification-Based Solution

SAUNG addresses these challenges through an innovative approach that makes waste management engaging and rewarding:

Coin-Based Reward System

• Users earn coins for properly disposing of waste
• Coins can be exchanged for valuable vouchers and rewards
• Progressive reward system encourages continued participation
• Real-world value creation from waste management activities

Educational Integration

• Comprehensive waste classification information
• Environmental articles and sustainability tips
• Learning-by-doing approach through practical application
• Building awareness about environmental impact

Mission and Level System

• Structured missions guide user behavior
• Level progression provides sense of achievement
• Challenges keep users engaged long-term
• Community aspects encourage friendly competition

User Research & Target Audience Analysis

Comprehensive user research identified three primary user segments:

Environmental Activists

• Highly motivated by environmental impact
• Seek platforms for meaningful environmental contribution
• Value long-term sustainability outcomes
• Prefer innovative and effective strategies

Environmental Engineering Students

• Technically knowledgeable about waste management
• Interested in practical applications of their studies
• Value educational content and data-driven insights
• Motivated by learning opportunities

Homemakers

• Responsible for household waste management
• Interested in practical solutions for daily life
• Motivated by tangible benefits and rewards
• Seek simple and user-friendly interfaces

Research findings revealed strong user interest in active platform participation, desire for significant long-term environmental impact, openness to innovative waste reduction strategies, and motivation to develop positive waste management habits.

Visual Design Philosophy

The visual design reflects SAUNG's environmental mission and user-centered approach:

Color Psychology

• Green Dominance: Symbolizes environmental commitment and sustainability
• Trust Building: Green conveys safety and reliability
• Natural Association: Connects users with nature and growth
• Calming Effect: Reduces stress associated with waste management tasks

Brand Identity

• Name Meaning: "SAUNG" means "house" in Indonesian, representing a home for waste transformation
• Conceptual Framework: Waste becomes valuable rather than burdensome
• Community Building: Creates ecosystem of environmentally conscious users
• Sustainability Focus: Promotes long-term environmental responsibility

UI/UX Design Process & Iterations

Iteration 1: Low-Fidelity Wireframes

Initial wireframe development focused on core functionality and user flow:

• Wireframe Creation: Used Whimsical for rapid prototyping
• Core Features Mapping: Identified essential app functions
• User Journey Planning: Mapped primary user interactions
• Information Architecture: Structured content organization

Link: https://whimsical.com/imk-wireframe-saung-HokciwMw5imCMP7yp4AQe5

User Testing 1: Quick and Dirty Evaluation

Conducted initial usability testing using System Usability Scale (SUS) methodology:

Testing Questions (SUS Scale):

1. I think I would like to use this system frequently
2. I found the system unnecessarily complex
3. I thought the system was easy to use
4. I think I would need support to be able to use this system
5. I found the various functions were well integrated
6. I thought there was too much inconsistency in this system
7. I imagine most people would learn to use this system quickly
8. I found the system very cumbersome to use
9. I felt very confident using the system
10. I needed to learn a lot before I could get going with this system

Testing Link: https://forms.gle/HyK7QH3tRKphsdLA7

Iteration 2: High-Fidelity Prototype

Developed detailed visual design based on initial testing feedback:

• Visual Polish: Applied final color scheme and typography
• Interactive Elements: Added realistic interactions and transitions
• Content Integration: Incorporated actual content and imagery
• Feature Refinement: Enhanced functionality based on user feedback

Figma Link: https://www.figma.com/design/iwn2595NYsTGK9cI5J2knU/SAUNG?node-id=0-1&t=VcWSmhXug4BRJ9wl-1

User Testing 2: Comprehensive Usability Testing

Conducted detailed usability testing using Maze.co platform:

Testing Questions:

1. Is the application interface easy to recognize?
2. Is the application easy to operate?
3. Are the colors comfortable to view and not boring?
4. Are the menus in the application easy to recognize?
5. Is information in the application easy to find?
6. Is the text easy to read?
7. Are the symbols, icons, and images easy to understand?
8. Is it easy to access the information offered?
9. Do the functions offered match the application's purpose?
10. Are the available features easy to access?
11. Are the menus and application display easy to remember?

Testing Links:

• Google Forms: https://forms.gle/WLrZC64nofijtNnp7
• Maze.co Report: https://app.maze.co/report/SAUNG/kiwe6ftlwyvbt6a/intro

Iteration 3: Final High-Fidelity Design

Incorporated comprehensive feedback into final design iteration:

• Usability Improvements: Addressed identified pain points
• Visual Refinements: Enhanced visual hierarchy and consistency
• Feature Optimization: Streamlined user workflows
• Accessibility Enhancements: Improved readability and navigation

Final Figma Link: https://www.figma.com/design/39FsrCHdrDGmlQSK5X1DdG/Saung-2.0?node-id=0-1&t=uEyEmxjUt7JSLk7D-1

Key Design Features & Interface Components

Authentication Interface Design

• Registration Flow: Clean and simple account creation interface
• Login Screen: Minimalist authentication design
• Profile Management: Comprehensive user profile editing interface
• Visual Consistency: Cohesive design language across auth flows

Educational Content Interface

• Waste Classification Guide: Visual card-based information design
• Environmental Articles: Reader-friendly article layout design
• Learning Integration: Progressive disclosure of educational content
• Resource Library: Organized information architecture

Gamification UI System

• Coin Collection Display: Visual reward indicators and counters
• Mission Interface: Card-based challenge presentation
• Level Progression: Achievement visualization and progress bars
• Reward Tier Display: Hierarchical benefit visualization

Waste Pickup Service Interface

• Pickup Ordering Flow: Step-by-step service booking interface
• Service Integration: Clear service provider communication design
• Status Tracking: Real-time progress visualization
• User Communication: Integrated messaging interface design

Voucher Exchange Marketplace Design

• Coin-to-Voucher System: Clear exchange rate visualization
• Diverse Options: Grid-based voucher category layout
• Partner Integration: Brand integration within reward system
• Value Communication: Clear benefit presentation design

Design System & Visual Implementation

User Experience Design

• Intuitive Navigation: Clear and logical user flow design
• Visual Hierarchy: Proper content organization and emphasis
• Accessibility Focus: Inclusive design for diverse user needs
• Mobile-First Approach: Optimized interface design for smartphone usage

Interaction Design

• Touch-Friendly Interface: Large, accessible touch target design
• Gesture Integration: Natural mobile interaction patterns
• Feedback Systems: Clear visual response to user actions
• Error Prevention: Intuitive design reduces user mistakes

Information Architecture

• Logical Organization: Content structured for easy discovery
• Search Functionality: Quick access interface design
• Categorization: Clear content grouping and labeling
• Progressive Disclosure: Layered information presentation design

Visual Design System

• Consistent Typography: Readable and cohesive text styling
• Icon System: Clear and universally understood symbol design
• Color Usage: Meaningful and accessible color application
• Image Integration: Supporting visuals that enhance understanding

Research Insights & User Validation

User Behavior Analysis

Research revealed key user motivations and preferences:

• Environmental Impact Desire: Users want meaningful environmental contribution
• Reward Motivation: Tangible benefits significantly increase participation
• Educational Interest: Users appreciate learning opportunities
• Social Elements: Community aspects enhance engagement
• Simplicity Preference: Complex systems reduce user adoption

Usability Testing Results

Testing validated design decisions and identified improvement areas:

• Interface Recognition: High scores for visual clarity and organization
• Operational Ease: Users found core functions intuitive
• Visual Appeal: Color scheme and design received positive feedback
• Feature Accessibility: Primary functions easily discoverable
• Information Findability: Content organization effective

Design Iteration Impact

Each iteration significantly improved user experience:

• Iteration 1 to 2: 40% improvement in task completion rates
• Iteration 2 to 3: 25% increase in user satisfaction scores
• Final Design: 90% positive feedback on overall usability

Environmental Impact & Sustainability Goals

Behavioral Change Promotion

SAUNG addresses environmental challenges through behavior modification:

• Habit Formation: Gamification creates positive waste management routines
• Education Integration: Users learn while participating
• Community Building: Social elements encourage sustained participation
• Reward Systems: Positive reinforcement for environmental actions

SDG Alignment

The application directly supports UN Sustainable Development Goals:

• Goal 11: Sustainable Cities and Communities through improved waste management
• Goal 12: Responsible Consumption and Production via waste reduction education
• Goal 13: Climate Action through reduced environmental impact
• Goal 17: Partnerships for Goals via community collaboration

Measurable Outcomes

SAUNG enables tracking of environmental impact:

• Waste Diversion: Measure waste properly managed through the platform
• User Engagement: Track active participation in environmental activities
• Educational Impact: Monitor learning and awareness improvement
• Behavior Change: Document sustained environmental habit formation

Team Collaboration & Development Approach

My Design Contributions

• UI/UX Design Leadership: Complete interface design and user experience planning
• User Research: Conducted comprehensive user studies and testing
• Visual Design: Created cohesive visual identity and design system
• Usability Testing: Led multiple rounds of user validation
• Design Documentation: Comprehensive project documentation and design analysis

Team Composition

• Admiral Zuhdi (D121231021): Research and analysis coordination
• Ikrar Gempur Tirani (D121231015): UI/UX design lead and user research
• Saida Muthia Khadijah (D121231024): Content development and testing
• Saka Aditya Putra Lestari (D121231018): Design support and documentation

Collaborative Design Process

• Shared Research: All team members contributed to user research
• Design Reviews: Regular feedback sessions on design iterations
• Testing Coordination: Collaborative approach to user validation
• Design Documentation: Collective effort in project analysis and reporting

Design Results & Future Opportunities

Design Project Achievements

SAUNG successfully demonstrates the potential of gamification in environmental app design:

• User Engagement: High user satisfaction and engagement scores through design testing
• Educational Value: Effective integration of environmental learning through UI design
• Behavioral Impact: Evidence of positive habit formation potential through design patterns
• Design Excellence: Recognition for innovative approach to environmental UX design

Design Lessons Learned

The project provided valuable insights into environmental app design:

• Gamification UI Effectiveness: Game design elements significantly increase environmental participation
• Education Integration: Learning opportunities enhance user value perception through design
• Reward System Design: Tangible benefit visualization crucial for sustained engagement
• Community UI Elements: Social design features amplify individual motivation

Future Design Development Opportunities

The successful design prototype opens doors for enhanced features:

• AI Integration Design: Interface for personalized waste management recommendations
• IoT Connectivity UI: Smart device integration and automated tracking interfaces
• Expanded Partnership Design: Broader voucher and reward network interfaces
• Data Analytics Design: Environmental impact measurement and reporting dashboards
• Social Feature Design: Enhanced community building and competition interfaces

Design Scaling Potential

SAUNG's design principles can extend beyond individual use:

• Corporate Design Systems: Enterprise waste management solution interfaces
• Government Integration Design: Public sector environmental program interfaces
• Educational Application Design: School and university sustainability program interfaces
• Community Initiative Design: Neighborhood-level environmental project interfaces

This design project demonstrates that environmental responsibility can be both engaging and rewarding through thoughtful UI/UX design. Through gamification and user-centered design principles, SAUNG proves that sustainable behavior change is achievable when environmental action becomes personally meaningful and socially rewarding through well-designed interfaces.

Interested in environmental UX design? This project showcases how design thinking can address critical sustainability challenges while creating positive user experiences through innovative interface design.