Foster Nation x H4I
My most rewarding project to date, this web application is a collaboration between Hack4Impact (a student organization that builds software for nonprofits for social good) and Foster Nation (a nonprofit dedicated to supporting young adults aging out of the foster care system).
Role
Product Designer
Tools
Figma, FigJam, HTML/CSS
Team
Emily (Product Manager)
Miranda (Product Designer)
Priyanka (Tech Lead)
Aishu, Anya, Jahnavi, John, Vivek (Developers)
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.
After collecting foster youths’ requests on One Simple Wish for approval, admin had to manually move requests to the Foster Nation holiday campaign site.
Admin need 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 need automated functions for providing updates to donors and foster youth.
02 The 4-Part Solution
So we created Kind Space, a centralized donation platform to grant wishes
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, or 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 branding (recently rebranded!) Understanding the tasks ahead, Miranda and I started on a basic design system, adding on and repurposing components as we progressed in our deliverables.
04 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.
Iterations
Most of the form’s design system components, such as the text fields and dropdowns, followed typical UI patterns. However, the stepper introduced opportunity for more variety, so I took some 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, but we wanted to make the process less tedious by saving contact, demographic, and foster youth status information. 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.
05 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.
As stated previously:
Admin Dashboard: For Foster Nation admin to oversee and control gift requests.
Admin can approve, deny, edit, or place orders on items.
A little more complicated than the form, I spent extra time understanding the flow of a gift request to design admin controls intuitively.
Understanding admin controls and the flow of gift requests
A gift requests begin 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
Admin must verify foster youth status before a Pending request can be approved
Admin will approve a gift request if it is appropriate, accurate, and under $500
An approved request will then populate on the Donor Dashboard
The request will become In progress once donated to, and admin will fulfill the request by placing an order for the item and providing tracking information
The wish is now granted!
06 Takeaways
A rewarding project for real impact with a fantastic team
This project has been handed off to Foster Nation, and we are now eagerly awaiting deployment!
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 from our developers (bonus: I coded the footer on the demo!)
Hack4Impact also made me realize how important it is 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!
Thanks for visiting, come again soon ★