Process Architecture
To solve complex behavioral problems, this case study strictly adheres to the
Stanford d.school Design Thinking framework.
This five-stage model was selected to prioritize human needs over assumptions, ensuring that every design decision is grounded in
verifiable user empathy.
PHASE 1: EMPATHIZE
The Action Gap
I began by seeking to understand the root cause of "Eco-Inaction." Research revealed a paradox: Users possess high intent to help the environment, but complex rules and fear of "doing it wrong" cause them to freeze.
The Market Gap
The Blue Ocean: Competitors focus on carbon tracking or solitary litter cleanup. MEB creates a niche by combining physical waste reduction with community-driven gamification.
PHASE 2: DEFINE
High Intent, High Anxiety
Motivation is high, but research confirms that complex recycling rules create cognitive overload. Tini freezes in the face of uncertainty. She needs a "Learn-First" flow to validate her efforts immediately, not another lecture.
Turning "Eco-Guilt" into Data
I applied a "Don't Make Me Think" philosophy. By automating the complex recycling rules, I converted Tini's anxiety into a simple, gamified data loop. Zero friction, instant relief.
The "Happy Path"
To cure analysis paralysis, the flow is strictly linear. I removed navigation choices until the user completes their first success metric.
PHASE 3: IDEATE
Quantity Guarantees Quality
Brainstorming led me to 13 key sketches. I focused on "Yes, And..." thinking to diverge as far as possible before converging on the final solution.
PHASE 4: PROTOTYPE
Structure Before Style
I built the Hi-Fidelity wireframes in grayscale first. This forced me to solve layout, spacing, and hierarchy issues without relying on color to guide the eye.
A System Built for Scale
I prioritized engineering over aesthetics. By leveraging Figma Variables and Boolean logic, I built a system that supports instant theming and strict accessibility compliance without manual repainting.
I enforced strict contrast ratios and touch targets to meet WCAG standards globally.
I built components for iteration. Top-level toggles eliminate layer digging.
Boolean Logic EnabledZero manual repainting required. The system operates on Global Color Settings.
Global Mode SwitchingModular Construction
This was about being testable. I built V1 as a modular puzzle, knowing the layout would be torn apart. Mentor feedback brutally exposed gaps in the engineering logic, leading to a significant rethink of the core architecture.
One of my focuses on this project was to seek direct, actionable feedback that could show design growth. I appreciate every participant who looked at this and said, " it's good but..." It is this kind of push that keeps me interested and inspired.
PHASE 5: TEST
The Usability Gap
While motivation was high, 2 out of 5 users failed to locate the "Log Plastic" feature. The "Hidden Affordance" issue revealed that the floating action button (FAB) icon resembled a decorative ribbon.
Evaluation Outcome
We conducted a structural audit against Nielsen’s Heuristics and WCAG 2.1 standards. While the gamification logic is sound, specific fidelity issues created barriers.
- Tap targets on Edit Profile < 44px.
- Static images (Stats) are not screen-reader friendly.
A Unified System
With the timeline extended, I revisited the core components to ensure the visual language progressed alongside the UX. This phase focused on merging Light and Dark modes into a cohesive system and reinforcing the linear journey.
- Removed friction: Google Sign-in & "Getting Started" button.
- Added Gamification: Leaderboard & Progress Bar.
- Visual Polish: Updated assets (and added a sad capybara).
IN SUMMARY:
Case Study: At A Glance
My Ecobrick Buddy
End-to-End Product Design
Users weren't apathetic; they were anxious. Complex recycling rules created "Paralysis by Analysis," leading to high intent but low action.
Shifted focus from "Education" to "Validation." I built a gamified system that simplified the input process and rewarded physical action immediately.
100% of users understood the value prop. A unified design system (WCAG AA) now ensures the product scales without technical debt.