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
THE QUESTION
PROPOSAL + GOALS
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:
What is your current main platform for communication?
Are there any problems with this current system?
How could a message wall improve communication?
How would you want resources to be displayed?
What are the main problems currently faced when teaching?
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
Sign up and log in as an admin, mentor, or caregiver based on the region
Browse dozens of resources. Click, upload, and customize.
Manage event details in one place and export to your own calendar to never forget!
Approve new users and delete unnecessary accounts to ensure only FOTC members sign up
Have all your messages and announcements compiled in one place instead of manually checking all the emails
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
