Embedded Files
Introduction
Introduction
For this project, I was working with a nonprofit called Foster Source, a nonprofit organization that provides support for foster children and foster parents. This includes trauma education, relief services, and therapeutic services. Their main goal is to give parents the confidence and skills to create safe spaces for vulnerable children.
In terms of the student team I was working in, there was a team lead, a designer (me), and five developers. The team lead did most of the communication with our main point of contact, Renee Bernhard, and I worked closely with them. My design period was about four months, where our team would meet once a week. Each meeting, I would be informed about the pages that needed to be designed and present my designs for critique. During this time, I had classes for the fall semester and was not paid, so I was a volunteer UX designer.
Understanding the User
Understanding the User
The User: Foster parents who are at least 21, have passed a background check, and have training
The Problem: Being a foster parent is often difficult because foster children can have traumatic or unique experiences. This creates a challenging space to navigate, and foster parents find themselves needing respite. However, finding another foster parent is not easy because they need to meet certain credentials to verify that they are suitable to provide foster care.
User Needs:
A hub of verified foster parents who can provide respite
A way to see availability and background information of foster parents
A clean, interface that is easy to navigate
A way to contact foster parents
A source of information for reference and indirect support
Establishing Product Features
Establishing Product Features
While the team lead and I met with Renee and two other foster parents to find out user needs, the team lead mostly spoke with Renee to determine product features. I was unable to attend these meetings due to scheduling conflicts.
The general idea was to structure the site like a professional dating app. On my end, I envisioned the app to combine aspects of Facebook and LinkedIn. In terms of user perspective, I was asked to design pages in the perspectives of foster parents (viewers and editors) and admin members. Some pages were exclusive to the admin members.
Features included:
Login page since foster parents would have their own accounts
Various account creation pages before and after verification
Account management pages for admin users to approve accounts or add account to a blacklist
Home page for announcements
Search page for foster parents to find each other
Profile page with availability and relevant information
Forum pages for foster parents to post questions and get answers from other foster parents
Email messaging page
Initial Design Work
Initial Design Work
Before I started designing the pages, I wanted to know if there were existing materials I needed to work with. Renee sent me some branding, and this determined that our web app would be called "Respite Source."
Taking a look at these logos, I decided to go with a sans-serif typeface, specifically Poppins, to create a clean, professional feel. I also wanted to the text to be easy to read, and I knew that using the more cursive-like typeface would hinder readability, especially for longer bodies of text.
Poppins Heading Example
Poppins paragraph text example
To determine my color palette, I went onto the Foster Source website, took some screenshots, and began extracting colors using the Figma eyedropper tool. Other than black and white, I found that the color palette mostly consisted of orange and purple.
First Mockups and Critique
First Mockups and Critique
Having my typeface, color palette, and branding, I made initial mockups for some of the pages. The reason why I didn't design all of the pages was because the scope of the project was not solidified at the time. In fact, it was mostly established after the second month of my design period. Therefore, I felt that if there were some major changes I needed to make to all of the pages, the process would be less tedious if I started with just a few of them.
Summarized Feedback
The styling looked clean, but elements would be giant if they were translated to a desktop screen
For error prevention and consistent data formatting on the backend, the availability selection page should not rely on user input (typed responses)
I generally needed to design a bunch more pages and include more information, especially for the profile page and account creation
Initial search page with giant cards
Initial availability selection page
Initial profile page as an outside viewer
Initial profile page as the profile owner
The Final Mockup
The Final Mockup
As the weeks passed, the project scope gradually increased to the list shown previously in the product features, and I designed more pages. The critiques were typically small and then resolved by the next meeting. Looking back, I am glad I started with only a few pages because resizing elements and fitting more information onto a page was already quite tedious in itself. If I had to do that for 20 plus pages (the amount I ended up with) up front, it would be a very challenging and arduous process. After resizing the elements and getting them approved, it was easy to reuse them for different pages.
Login and Account Creation
For tighter security and validation, foster parents who want to create an account must fill out general contact information and be approved by an admin member (Foster Source staff). After they are approved, they can finish account creation and be a member of the app.
The login page was made to appear clean and professional with the required branding.
The interface for account creation
New users need to verify their email address. This is what users see after they have filled out general contact information and received a verification email.
After being approved, users can finish creating their account.
The new availability selection page no longer relies on typed user input.
Admin Account Approval and Blacklisting
Admin users have access to the "Manage Accounts" tab, where they can approve or deny newly created accounts. If an account is denied, the admin user can put the account on a blacklist.
The interface for account approval
Interface for when an account gets denied
The blacklist interface, which includes an option to take an account off the blacklist
The Home Page
This is where users can see general information and announcements. Admin members have the option to edit announcements, but all users see the same general layout.
The main layout that everyone sees. Admin users can see the editing symbol in the upper right corner of the announcements.
What admin users see when they decide to edit the announcements
The Search Page
The search page is where users find other foster parents. By selecting a profile card, users can view the profile of another foster parent.
The main search page that displays user profile cards
Users can choose to filter the displayed profiles to find a foster parent who fits their needs.
The Profile Page
Once users select a foster parent on the search page, they can view the profile of the foster parent. Users also have a profile page of their own, which they can edit in the profile tab at the top of the page.
A publicly viewed profile page with closed information dropdowns
The public profile that everyone can see with opened information dropdowns
The interface of a user's own account. They can edit their information.
The Forum
The forum is a place where users can post questions or experiences and receive responses. This is for foster parents to find support without needing direct help. Users can search for posts by keyword.
Posts are listed chronologically, with the most recent one at the top.
After selecting a post, users can make comments and reply to comments.
Messaging Other Foster Parents
Users can choose to email foster parents directly within the web app. This is useful for when profiles have been reviewed and foster parents want to contact each other.
The main email interface where users can compose and reply to emails
The interface when users are editing a reply
The interface when a user is composing an email
Final Thoughts
Final Thoughts
During and after my design period, the rest of my team built a beta prototype of the web app using Angular. I was happy that my designs influenced their choices. If I were to do this project again, I would definitely try to choose a color scheme with higher contrast for accessibility and improved readability. After we presented the final product, the Foster Source team expressed their appreciation for our work, and they gave each of us a baton of gratitude. We were told that this project made a significant difference in the foster community. When I think about my contributions, I am glad that my design skills were used for social good. I was proud of myself for taking on a large scope and being able to create visually pleasing interfaces, especially with a color combination of purple and orange.
The Full Mockup File
The Full Mockup File
Page updated
Google Sites
Report abuse