Mamoru
Empowering students for sustainable living
UI design
July 2022 - September 2023
Background
Mamoru, launched on April 15, 2021, helps users find over 500 eco-friendly stores selling organic, fair trade, and ethical products. It features a "Sustainability Map" where users can add and share their favorite sustainable shops, promoting environmental awareness and personal action.
Challenges
Bridging the gap between sustainable living and student budgets
Educating students about sustainable alternatives
Encouraging user engagement and retention
Objectives
Develop a user-friendly app for sustainable living
Ensure a seamless and user-friendly experience for students managing their accounts and making sustainable purchases
My Role
As a UI Designer, I focused on creating intuitive and visually engaging interfaces for key platform sections, such as Onboarding, Homepage, Account Settings, Checkout, and Cart screens.
Solution
Mamoru was designed to bridge the gap between sustainable living and student budgets, offering features that promote eco-friendly choices while keeping them financially accessible.
The key feature of Mamoru
Mamoru's core feature focuses on offering exclusive student discounts on sustainable products. By partnering with eco-friendly brands and shops, Mamoru makes environmentally conscious choices more affordable for students. This approach encourages sustainable living while positioning Mamoru as a trusted resource for budget-conscious, eco-conscious individuals.
UI design
Mobile App
Mamoru initially started as a mobile app but later transitioned to a web-based platform due to challenges in maintaining the mobile application.
Upon joining the project, I discovered that some screens were already designed, but I was tasked with redesigning and updating existing screens as well as creating new ones as needed. This allowed me to contribute to the project's progress while simultaneously improving my skills through hands-on experience.
Onboarding
Log in & Sign up
Homepage
Log in view
Non-log in view
Scan QR Code -> Offer
Shop Page -> Offer
User web app/mobile
Account Settings
Design Principles:
Prioritized clarity in presenting essential account information
Maintained visual consistency with Mamoru's brand identity
Features and Decisions:
Implemented a clean and organized layout for easy navigation
Included sections for updating personal information, verifying student status, and managing payment methods
Integrated intuitive icons and clear calls-to-action for seamless user interactions
Account Settings
Student status verification
Shipping address
Payment methods
Change password
Online marketplace product page / Hamburger menu
Checkout and Cart Screens
Streamlined the checkout process to minimize user effort
Communicated Mamoru's commitment to security and sustainability
Ensured a visually appealing and engaging shopping experience
Simplified the checkout flow with a step-by-step process
Cart. Merchant has no free shipping option
Cart. Merchant has free shipping option
Work in progress
Online marketplace product page / Hamburger menu