Transforming LITA’s Digital Identity
How My UX and Web Development Skills Transformed a Non-Profit’s Website
Role: UX Researcher/Designer | Web Developer | SEO/CRO Strategist
Tools: Figma, WordPress, Google Suite, Zoom, SEMRUSH
Duration: July 2024 - October 2024
The Challenge
LITA’s website was difficult to navigate, lacked emotional connection, and didn’t clearly represent its mission. This made it challenging to engage volunteers and donors, limiting the organization's growth and overall impact.
The Solution
Collaborating with another developer, I conducted 30 user interviews to lead the UX research and development of a fully responsive, user-centered website. By leveraging these insights, we improved navigation, increased volunteer engagement, attracted more donations, and significantly boosted the organization's online visibility through effective SEO strategies.
Results & Impact
Volunteer Engagement
Optimization
Streamlined the volunteer sign-up process, enhancing accessibility and paving the way for increased volunteer participation.
Simplified Donation
Process
Developed a seamless donation experience, designed to encourage higher contributions and foster stronger donor relationships.
Community Connection
Enhancement
Revamped site structure and content fostered deeper community interaction, building a more engaged and supportive environment.
Hear From my Partner
"Working with Ponce on the LITA project was an incredible experience. As the Lead UX Researcher, Ponce’s ability to extract meaningful insights from user interviews and translate them into actionable design decisions was impressive. His dedication to ensuring the website reflected user needs while aligning with the non-profit’s mission was key to our success. Ponce’s leadership and technical skills were instrumental in creating a fully functional, user-centered website that is set up for growth and impact."
- Myles L. @ UI Designer and Co-developer at LITA
Hear From the Owner
"Our LITA of Contra Costa website was homey but so confusing.
Then, Ponce and Myles stepped in to do an amazing overhaul and brought us into modern times with comprehensive tools for what best makes a website work. We are grateful for all the help we are receiving for this 44 year old non-profit, whose mission is to alleviate loneliness and improve quality of life for disabled seniors in Contra Costa Nursing Care facilities with innovative volunteer programs including music, gardening and pet visits."
- Victoria Ryan. @ CEO at LITA of Contra Costa
Scroll down to dive deeper into the process
Process Overview
How the Website Looked Before
Homepage
Volunteer Page
Donate Page
Contact Page
Research & Insights
Research Objective
The goal of the research phase was to uncover user pain points, motivations, and essential design elements that would enhance the NPS website’s usability, accessibility, and emotional engagement for a diverse audience.
User Interviews
As the Lead UX Researcher, I conducted 30 in-depth user interviews with volunteers, donors, and community members. These interviews were crucial in gathering insights into what users expected and needed from the LITA website.
Key Findings
- Volunteers like Penelope highly value transparency and a clear mission when deciding to support a non-profit. They want to see detailed financials and know exactly where their contributions are going.
- Ease of navigation was critical for volunteers and donors who sought a user-friendly, seamless experience. Penelope, as an older user, emphasized the importance of clear, readable content and a simple layout to avoid frustration.
- Emotional connection was essential. Users wanted to feel connected to the cause and inspired by the stories of those benefiting from the non-profit’s work.
- Mobile accessibility was vital, as many users accessed the site through mobile devices, requiring responsive design and ease of use on smaller screens.
How These Insights Guided Design
- Simplified Navigation: I focused on ensuring that the website had a clean, straightforward layout, making it easy for users to find important information about LITA’s mission, programs, and financial transparency.
- Engaging Storytelling: We incorporated personal stories and impactful imagery to forge an emotional connection, encouraging visitors to feel more engaged and likely to volunteer or donate.
- Responsive Design: I ensured that the website was fully responsive across all devices, meeting the needs of mobile users like Penelope who value both convenience and accessibility.
- Clear Calls-to-Action: We integrated prominent buttons and forms throughout the site, making it easy for users to take action, whether they wanted to donate, volunteer, or learn more about LITA’s programs.
Charts, Graphs, and Observations
Turning Data into Personas & Journeys
After completing my user research, the design team leveraged the insights I gathered to develop comprehensive personas, empathy maps, and user journey maps. These tools were essential in visualizing and understanding the core needs, behaviors, and emotional states of LITA’s target audience, including potential volunteers and donors like Penelope Forte.
Penelope - User Persona
The personas were built using the qualitative data I collected during the 30 user interviews. For example, Penelope Forte represented a typical volunteer: someone motivated by a strong desire to give back, but who needed transparency and ease of use when engaging with non-profits. These personas helped the design team stay aligned with real user needs throughout the design process.
Empathy Map
Empathy maps were created to capture what users like Penelope see, hear, feel, and think during their interactions with LITA’s digital presence. By highlighting their emotional journeys, these maps enabled the design team to focus on empathy-driven solutions that resonated with the audience’s values and pain points.
User Journey Map
Based on the data I provided, the team developed detailed user journey maps to visualize the steps users take when interacting with the website, from discovering LITA’s mission to deciding to volunteer or donate. These maps were instrumental in designing a streamlined experience, guiding users toward key actions such as signing up to volunteer or donating without friction.
Turning Insights into Statements
User Insight Statement
Users like Penelope often struggle to find non-profits with transparent operations and clearly communicated missions. Without this clarity, they feel hesitant to commit their time or resources to the cause.
How Might We?
How might we design a website that clearly communicates LITA’s mission, impact, and opportunities, making it easier for potential volunteers like Penelope to confidently engage with the organization?
User Impact Statement
Potential volunteers and donors, like Penelope, are more likely to engage with LITA when they can easily understand its mission and feel confident about the transparency of its operations, leading to increased community involvement and support.
Building a Consistent Visual Identity
Color Palette
I collaborated with the team to select a warm, inviting color palette that reflected LITA’s mission of fostering community connections. The chosen colors helped create an atmosphere of trust and welcome, ensuring that users feel engaged and comfortable as they navigate the site.
Typography
Working closely with the design team, I helped choose friendly, legible fonts that struck the right balance between professionalism and approachability. This choice enhanced readability and aligned with LITA’s inclusive and community-focused values.
Imagery and Graphics
I played a key role in incorporating impactful imagery and custom graphics that highlighted LITA’s work in the community. These visuals were carefully chosen to tell the organization’s story, showcasing the positive effects of volunteerism and creating a deeper connection with users.
Website Mockups & Iteration Process
From the insights gathered through user research, I learned that volunteers and donors, like Penelope, prioritized ease of access to volunteer opportunities and transparent donation information. They wanted clear paths to take action without feeling overwhelmed by too many steps or excessive content. To address these needs, I collaborated on the design of early mockups, focusing on clear, simple layouts that provided intuitive navigation and accessible sections for volunteering and donations. Throughout the iteration process, I ensured the design featured strategically placed calls-to-action (CTAs) that guided users seamlessly through the site, building trust and reducing barriers to engagement.
Lo-fi Mockups (Mobile)
Hi-Fi Mockups (Mobile)
Lo-fi Mockups (Desktop)
Hi-Fi Mockups (Desktop)
Website Development
During the website development phase, I collaborated closely with Myles (co-developer) to bring our high-fidelity designs to life. As we translated the mockups into a fully functional website, we quickly realized that our original design wasn’t optimized to drive volunteer sign-ups and donations as effectively as we had hoped.
Reevaluating the Design for Optimization
After careful review, we recognized the need to streamline the user experience even further, making the journey from landing on the site to taking action—whether volunteering or donating—completely seamless and frictionless. To achieve this, we reworked key elements, including the branding, color palette, and overall visual identity.
On-Page SEO Implementation
As part of the development process, I implemented a thorough on-page SEO strategy to boost the website’s visibility and relevance on search engines like Google. This was essential in increasing organic traffic, volunteer sign-ups, and donations.
Timeline: April 2024 - August 2024
Meta Titles and Descriptions
Content Relevancy for Local SEO
Indexing and Search Visibility
Optimized for Search and Usability
What I Learned
This project was more than just a professional task—it was a chance to collaborate with both the UX team and Myles in creating something meaningful.
Leading the UX research, I made sure our insights shaped the design, and during development, I worked closely with Myles to bring the non-profit’s mission to life. This experience taught me the value of teamwork and building connections in my work.
The true success of this project wasn’t just measured by traffic growth or increased client leads, but by the positive impact it had on John’s life and his business. Knowing that my work contributed to his dream of expanding the academy’s reach and helping more people was incredibly rewarding. It reinforced my belief that design can be a powerful tool—not only for solving business challenges but for building relationships and making a genuine difference in people's lives.
The Impact I Made
1. Delivered a fully responsive, user-friendly website that increased volunteer sign-ups and donations.
2. Collaborated with the UX team to ensure research-driven design informed every decision, improving the user experience and engagement.
3. Optimized on-page SEO, boosting the website’s local visibility in search results.
4. Streamlined the donation process, making it frictionless and more intuitive.
5. Collaborated on rebranding and redesigning the visual identity to align with the non-profit’s mission.
6. Helped create a digital platform that fosters long-term community interaction and support.