GREEN$
GREEN$
GREEN$
TIME
TIME
January - April , 2025
January - April , 2025
MY ROLE
MY ROLE
UI / UX Design
UI / UX Design
TEAM
TEAM
Mankin
Mankin
Mira
Stephen
Mira
Mira
Stephen
Stephen
Overview
Overview
This project is a mobile app design assignment for our university course. We chose "Goal 11: Sustainable Cities and Communities" from the UN Sustainable Development Goals as our core direction. By looking into Hong Kong's existing GREEN$ system, we wanted to completely redesign it to make the app much more approachable and user friendly. We also introduced handy features like an in-app store, peer-to-peer GREEN$ transfers, and transaction analytics charts, all to actively encourage people to get more involved in everyday sustainability.
This project is a mobile app design assignment for our university course. We chose "Goal 11: Sustainable Cities and Communities" from the UN Sustainable Development Goals as our core direction. By looking into Hong Kong's existing GREEN$ system, we wanted to completely redesign it to make the app much more approachable and user friendly. We also introduced handy features like an in-app store, peer-to-peer GREEN$ transfers, and transaction analytics charts, all to actively encourage people to get more involved in everyday sustainability.
Challenge
Challenge
Our main challenge was making sure the redesign genuinely fits into the daily lives of Hong Kong residents, such as homemakers, through an intuitive and seamless experience rather than adding extra cognitive load. Since the current recycling process can feel a bit scattered at times, our core puzzle was solving everyday pain points, like being just a few points short of a reward, through features like an in-app store and peer point sharing, while keeping everything transparent with clear data analytics.
Our main challenge was making sure the redesign genuinely fits into the daily lives of Hong Kong residents, such as homemakers, through an intuitive and seamless experience rather than adding extra cognitive load. Since the current recycling process can feel a bit scattered at times, our core puzzle was solving everyday pain points, like being just a few points short of a reward, through features like an in-app store and peer point sharing, while keeping everything transparent with clear data analytics.
1. Empathy Map
1. Empathy Map
- An all-in-one mobile app blending smart recycling station navigation, an in-app eco-store for direct redemption, and P2P GREEN$ point transfers.
- An all-in-one mobile app blending smart recycling station navigation, an in-app eco-store for direct redemption, and P2P GREEN$ point transfers.
- Designed to make recycling and reward redemptions fast, intuitive, and reliable for anyone looking to build everyday eco-friendly habits on the go.
- Designed to make recycling and reward redemptions fast, intuitive, and reliable for anyone looking to build everyday eco-friendly habits on the go.
3. Brainstorming
3. Brainstorming
- Expanding our initial ideas into structured pillars: Station Finding and Map, Station Activity Reporting and Verification, and In-App Store and P2P Sharing.
- Expanding our initial ideas into structured pillars: Station Finding and Map, Station Activity Reporting and Verification, and In-App Store and P2P Sharing.
- Exploring creative ways to merge seamless station navigation with community driven point-sharing to create a more practical and engaging recycling experience.
- Exploring creative ways to merge seamless station navigation with community driven point-sharing to create a more practical and engaging recycling experience.
5. Information Architecture
5. Information Architecture
- Mapping out logical page hierarchies and navigation flows to ensure a seamless user journey from login, station discovery, and QR code scanning to in-app store redemption.
- Mapping out logical page hierarchies and navigation flows to ensure a seamless user journey from login, station discovery, and QR code scanning to in-app store redemption.
- Designing a clear and intuitive IA tree to minimize user friction when checking locations, managing points, or navigating through everyday recycling tasks.
- Designing a clear and intuitive IA tree to minimize user friction when checking locations, managing points, or navigating through everyday recycling tasks.
7. Visual Design
7. Visual Design
- Established a cohesive visual design system incorporating a sustainable and earthy color palette along with modern and crisp Inter typography to keep users feeling secure and guided.
- Established a cohesive visual design system incorporating a sustainable and earthy color palette along with modern and crisp Inter typography to keep users feeling secure and guided.
- Defined functional color schemes and clear typography scales to ensure a consistent, reliable, and approachable aesthetic across all station mapping, store, and analytics screens.
- Defined functional color schemes and clear typography scales to ensure a consistent, reliable, and approachable aesthetic across all station mapping, store, and analytics screens.
2. Persona Development
2. Persona Development
- Creating a user persona to understand how homemakers handle everyday recycling and reward redemptions in Hong Kong.
- Creating a user persona to understand how homemakers handle everyday recycling and reward redemptions in Hong Kong.
- Understanding the daily routines, recycling motivations, and frustrations of users facing point shortfalls or disjointed workflows.
- Understanding the daily routines, recycling motivations, and frustrations of users facing point shortfalls or disjointed workflows.
4. Storyboard
4. Storyboard
- Illustrating how a homemaker handles post-dinner food waste recycling and everyday reward redemptions on the go.
- Illustrating how a homemaker handles post-dinner food waste recycling and everyday reward redemptions on the go.
- Demonstrating how the app instantly helps users overcome point shortfalls through P2P point transfers and clear transaction analytics.
- Demonstrating how the app instantly helps users overcome point shortfalls through P2P point transfers and clear transaction analytics.
6. Wireframing
6. Wireframing
- Developed wireframes using Figma to outline the app's layout, focusing on intuitive user journeys for station navigation, in-app store redemption, and point transfers.
- Developed wireframes using Figma to outline the app's layout, focusing on intuitive user journeys for station navigation, in-app store redemption, and point transfers.
- Designed practical wireframes to ensure layout clarity and technical feasibility, making it extremely easy for users to find recycling stations, redeem rewards, and review transaction analytics instantly.
- Designed practical wireframes to ensure layout clarity and technical feasibility, making it extremely easy for users to find recycling stations, redeem rewards, and review transaction analytics instantly.
8. Prototyping
8. Prototyping
- Developed interactive prototypes to simulate real-time station navigation, in-app store redemption, and point transfer flows.
- Developed interactive prototypes to simulate real-time station navigation, in-app store redemption, and point transfer flows.
- Tested and refined user flows to ensure a seamless, friction-free experience for users managing everyday recycling and rewards on the go.
- Tested and refined user flows to ensure a seamless, friction-free experience for users managing everyday recycling and rewards on the go.
1. Empathy Map
- An all-in-one mobile app blending smart recycling station navigation, an in-app eco-store for direct redemption, and P2P GREEN$ point transfers.
- Designed to make recycling and reward redemptions fast, intuitive, and reliable for anyone looking to build everyday eco-friendly habits on the go.
2. Persona Development
- Creating a user persona to understand how homemakers handle everyday recycling and reward redemptions in Hong Kong.
- Understanding the daily routines, recycling motivations, and frustrations of users facing point shortfalls or disjointed workflows.
3. Brainstorming
- Expanding our initial ideas into structured pillars: Station Finding and Map, Station Activity Reporting and Verification, and In-App Store and P2P Sharing.
- Exploring creative ways to merge seamless station navigation with community driven point-sharing to create a more practical and engaging recycling experience.
4. Storyboard
- Illustrating how a homemaker handles post-dinner food waste recycling and everyday reward redemptions on the go.
- Demonstrating how the app instantly helps users overcome point shortfalls through P2P point transfers and clear transaction analytics.
5. Information Architecture
- Mapping out logical page hierarchies and navigation flows to ensure a seamless user journey from login, station discovery, and QR code scanning to in-app store redemption.
- Designing a clear and intuitive IA tree to minimize user friction when checking locations, managing points, or navigating through everyday recycling tasks.
6. Wireframing
- Developed wireframes using Figma to outline the app's layout, focusing on intuitive user journeys for station navigation, in-app store redemption, and point transfers.
- Designed practical wireframes to ensure layout clarity and technical feasibility, making it extremely easy for users to find recycling stations, redeem rewards, and review transaction analytics instantly.
7. Visual Design
- Established a cohesive visual design system incorporating a sustainable and earthy color palette along with modern and crisp Inter typography to keep users feeling secure and guided.
- Defined functional color schemes and clear typography scales to ensure a consistent, reliable, and approachable aesthetic across all station mapping, store, and analytics screens.
8. Prototyping
- Developed interactive prototypes to simulate real-time station navigation, in-app store redemption, and point transfer flows.
- Tested and refined user flows to ensure a seamless, friction-free experience for users managing everyday recycling and rewards on the go.
High-Fidelity Designs
High-Fidelity Designs
Final Product & Demo
Final Product & Demo
The Result
The Result
The Result
- Successfully designed and prototyped the GREEN$ Redesign, a comprehensive mobile app concept combining smart recycling station navigation, an in-app eco-store for direct redemption, and P2P point transfers.
- Successfully designed and prototyped the GREEN$ Redesign, a comprehensive mobile app concept combining smart recycling station navigation, an in-app eco-store for direct redemption, and P2P point transfers.
- Successfully designed and prototyped the GREEN$ Redesign, a comprehensive mobile app concept combining smart recycling station navigation, an in-app eco-store for direct redemption, and P2P point transfers.
- Successfully integrated intuitive user flows to transform the scattered recycling process into a fast, seamless, and reliable everyday experience for users on the go.
- Successfully integrated intuitive user flows to transform the scattered recycling process into a fast, seamless, and reliable everyday experience for users on the go.
- Successfully integrated intuitive user flows to transform the scattered recycling process into a fast, seamless, and reliable everyday experience for users on the go.
Reflection
Reflection
Reflection
- Gained valuable learning experiences in balancing real-time user utility (such as addressing point shortfalls), visual aesthetics, and system navigation flow throughout the design process.
- Gained valuable learning experiences in balancing real-time user utility (such as addressing point shortfalls), visual aesthetics, and system navigation flow throughout the design process.
- Gained valuable learning experiences in balancing real-time user utility (such as addressing point shortfalls), visual aesthetics, and system navigation flow throughout the design process.
- Recognizing that every step in UI/UX design, from addressing immediate pain points to perfecting point transfers and analytics, is crucial for building a coherent and effective product.
- Recognizing that every step in UI/UX design, from addressing immediate pain points to perfecting point transfers and analytics, is crucial for building a coherent and effective product.
- Recognizing that every step in UI/UX design, from addressing immediate pain points to perfecting point transfers and analytics, is crucial for building a coherent and effective product.
© Mankin Portfolio | Created by Mankin
Made in Framer
© Mankin Portfolio | Created by Mankin
Made in Framer
© Mankin Portfolio | Created by Mankin
Made in Framer