01
Add items
Select multiple donation categories in one session.
RESPONSIVE UX/UI CASE STUDY · 2026
GiveKind
A simpler way to turn items you have
into help youth can use.
GiveKind helps donors list several items, find nearby youth organizations that can accept them, and complete one clear drop-off plan.
- PROJECT TYPE
- Youth donation concept
- ROLE
- UX/UI Designer · Solo
- TOOLS
- Figma · FigJam
- SCOPE
- Mobile-first · responsive web
- TIMELINE
- Sep–Oct 2026
OVERVIEW
Designed to make
giving feel doable.
The experience turns a pile of donation decisions into a short, guided flow with clear local matches and one consolidated next step.
IdeationUX StrategyUI DesignResponsive
CORE EXPERIENCE
Items to impact
02
Match locally
See nearby youth charities that fit what you have.
03
Plan once
Choose a drop-off and keep the next step clear.
01
The Challenge
The concept addresses a practical donation challenge: finding a nearby organization that can accept several different items without turning one drop-off into multiple errands.
01
The problem
Acceptance details can be difficult to compare when donors have multiple types of items to give.
02
The opportunity
Build an item-first journey that narrows local options before asking someone to choose a drop-off.
DESIGN HYPOTHESIS
Matching a mixed set of items is the decision the experience needs to simplify.
I started with what donors have, not a directory of organizations, so each match can answer a useful question.
02
One donation, one plan.
I arranged the journey around four decisions, from describing items to saving the final plan. Each step leads to one clear next action.
01
Describe items
Choose a category and add multiple items.
02
See matches
See nearby organizations and what they accept.
03
Plan a drop-off
Review location details and directions.
04
Save your plan
Return to saved and completed donations.
AFTER DROP-OFF · CONFIRMATION & IMPACT
03
Mobile first, task first.
I kept matching, directions, and saved details easy to scan on smaller screens, where each step needs a clear primary action.
KEY MOBILE SCREENS
These screens show local matches, directions, and saved donations. The walkthrough below connects the steps and their navigation states.
04
Same task, more breathing room.
I used the desktop grid to show donation categories and drop-off information with less scrolling, while keeping the same labels and main actions as mobile.
On desktop, I grouped destination information, accepted items, and directions so the next step stays clear without extra navigation.
05
Friendly, clear, and calm.
I used color to signal purpose: pink supports GiveKind's identity and donation moments, while blue helps users locate the next step.
COLOR SYSTEM
GiveKind Pink
Brand + donation emphasis
Primary Blue
Find-a-drop-off actions
Soft Blue
Context + wayfinding
Warm Neutral
Cards + reading surfaces
01
Consistent actions
A shared 16 px radius and consistent button styles help primary and secondary actions read predictably.
02
Reusable cards
Repeated card layouts help people compare organizations and revisit donation details without relearning the interface.
03
Selective color
Pink adds warmth; blue guides location-related decisions; neutral surfaces keep longer content readable.
06
Clarity is part of the system.
I reviewed the prototype for hierarchy, selected states, tap spacing, and readable text. Usability testing and formal contrast checks are still needed.
01
Readable contrast
I prioritized dark text on light surfaces and clear action labels. Contrast values still need to be verified.
02
Clear states
Active navigation, selected categories, and donation status use more than a color change alone.
03
Comfortable targets
Controls have visible labels, generous padding, and enough separation to reduce accidental taps.
ACCESSIBILITY DECISION
Reduce visual noise before adding more explanation.
I simplified grouping and reduced competing accents before adding more instructions. This is a design review, not a completed accessibility audit.
07
The finished experience.
The final mockups connect item entry, drop-off planning, and saved history across mobile and desktop. Each view preserves a clear next action.
MOBILE · ITEM DETAILS, DIRECTIONS & SAVED
The same card structure ties together item entry, drop-off directions, and saved history, making each next step feel familiar.
DESKTOP · ITEM DETAILS
MOBILE HOME · CATEGORY DISCOVERY
08
What I learned.
Designing for more than one device meant preserving the donor's next decision, not reproducing identical layouts at every width.
01
Start with the real task
Starting with donated items gave the matching journey a clear purpose and kept the first decision manageable.
02
What I would validate next
I'd test the multi-item flow with donors and verify that organization acceptance rules are accurate before launch.
03
Responsive means reprioritize
Wider layouts made room for more context, but the primary next action still needed to remain obvious.
FINAL TAKEAWAY
Make donating feel like one clear decision, not a chain of small obstacles.
GiveKind is a concept prototype. The next step is testing whether donors can complete the journey and trust the matches they see.
GiveKind
Youth donation matching · responsive UX/UI · 2026
