Kind Space is a web application that collects and facilitates gift requests made by foster youth.
My most rewarding project to date, Kind Space is a collaboration between Hack4Impact (a student organization that builds software for nonprofits) and Foster Nation (a nonprofit dedicated to supporting young adults aging out of the foster care system).
This project has been deployed and is now live! Check it out here.
Role
Product Designer
Tools
Figma, FigJam, GitHub, HTML/CSS
Team
PM: Emily
Design: Ariel, Miranda
Dev: Priyanka, Aishu, Anya, Jahnavi, John, Vivek
Timeline
September 2023 - December 2023
01 The Problem
Lots of gift requests that need to be manually processed…
Foster Nation recently hosted a holiday campaign in which they collected donations to fulfill foster youths’ gift requests.
The process was tedious and unsustainable for the large interest it garnered, especially since it spanned across multiple platforms.
Pain Point
Solution
After collecting foster youths’ requests on a third party platform, admin had to manually move requests to the Foster Nation holiday campaign site.
Admin needs a centralized platform for collecting requests, approving requests, and posting requests in an intuitive flow.
Donors and foster youth were unaware of the status of their donation / gift, as it was not viable that admin provide updates.
Admin needs automated functions for providing updates to donors and foster youth.
02 The 4-Part Solution
So we created Kind Space, a centralized donation platform
Gift Request Form
For foster youth fill out a form to make a gift request. The form collects contact and demographic information in addition to request specific information such as gift details and shipping address.
Donor Dashboard
For any donor to view approved gift requests and grant a wish. Donors can search, filter, and sort through requests.
Admin Dashboard
For Foster Nation admin to internally oversee and control gift requests. Admin can approve, deny, edit, and place orders on items.
Tracking Page
For foster youth to view the status of their gift request. Youth can view approval/denial messages and shipping tracking information.
03 Design System
Kicking off designs by aligning with Foster Nation's branding
To start off our designs, we were provided with Foster Nation’s (recently rebranded!) branding. Understanding the tasks ahead, Miranda and I started on a basic design system, adding on and repurposing components as we progressed in our deliverables.
04A Design Process - Gift Request Form
Gift requesting made quick, easy, and simple
I started with designing the form while Miranda took on the Donor Dashboard. My process began with understanding the form’s purpose and targeted user group.
As stated previously:
The form is for foster youth fill out a form to make a gift request.
The form collects contact and demographic information in addition to request specific information such as gift details and shipping address.
Stepper Iterations
Most of the form’s components follow typical UI patterns. However, the stepper introduced opportunity for more variety, so I took time experimenting with its look and layout.
A vertical orientation improved layout and readability by reducing horizontal width of form content.
Simplified colors increased clarity by eliminating the need to interpret multiple colors.
Mobile Adaptations
We considered that foster youth may be filling out this form on the go, so I also created mobile adaptations.
One-Time Passcode
Foster youth are able to make multiple gift requests, so we wanted to make the process less tedious by saving information that is not usually subject to change.
To access the form, foster youth will enter their email. If recognized, the youth will receive a one-time passcode to have their information pre-filled, skipping the form ahead to request details and shipping address.
04b Design breakdown - Admin Dashboard
One place to oversee and move along all gift requests
After completing the gift request form, I started on the admin dashboard while Miranda moved on to the Tracking Page.
First, I revisited my user and their goals:
User: Foster Nation Admin
Goals:
View gift requests
Approve requests
Deny requests
Edit information
Order gifts
Send messages to Foster Youth
The flow of gift requests
A gift request begins as Pending once a foster youth fills out the gift request form
From there, admin will Approve or Deny the request (a Denied request can move back to Pending if edited)
An Approved request will move to In progress once donated to
A request will become Fulfilled once admin places an order for the item
Establishing this flow allowed me to visualize the user flow and design admin controls intuitively (especially considering that Admin members might have varying technical experience and contextual knowledge).
Request Header
The clean layout with ample whitespace ensures that these critical controls remain visually distinct from the content below. The yellow background specifically helps distinguish this control area from the content sections below, creating visual hierarchy that guides the admin's attention and workflow.
1
Information at a glance:
The bolded text displays essential request identifiers (item name, date submitted, requester's name, and verification status) allowing admins to immediately know which request they're reviewing.
2
Status visibility:
The prominent status pill uses consistent color coding to instantly communicate where this request is in the workflow.
3
Contextual actions:
The right-side action buttons are positioned prominently but only appear when relevant to the current status, preventing workflow errors.
05 Takeaways
I <3 creating impact
This project has been handed off to Foster Nation and is now deployed!
I couldn't have asked for a more fulfilling semester than this one. I learned so much from my teammates, and I could feel my UI skills improving rapidly over the months. I even learned how to do a bit of coding (I built the footer on our demo site)!
Hack4Impact also made me realize how important it is for me to do meaningful work. Knowing that this product will help others immensely had me more motivated than ever, and it helped me practice more empathy as a designer.
Here's to more work like this in the future - this is truly what I love about design!
Thx for visiting, come again soon!