Optimizing content and discovery for Voices for Children
Optimizing content and discovery for Voices for Children
MY ROLE(S)
MY ROLE(S)
Lead Product Designer, Content Designer
Lead Product Designer, Content Designer
TEAM
TEAM
5 Designers
TIMELINE
TIMELINE
16 Weeks (January > May 2024)
16 Weeks (January > May 2024)
TOOLS
TOOLS
Figma, Figjam, Miro, Zoom
Figma, Figjam, Miro, Zoom
PROJECT OVERVIEW
PROJECT OVERVIEW
Voices For Children (VFC) is a non-profit based in SD & Riverside that matches foster youth with volunteers. VFC’s website plays a huge role in raising funds, recruiting and retaining volunteers, and raising community awareness of VFC and the needs of children in foster care.
Voices For Children (VFC) is a non-profit based in SD & Riverside that matches foster youth with volunteers. VFC’s website plays a huge role in raising funds, recruiting and retaining volunteers, and raising community awareness of VFC and the needs of children in foster care.
Through Design For America, I had the opportunity to work with VFC and identify key usability and content issues in the original website and present my team and I’s design proposal to VFC’s marketing and communications team.
Through Design For America, I had the opportunity to work with VFC and identify key usability and content issues in the original website and present my team and I’s design proposal to VFC’s marketing and communications team.
1/ UNDERSTANDING THE PROBLEM
1/ UNDERSTANDING THE PROBLEM
PROBLEM DISCOVERY
PROBLEM DISCOVERY
Unclear navigation, overwhelming content, redundant CTAs, disrupt user engagement and content discovery
Unclear navigation, overwhelming content, redundant CTAs, disrupt user engagement and content discovery
VFC’s navigation is unclear, and high-traffic pages are cluttered with dense content, hiding important information. Ineffective CTAs with inconsistent microcopy further disrupt the user experience, creating confusion and disconnection.
VFC’s navigation is unclear, and high-traffic pages are cluttered with dense content, hiding important information. Ineffective CTAs with inconsistent microcopy further disrupt the user experience, creating confusion and disconnection.
I CONDUCTED A PRELIMINARY WEB AUDIT
I CONDUCTED A PRELIMINARY WEB AUDIT
USER RESEARCH
USER RESEARCH
We talked to 5 VFC advocates and 9 other users to observe usability pain points and trends
We talked to 5 VFC advocates and 9 other users to observe usability pain points and trends
Since this project was done during the school quarter with a restricted timeline, my teammates and I wanted to hone in on the most important pages and usability improvements. We were able to narrow down the scope through client interviews and 14 user interviews.
I took on the responsibility of creating the research resources including the interview and usability task questions.
Since this project was done during the school quarter with a restricted timeline, my teammates and I wanted to hone in on the most important pages and usability improvements. We were able to narrow down the scope through client interviews and 14 user interviews.
I took on the responsibility of creating the research resources including the interview and usability task questions.
2/ DESIGN RECCOMENDATIONS
2/ DESIGN RECCOMENDATIONS
DELIVERABLES
DELIVERABLES
How might we give potential volunteers and donors in Voices for Children an intuitive, seamless experience?
How might we give potential volunteers and donors in Voices for Children an intuitive, seamless experience?
Redesigned Header
The header should prioritize key actions and streamline content organization by relevance. Important CTAs, like ‘Volunteer’ and ‘Donate,’ need to stand out for quick access.
Redesigned Header
The header should prioritize key actions and streamline content organization by relevance. Important CTAs, like ‘Volunteer’ and ‘Donate,’ need to stand out for quick access.
Redesigned Volunteer and Donate Pages
Reorganize high-traffic pages to emphasize key content, allowing potential donors & volunteers to quickly grasp essential information and clearly identify actionable steps.
Redesigned Volunteer and Donate Pages
Reorganize high-traffic pages to emphasize key content, allowing potential donors & volunteers to quickly grasp essential information and clearly identify actionable steps.
PRIORITZING CONTENT
PRIORITZING CONTENT
Current Site Map
Current Site Map
The original website's navigation bar functioned as a sandwich menu, even on desktop devices, which introduced unnecessary friction. With nine sections, many links were redundant, directing users to the same page despite different labels. Additionally, the 'Volunteer' and 'Donate' links blended in with the rest, diminishing their visibility and importance.
The original website's navigation bar functioned as a sandwich menu, even on desktop devices, which introduced unnecessary friction. With nine sections, many links were redundant, directing users to the same page despite different labels. Additionally, the 'Volunteer' and 'Donate' links blended in with the rest, diminishing their visibility and importance.
Proposed Site Map
Proposed Site Map
My redesign eliminates the desktop sandwich menu, improving access to vital pages. Navigation is narrowed down to 4 drop-downs and 2 CTA buttons. The organized dropdown navigation facilitates easier discovery, allowing users to quickly find information and take meaningful actions. Microcopy is also improved.
My redesign eliminates the desktop sandwich menu, improving access to vital pages. Navigation is narrowed down to 4 drop-downs and 2 CTA buttons. The organized dropdown navigation facilitates easier discovery, allowing users to quickly find information and take meaningful actions. Microcopy is also improved.
HEADER REDESIGN
HEADER REDESIGN
4 relevant drop downs and emphasis on ‘Volunteer’ and ‘Donate’ call-to-action buttons
4 relevant drop downs and emphasis on ‘Volunteer’ and ‘Donate’ call-to-action buttons
Utilizing the proposed site map, I got rid of the sandwich menu on desktop, and was able to categorize pages into 4 most important navigation categories to optimize user journey:
Who We Are: establishes identity and builds trust
Take Action: encourages user engagement and prompts immediate involvement
News & Events: keeps users informed about activities and updates
Learn More: invites exploration and additional information/resources
Utilizing the proposed site map, I got rid of the sandwich menu on desktop, and was able to categorize pages into 4 most important navigation categories to optimize user journey:
Who We Are: establishes identity and builds trust
Take Action: encourages user engagement and prompts immediate involvement
News & Events: keeps users informed about activities and updates
Learn More: invites exploration and additional information/resources
Placing CTA buttons in the global navigation encourages immediate engagement and improves accessibility across every page, boosting conversion rates and driving key actions like increasing volunteers or donations.
Placing CTA buttons in the global navigation encourages immediate engagement and improves accessibility across every page, boosting conversion rates and driving key actions like increasing volunteers or donations.
ORIGINAL
ORIGINAL
REDESIGN
REDESIGN
PAGE COMPONENT REDESIGNS
PAGE COMPONENT REDESIGNS
Hero redesign and fresh copy
Hero redesign and fresh copy
The hero section required reorganization for better clarity and persuasion. I designed new hero layouts and created new copy for the volunteer and donate pages to guide users effectively.
The hero section required reorganization for better clarity and persuasion. I designed new hero layouts and created new copy for the volunteer and donate pages to guide users effectively.
Persuasive and actionable headline
Reduced Copy
Obvious CTA: Become a volunteer immediately
ORIGINAL HEADLINE
“What is a CASA?”
“CASA” may be unfamiliar to first-time users
Not action-oriented, fails to address user motivation and encourage engagement
Not optimized for search engines due to lack of keywords
“CASA” may be unfamiliar to first-time users
Not action-oriented, fails to address user motivation and encourage engagement
Not optimized for search engines due to lack of keywords
SUGGESTED HEADLINE
“Advocate For a Child in Foster Care”
Easy to understand; no acronyms
Clear action (“advocate”) that aligns with user motivation and encourages engagement
Contains relevant and discoverable keywords (“advocate,” “foster care,” “child”)
Emotionally appealing
Easy to understand; no acronyms
Clear action (“advocate”) that aligns with user motivation and encourages engagement
Contains relevant and discoverable keywords (“advocate,” “foster care,” “child”)
Emotionally appealing
Contact card modules that stand out
Contact card modules that stand out
Contact information was getting buried and overlooked.. After multiple iterations, my teammate and I landed on new left-aligned contact modules with more obvious information structure.
Contact information was getting buried and overlooked.. After multiple iterations, my teammate and I landed on new left-aligned contact modules with more obvious information structure.
ORIGINAL
Inconsistent design of contact section
Emails are hidden in hyperlinks that seem non-clickable, leading users to miss info
REDESIGN
Contact options use font color and underlines to signal they're clickable
Key info is bolded and enlarged for clarity and visual hierarchy
Icons offer quick cues for phone or email contact
VOLUNTEER AND DONATE PAGE SPOTLIGHTS
VOLUNTEER AND DONATE PAGE SPOTLIGHTS
Carousel: steps to become a volunteer
Carousel: steps to become a volunteer
The steps to becoming a volunteer section is text heavy and it's due to the amount of important information that needs to be shared. During usability tasks, a lot of users struggle with reading through the page. To ease user journey, I designed a carousel that presents each step in a more digestible and engaging manner.
The steps to becoming a volunteer section is text heavy and it's due to the amount of important information that needs to be shared. During usability tasks, a lot of users struggle with reading through the page. To ease user journey, I designed a carousel that presents each step in a more digestible and engaging manner.
ORIGINAL
REDESIGN
UXR: Users thought this flow made information more digestible
Sequential flow of slideshow guides users step by step one at a time (reduces cognitive load)
Images and text hierarchy capture attention
Accordion: FAQ
Accordion: FAQ
Key information for prospective volunteers was hidden in an external link that was easy to overlook. I proposed integrating an accordion to display frequently asked questions directly on the page. This solution aligned with users' familiarity with FAQ accordions, making it an intuitive and user-friendly improvement.
Key information for prospective volunteers was hidden in an external link that was easy to overlook. I proposed integrating an accordion to display frequently asked questions directly on the page. This solution aligned with users' familiarity with FAQ accordions, making it an intuitive and user-friendly improvement.
ORIGINAL
The FAQ was buried on a separate page, hidden behind a tiny hyperlink
UXR: Interviews with CASAs revealed a need for a more obvious FAQ on volunteer page, to set expectations for prospective volunteers
REDESIGN
In-page FAQ that also includes a link to a longer FAQ
Accordions simplify and reduce information clutter
Giving users options: a scannable ‘Other Ways to Give’ section
Giving users options: a scannable ‘Other Ways to Give’ section
To emphasize the 'Other Ways to Give' section, we improved accessibility by making sure colors passed WCAG 2.0 standards and recommending a list format with enhanced text hierarchy, making the content easier to scan.
To emphasize the 'Other Ways to Give' section, we improved accessibility by making sure colors passed WCAG 2.0 standards and recommending a list format with enhanced text hierarchy, making the content easier to scan.
ORIGINAL
Title colors blend with background, reducing visibility and accessibility
Section is positioned too low on the page and is often overlooked by users
Key information hidden in drop downs and hard to locate
REDESIGN
UXR: 6 out of 7 users preferred a list format instead of boxes since it allows for easy scanability
Corresponding icons to instantly draw attention
Clear information hierarchy with brief descriptions
3/ WHAT'S NEXT?
3/ WHAT'S NEXT?
Design and documentation handed-off!
Design and documentation handed-off!
We handed off our designs and justifications to Suzy, Luisa, and Olivia (representatives from VFC’s marketing team), accompanied by detailed documentation. Although I'm no longer working with Design for America and Voices for Children, I would evaluate the redesign’s success by the following metrics:
- Collecting quantitative data on user usability and navigation
- Review click-through rates and page visits, to monitor user interaction and engagement
We handed off our designs and justifications to Suzy, Luisa, and Olivia (representatives from VFC’s marketing team), accompanied by detailed documentation. Although I'm no longer working with Design for America and Voices for Children, I would evaluate the redesign’s success by the following metrics:
- Collecting quantitative data on user usability and navigation
- Review click-through rates and page visits, to monitor user interaction and engagement
MORE WORKS
Refreshing brand & website for a local animal foster/adoption
Streamlining the timekeeping experience for UCSD employees