
Project LITA: Bridging Hearts Through Design
A website redesign to strengthen community and care.
Aug 2024 - Oct 2024
Team size - 4
My Role - User Researcher, UI Designer
Project Overview
LITA of Contra Costa (Love Is The Answer) is a nonprofit that combats loneliness among seniors and long-term care residents through volunteer visits and community programs.
Our team partnered with LITA to redesign their website as part of a UX/UI bootcamp project. The goal was to improve the user experience, strengthen the organisation’s digital presence, and increase community engagement through volunteerism and donations.
Roles & Responsibilities
Conducted stakeholder interviews to define project goals
Performed competitor analysis to identify industry patterns and opportunities
Created user journey map to visualize user experience
Developed sitemap and user flow diagram to structure key interactions
Sketched early concepts and created paper prototypes for initial testing
Designed high-fidelity clickable prototype for desktop and mobile
Integrated A/B testing for the success confirmation page and implemented the version with the highest user satisfaction.
Ensured accessibility and responsiveness across devices
Collaborated closely with UX researcher and visual designer throughout the process
As one of the UX/UI designers on a four-person team, I contributed throughout the design process and worked closely with the UX researcher and visual designer. My key responsibilities included:
Problem Statement
LITA’s original website suffered from low traffic, unclear navigation, and outdated design, which contributed to reduced volunteer sign-ups and donations. The lack of mobile responsiveness and modern UI made it difficult for users to engage with the site.
The redesign was initiated to address these core issues by improving usability, accessibility, and clarity of information, making it easier for users to understand LITA’s mission and get involved.
Final Result
Short on time? Get a quick peek at the biggest improvements from our redesign! We've made it more fun and intuitive for users to interact, while capturing the warm, welcoming vibe of LITA. Check out the before-and-after screenshots below to see the transformation or click here to skip ahead to the final solutions and results.
Before
After
Design Process
For LITA of Contra Costa, our design process is centered around empathy and user experience. We begin by understanding the needs and preferences of seniors and volunteers through interviews and surveys. Next, we ideate solutions that help to foster connections and joy, creating prototypes and gathering feedback to refine our concepts. Our process includes rigorous testing to ensure accessibility and ease of use. We continuously iterate based on real-world interactions, ensuring our programs and services effectively enhance the quality of life for our seniors.
Quantitative Research
We conducted a detailed survey to understand the motivations and barriers related to donating and volunteering for non-profit organizations. The survey revealed key insights such as the importance of transparency and trustworthiness, the impact of social media presence, and the need for clear communication about fund usage. These findings are crucial for making data-driven decisions and enhancing our strategies to better engage and support our community.
Survey Questions
What are the most essential factors when donating to a non-profit organization?
What information do you look for before donating?
What motivates you to volunteer with a non-profit organization?
Are there barriers that prevent you from donating or volunteering?
Observations
60%
80%
People look for "Testimonials" before donating to a non-profit.
People look for "impact stories and transparency reports" before donating to a non-profit.
90%
People are motivated to volunteer by their “passion for the cause.”
70%
People refrain from donating or volunteering due to "lack of information and trust issues."
Qualitative Research
I interviewed the Director of LITA to gain deep insights into the organization’s mission, challenges, and strategic goals. LITA’s primary focus is improving the quality of life for seniors and disabled individuals living in skilled nursing and healthcare facilities by fostering meaningful community connections through activities such as pet visits, music programs, and gardening. The Director shared key challenges, including the need to modernize an outdated website to better attract local volunteers and donors, difficulties in increasing in-house volunteer participation after COVID-19, and the urgent need to recruit younger board members for sustainable leadership succession. The interview also highlighted LITA’s emphasis on creating engaging volunteer experiences and using storytelling through photos, testimonials, and events, to communicate impact. These insights directly shaped our team’s design priorities and content strategy for the website redesign.
In parallel, I conducted a competitor analysis of similar non-profit websites. This process revealed best practices for building trust, ensuring transparency, and simplifying user interactions. I analyzed three key competitors to identify how they structured their content, highlighted their impact, and guided users toward donations and volunteer opportunities.
The insights I gathered directly informed our team’s approach to content strategy, the design of streamlined donation and volunteer flows, and the overall tone of trust and engagement we aimed to convey in the redesign.
The chart above summarizes my findings and provides a snapshot of both direct and indirect competition.
Based on our combined qualitative and quantitative research, we created a User Persona to guide our design decisions and ensure we were addressing the real motivations and barriers of our target audience.
Additionally, our team developed an Affinity Map and Empathy Map to synthesize key findings and align on user needs and frustrations.
Define Phase
Building on the research insights, I created a User Journey Map to visualize the experience of prospective volunteers and donors.
This process helped us identify key friction points and opportunities to enhance engagement and ease of use.
To ensure a clear and seamless experience for users, we collaboratively redesigned the Sitemap and User Flow. The updated Sitemap organizes LITA’s content into intuitive sections like “About Us,” “Volunteer,” “Our Programs,” and “Support Us,” making it easier for visitors to explore projects, learn how to get involved, and access essential information.
The User Flow focuses on guiding users through key tasks, such as becoming a volunteer. For instance, it maps the journey from the homepage through the “Volunteer” section, down to completing the volunteer application form. These artifacts helped us visualize pathways, reduce navigation complexity, and identify areas where users might drop off or get confused. Our goal was to create smooth, purposeful interactions that support both LITA’s mission and user needs.
Sitemap
User Flow
Ideate Phase
With a strong understanding of user needs and a clear design direction, we moved into the ideation phase.
I contributed to early sketches of key pages and flows, exploring ways to simplify navigation and improve the emotional storytelling of LITA’s mission.
Building on these initial concepts, we created a Low-Fidelity Prototype to quickly test the layout, content structure, and key interactions. This allowed us to gather valuable feedback early and refine the experience before moving into high-fidelity design.
Mobile Homepage Sketch
Desktop Sketch
Mobile Menu Sketch
Donation Page
Programs Page
Volunteer Page
Homepage
Design Phase
In the final design phase, we translated our concepts into a high-fidelity clickable prototype using Figma.
I contributed to designing several core desktop pages and mobile wireframes, ensuring visual consistency, accessibility, and a mobile-first experience.
Throughout this phase, we focused on:
Building trust through clear messaging and transparent design.
Simplifying the volunteer and donation processes.
Highlighting LITA’s impact through engaging visuals and storytelling.
Contact Page Redesign
The Contact page is a crucial part of the LITA website, yet many users found the original page lacked a clear way to connect. We improved this by prominently featuring a ‘Contact Us’ header, followed by an easy-to-use form. Additionally, we provided 3 alternative contact options below the form, ensuring that users have multiple, accessible ways to reach out. This streamlined design makes it easier for users to connect with LITA and engage with the organization.
The original contact page
The redesigned contact page
Test & Iterate
To validate our designs, we conducted usability tests and iteratively improved the experience based on user feedback.
Key improvements included:
Streamlining the donation flow for faster, more intuitive completion.
Enhancing the visibility of volunteer opportunities.
Clarifying how LITA’s programs directly benefit seniors.
These iterations helped us refine the user experience and ensure that our final design aligned with both user needs and LITA’s mission.
In addition to usability testing, we also conducted an A/B test to evaluate visual design choices specifically comparing two success screen variations to assess user preference and impact.
A/B Testing
We conducted an A/B test comparing two versions of the success confirmation page: Group A without a visual checkmark, and Group B featuring a prominent green tick icon. Users consistently preferred Group B, citing the green tick as a clear and reassuring visual cue that confirmed their task was successfully completed.
The presence of the green tick in Group B provided immediate feedback and enhanced user confidence, making the success message more engaging and intuitive. In contrast, Group A’s version without the tick was perceived as less clear and less satisfying.
Based on these insights, we selected the design with the green tick for our final success page, ensuring a more positive and confident user experience aligned with best practices in visual feedback and usability.
Group A
Group B
WINNER!
Website Development
After presenting our design to the stakeholder, she brought us on board to develop the new LITA website. My two teammates run a company called Studiomylo, and I joined them for this project. While building out the site and turning our mock-ups into something real, we noticed that our first design wasn’t doing enough to inspire volunteer sign-ups and donations, so we had to rethink how to make it more impactful.
Optimizing the Design for Engagement
As we took a closer look, we realized the user experience needed to feel even smoother, guiding people naturally from the moment they arrived on the site to the point where they chose to volunteer or donate. To make that happen, we went back and reworked important pieces of the design, including the branding, color palette, and overall visual identity, so the site felt more inviting and easy to navigate.
OLD LITA WEBSITE
INITIAL REDESIGNED LITA WEBSITE
Reflection & Outlook
Key Takeaways
This project reminded me how valuable it is to reevaluate design decisions as they come to life in development. What looked strong in our mock-ups didn’t always translate into the smooth, engaging experience we wanted, so we had to adjust and refine along the way. Simplifying flows like sign-ups and donations showed me how even small changes can make a big impact. More than anything, I learned that flexibility, feedback, and iteration are what bring a design closer to both user needs and organizational goals.
Future Outlook
This project strengthened my ability to lead a user-centered design process from discovery through final delivery. Now that the case study is part of my portfolio, it stands as an example of how I translate research insights into thoughtful, high-impact design decisions. Moving forward, I am eager to apply these skills to new challenges and continue growing as a designer who builds meaningful and accessible digital experiences.
Every project is a chance to listen, learn, and build solutions that make a real difference.
References & Acknowledgement
I would like to extend my heartfelt thanks to everyone who contributed to this project.
To my amazing team members, thank you for your collaboration, creativity, and support throughout each stage of the design process. Your insights and teamwork made this experience both productive and rewarding.
To my bootcamp mentors, I am deeply grateful for your guidance, expertise, and encouragement. Your feedback helped me grow as a designer and approach challenges with confidence and curiosity.
To stakeholder Victoria Ryan, thank you for your valuable input, direction, and thoughtful feedback, which were crucial in shaping the vision and success of this project.
To all the users who participated in interviews, surveys, and testing sessions, thank you for generously sharing your time and perspectives. Your input was invaluable in creating user-centered solutions and driving meaningful design decisions.
This project also drew inspiration from industry-leading resources, including Nielsen Norman Group articles, books such as Design Thinking, Lean UX, and The Design of Everyday Things, and design tools like Figma, Adobe Creative Suite, and Canva, all of which continue to shape my approach to user experience design.
This project would not have been possible without each of you.