Kind Space - Foster Nation
Hack4Impact UIUC Spring 2024
Tools Used: Figma, T3 Tech Stack, GitHub
Duration: 14 weeks
Team:
Project Manager: Emily
Tech Lead: Priyanka
Product Designer: Miranda, Ariel
Software Developers: John, Jhanavi, Anya, Vivek, Aishu
Overview
Kind Space is a donation platform created to allowed donors fulfill gift requests for foster youth. Foster Nation is an LA-based nonprofit organization dedicated to supporting young adults aging out of the foster care system. This project was a client project between Hack4Impact and Foster Nation.
What I Built
There are two main user flows. The first one being the foster youth that are trying to complete a request. The second being admins who are managing the requests that are getting posted onto the platform.
As a designer on this project, my role was to communicate with the product manager and the client to seamlessly transform their product requirements into a product. Since there are two designers on this project, I designed the mobile and web donor dashboard and the gift request tracking page. Besides designing those pages, I worked with Ariel to create a design system to use throughout the whole product.
The Problem
Currently, foster youth reach out to Foster Nation via One Simple Wish, asking for a specific holiday gift. This request is then processed and added to the gift campaign site. Gift requests have to be manually uploaded by Foster Nation admin for donors to view. Donors and foster youth are largely kept in the dark regarding the status of their donation or gift request.
The Solution
Introducing Kind Space, a donation portals made for foster youth and donors, so that gift requests can be created and fulfilled on a single platform.
Branding
User Flow
The goal for the request form is for foster youth to submit their contact information, demographic information, their verification of being in foster care, and most importantly: to submit their gift request. Step by step form for foster youth to make a gift request. Interactive stepper to allow users to toggle through different steps.
Contact Information: Foster youth do not create accounts to access their requests. Instead, an authentication code is sent to their email address as an OTAC.
Final Design
Request Form
At the top there is a navigation bar where users can learn more about Kind Space and Foster Nation, as well as track the status of their request and donate to a general fund.
The dashboard shows cards with specific gift requests made by foster youth. As well as filters and search for the donors.
Initial Sketches
Donor Dashboard - Design Iterations
Cards that display gift requests made by foster youth. The final card design allows donors to see a gift request at a glance. Displaying the foster youth who made the request, as well as an overview of the request.
Tags allow donors to know what category a gift request falls under. Allowing donors to know needs they are fulfilling.
Moving on from tags, another important part of the design phase was the copywriting used and the language. One small detail that I changed was the wording of the action button. From "Fulfill", to Donate", to "Grant This Wish". Although it is just a small minor detail of the card design, the language sets the tone of the platform.
Donor Dashboard
Final Design
Close up of the form stepper to allow users to toggle through the different steps.
The donor dashboard is a place for donors to grant a a wish for a specific foster youth gift request. The donor dashboard also acts as the Kind Space Landing page, where donors can browse through and view foster youth gift requests. Donors can also donate to the non profit without fulfilling a specific gift request. The dashboard offers an "About Us" section as well as a page where foster youths can track the status of their gift request. Lastly, the page also allows foster youth to create a donation request as well.
Final Design
After discussion with our client, we decided that "Grant This Wish" would be the most appropriate for the Kind Space platform.
Donor Dashboard - Mobile Adaptions
Instead of the filters being separate tags. I combined all the filtering into one big pop up.
Status changes as the gift request moves through the donation process.
The icons and copy were changed and went through iterations throughout the design process.
Last major design choice that was added after the PRD was a search bar. Initially, we were not planning on implementing a search bar. However, upon further discussion with the client, we realized that certain donors have specific foster youth that they mentor, and would want to search for their requests to fulfill.
Design iterations were created for mobile adaptions. Main changes made for mobile adaptions were the card views - the mobile cards are now interactive and opens a pop up once interacted with.
Tracking Page
Each request becomes a pop up, the tags and requests are also visible through the pop up!
Foster youth can track the status of their gift request here. As well as messages made by admins.
Changes to shipping information + gift request can be made here as well.
The main goal for this page is for foster youth to see the status of their request, as well as contact admin if there are any changes in their request. This page also allows capabilities for the foster youth to edit their request as well as their shipping information.
A design that I added on at towards the later end of the process was a messaging feature within the tracking page.
This allows foster youth to be able to make changes to their request if there are changes needed. This feature also allows admin to contact the youth if there are any changes needed as well.
Overview
I loved working on this project because I have always wanted to be more involved in the foster system, and this project was something that I was really drawn to. The mission of Foster Nation is something that I was really drawn to, and on top of that, the branding and overall brand identity was also something I loved working and designing with. I loved working with my team and the client as well, I learned so much about working with another designer and creating cohesive designs together. Overall, really proud of this project and what we built.