Friends of the Children

Friends of the Children

Web app tool that bridges connection between children and their mentors

Web app tool that bridges connection between children and their mentors

TIMELINE

January - August 2023

TEAM

Sarah Chang

Angela Ling

Darlene Kabigting

Deya Raghavan

ROLE

Project Lead for UX Research, design development and prototyping

DISCIPLINE

Visual Design

UI & UX Design

Interaction Design

CONTEXT

Friends LA is a non-profit organization that breaks the cycle of generational poverty and supports families by providing full-time, salaried mentors (Friends) for 12+ years.

PROBLEM SPACE

Lack of easily accessible community resources & communication channels hinders effective engagement between program staff and mentors/caregivers

Lack of easily accessible community resources & communication channels hinders effective engagement between program staff and mentors/caregivers

They tend to struggle with the following:

They tend to struggle with the following:

Organization & Efficiency

Organization & Efficiency

They currently rely on mentorship staff to deliver survey deadlines, upcoming events, news, etc to caregivers via word-of-mouth, text, call, and/or email.

They currently rely on mentorship staff to deliver survey deadlines, upcoming events, news, etc to caregivers via word-of-mouth, text, call, and/or email.

Engagement with father figures

Engagement with father figures

They want to improve on championing father-hood through a family engagement portal. Their community partnerships and reources are located on the website, but they are not easy to find nor digestible.

They want to improve on championing father-hood through a family engagement portal. Their community partnerships and reources are located on the website, but they are not easy to find nor digestible.

THE QUESTION

How might we design a user-friendly and streamlined communication system to improve collaboration and information sharing between mentors, administrators, and caregivers, while ensuring ease of navigation and access to relevant resources?

How might we design a user-friendly and streamlined communication system to improve collaboration and information sharing between mentors, administrators, and caregivers, while ensuring ease of navigation and access to relevant resources?

PROPOSAL + GOALS

Before we kick-started the app development, the project leads hopped on several scoping calls with the organization to come up with a proposed solution for a mutual acknowledgement of the commitments, responsibilities, privacies, and communications of both parties in order to create the most successful project:

Before we kick-started the app development, the project leads hopped on several scoping calls with the organization to come up with a proposed solution for a mutual acknowledgement of the commitments, responsibilities, privacies, and communications of both parties in order to create the most successful project:

A web application that serves as an all encompassing, centralized resource bank for FOTC admin, mentors, and caregivers which includes modules with links and resources, calendar, and text/email system.

A web application that serves as an all encompassing, centralized resource bank for FOTC admin, mentors, and caregivers which includes modules with links and resources, calendar, and text/email system.

This website will further Friends of the Children-Los Angeles’s goal in aiding underserved youth such as those in foster care, supporting caregivers in their two-generation approach, and raising awareness for the mental health of youth! As such, we keep the following considerations in mind for the extent of this project:

This website will further Friends of the Children-Los Angeles’s goal in aiding underserved youth such as those in foster care, supporting caregivers in their two-generation approach, and raising awareness for the mental health of youth! As such, we keep the following considerations in mind for the extent of this project:

Accessibility and Ease-of-use

External side: website must be easily navigable for mentors and caregivers


Internal side: efficient management large amount of files from admin

Prioritizing usability and upkeep by FOTC after handoff.

FOTC has one person as an IT Manager, so designing a flexible and thoroughly debugged system is critical to ensuring the apps enduring usefulness

COMPETITIVE ANALYSIS

Based on the goals, we conducted an analysis of five competitors which offer services similar to that of FOTC’s desired module system: Blackboard, Google Classroom, Canvas, Notion, and Google Drive. We were then able to identify commonalities between them which suggested features we should incorporate in our own product, as well as things that stood out and that we’d like to avoid doing.

✏️ Teacher / Admin part

👩‍🎓 Student part

We noticed 4 prevalent feature details across the different apps:

1. Calendar feature links documents and users have the ability to add and edit event information.

2. Various types of files can be embedded and viewed.

3. Direct messaging = easier access and old messages can be accessed by scrolling

4. Nested modules are important to organize and navigate through a pile of files

USER INTERVIEW

What would the end-user want?

To truly understand what could be the underlying pain of users, we interviewed with 5 FOTC Members including admin (Program Director, Family Engagement Assistant), mentors, and caregivers.

For example, we asked the following questions:

  1. What is your current main platform for communication?


  2. Are there any problems with this current system?


  3. How could a message wall improve communication?


  4. How would you want resources to be displayed?


  5. What are the main problems currently faced when teaching?


  6. How do you organize events and provide mentors and caregivers with specific information?

Participants said:

MAIN INSiGHT

Manually sending and sharing resources is not the most reliable way of communicating and organizing.

USER PERSONA + USER FLOW

Based on the key insights from the user interview, we created a user flow and user persona to better understand their specific needs and solve through feature ideas.

TESTING + SETBACKS + IMPROVEMENTS

3 Major Improvements based on User Feedback

Before we finalized our hifi designs, we conducted usability testing interviews with 6 participants. After speaking with a few FOTC mentors, caregivers, and administrators, we were faced with an unforeseen challenge that had to be iterated multiple times.

FINAL SOLUTION

Make an Account

Make an Account

Sign up and log in as an admin, mentor, or caregiver based on the region

Upload and Organize Files

Upload and Organize Files

Browse dozens of resources. Click, upload, and customize.

Plan an Event

Plan an Event

Manage event details in one place and export to your own calendar to never forget!

Maintain Security & Privacy

Maintain Security & Privacy

Approve new users and delete unnecessary accounts to ensure only FOTC members sign up

Send messages in one go

Send messages in one go

Have all your messages and announcements compiled in one place instead of manually checking all the emails

Manage your youth with personalization

Manage your youth with personalization

Have all your youths organized in one page and easily access them

Style Guide

Reflecting Back…

Empowering my team

As a project lead, empowering the team to take ownership of their work was crucial. Delegating tasks and providing autonomy allowed team members to thrive, grow, and contribute their unique strengths to the project. Trusting them while fostering a culture of learning and support was key to productivity! I made sure to support my team by hosting fun dinners or socials to chill :)

Iterate, iterate, iterate!

Leading a web app project reinforced the idea that iteration is key to improvement. Regularly seeking feedback, conducting usability testing, and being willing to iterate led to a better product. Embracing a growth mindset and acknowledging that not every design will be perfect from the start helped me continuously refine and enhance the user experience.

Rename and Organize

It was important to work "smart" especially in a Figma file with multiple pages and frames. Maintaining an organized file with appropriate frame names and components was important to save time and make it easy for the developers. I wish I started organizing a lot earlier as it a huge chunk of our time during our work sessions, but now I know to be aware!

NEXT STEPS + CURRENTLY

As of August 2023, we are actively preparing for the launch of our web app, scheduled for late Summer - early Fall 2023.

Our development team is currently focused on refining the visual presentation, deploying, and finalizing the handoff to FOTC. Given additional time, our designers would have conducted extra interviews and usability tests to gather further feedback from actual users. Additionally, we would have dedicated time to enhance the overall cohesiveness of the website's interface across all screens.



... and a BIG shout out to my Friends of the Children team for being the cutest and most wholesome team ever with the sweetest worksessions and chatters, and for being patient with me throughout my first-ever huge leadership role (project lead) experience.  <3 

Thank you for visiting!

Want to work with me?

Made with countless yerbs 🤍

Thank you for visiting!

Want to work with me?

Made with countless yerbs 🤍

Thank you for visiting!

Want to work with me?

Made with countless yerbs 🤍