Featured Project

By the Bin: Map-based sharing for sustainable living

By the bin mockup

Context

An ongoing personal project that helps people share and discover preloved items left on the street for collection, reducing waste while building local connections.

Brief

Design and develop a geolocation-based mobile app that makes it easy for users to share and discover free resources locally. The solution needed to be intuitive, accessible and address real-world challenges.

Outcome

I conducted user research, identifying key pain points that informed design decisions including dual navigation options (map and list views) and status tracking features. Delivered user personas, journey maps, user flows, wireframes and high-fidelity prototypes on Figma. Currently I'm developing the MVP using React Native and Expo, preparing to deploy for real-world testing and continued iteration based on user feedback.

My role

Designer, user researcher, developer

Tools

  1. Research & Testing: Semi-structured interviews, in-person usability testing
  2. Design: Figma (wireframes, prototypes, design system)
  3. Development: React Native, Expo
Stooping Project Main Mockup

Opportunity

I start by researching existing sharing platforms. Facebook groups (Edinburgh based group: Meadows share, street bounty) revealed fragmented sharing discussions, Nextdoor (community connection), OLIO (free food sharing) and TooGoodTooGo (surplus food rescue), showed different approaches to connecting sharers with seekers. Current methods for sharing free items are fragmented and inefficient. User either rely on general online platforms like Facebook groups or find items by chance on the street. There is no dedicated, location-aware solution that connects people who have items to share with those actively seeking them in their local area. A specialised resource-sharing application could improve discovery rates and create a more reliable, user-friendly experience for resource sharing.

Research Roadmap

Research Roadmap

01. User Research & Analysis

I conducted semi-structured interviews to understand participants' past experiences with existing sharing methods. Through targeted questions about their use of Facebook groups and street discoveries, I identified key pain points including difficulty with local discovery and uncertain item availability.

The research revealed two distinct pain point journeys: one is based on user experience on existing online platforms (Facebook groups), and another one is based on street finds. Understanding both digital and physical contexts was crucial to designing a comprehensive solution that addressed the full user experience.

User Insight

  1. Many users enjoy browsing but rarely collect items due to lack of real-time updates or casual curiosity.
  2. Enthusiastic users want to quickly see nearby items while they’re already out and about.
  3. Easy to use, quick to check item status, location and information
  4. Sharing items feels rewarding, users enjoy giving and seeing others benefit.
  5. Users are forgiving about item quality or availability since everything is free.
Online user journey

User Journey with Pain Point (online)

Street discovery journey

User Journey with Pain Point (street discovery)

02. Design

I began by mapping out users' basic actions and creating user flows to understand navigation paths through the app. This helped me identify all necessary key functionalities, screens and plan the app architecture. Key user journeys included: discovering items via map or list view, posting new finds, collecting items, and gallery for checking item history. This planning phase ensured every screen had a clear purpose tied to user needs identified in research.

User Flow Draft

User Flow Draft/App Structure

User Flow

Basic User Flow

Design Solutions

  1. Dual Navigation (map + list views)
  2. Pain point: Users had varying preferences for discovering items, some users prefer spatial exploration, others want quick scanning.

    Solution: Designed both map-based and list-based interfaces, allowing users to switch based on context and preference.

    Impact: Accommodates different user behaviours and contexts (casual browsing or targeted searching).

  3. Real-time status tracking
  4. Pain point: Uncertainty about item availability led to wasted trips and frustration.

    Solution: Implemented status tracking system that users can mark items as 'collected' or 'unavailable'.

    Impact: Reduces wasted trips and manages user expectations around availability.

  5. Streamlined posting flow
  6. Pain point: Sharing items needed to be effortless to encourage community participation.

    Solution: Minimised posting steps and required information, making contribution quick and simple.

    Impact: Encourages more users to share finds, building community engagement.

Sketching

With screen planning complete, I developed low-fidelity wireframes and prototypes to establish information architecture and navigation patterns.

Wireframe

Sketching & Wireframing

Style Guide

Style Guide

Branding

I approached branding as an iterative process rather than a fixed starting point. While designing high-fidelity screens in Figma, I gradually refined visual elements, colors, typography, icons, logo, it allows the brand identity to emerge from functional design needs.

Prototyping and high-fidelity design

High-fidelity Prototyping

In Figma, I developed high-fidelity prototypes with complete visual design, interactive states, and micro-interactions. While usability testing, users get in a clickable, interactive prototype, therefore users provided deeper insights and detailed feedback on usability and UX design.

03. Usability Testing

I wrote test script and prepared some task-based scenarios to let users to complete with using the high-fidelity prototype. During the process, I identified usability issues and pain points, validated some of my assumptions, then iterated on the design to improve user experience based on testing insights.

All sessions were conducted in person, allowing me to observe user behaviour closely and follow up on any hesitation or confusion in real-time.

Insights

  1. Users can't find any scenarios to view item history so the gallery feature didn't fully align with their needs.
  2. Posting was easy and effortless, showing the flow for sharing items worked well.
  3. Tracking partial item collection was confusing, especially when users only collected part of a set and needed to update the status.

Iteration

Removed gallery feature replaced by 'Favourite' screen to track item status.

Final Design

04. Learning and Next

Usability testing revealed two key insights: 1. difficulty tracking item status, and 2. challenges with partial item collection, I then updated the Favourite feature to help user save and track item status.

The partial collection challenge proved more complex as it would increase the user flow complexity, rather than assuming a solution, I plan to launch the MVP and collect feedback from real users and then conduct another round of usability testing. This approach ensures any design iteration is based on actual user behaviour and validated needs rather than assumptions.

I'm developing an MVP using React Native and Expo that focuses on core features identified in research. I learned to be comfortable sharing work early and iterating based on user feedback.

Favourite screen on mobile

Currently I'm working on developing favourite screen on React native Expo