Vieques Love
Nonprofit Responsive Website Re-design
I led the UX Design project, conducting user research and usability testing, which revealed the community’s goodwill toward nonprofits and their need for support beyond donations.
I enjoyed uncovering user motivations and identified opportunities for improvement.
Timeline: 4 weeks
Tools: Figma, Maze, Parrot.ai, Google Meet
Background
ViequesLove, a non-profit organization dedicated to supporting Vieques, Puerto Rico, sought a website redesign to enhance clarity, usability, and user engagement. Founded as a response to Hurricane Maria, ViequesLove has raised over $1.5 million for rebuilding efforts and has expanded its initiatives to include critical community projects like Asset Mapping and Street Naming.
Problem
Poor Usability: The existing website had non-functional buttons, lacked responsive design, and presented a cluttered layout, making it difficult for users to navigate and find information.
Lack of Transparency: Users struggled to see how their contributions impacted the community, leading to decreased trust and engagement with the organization.
Ineffective Communication: The site failed to clearly convey volunteer opportunities and other engagement options, leaving users feeling disconnected from the organization’s mission.
The existing website was cluttered, with non-functional buttons, poor organization, and lacked responsive design. A redesign was essential to effectively convey ViequesLove’s mission and facilitate donations and volunteer efforts.
Solution
Website Redesign: A comprehensive redesign was implemented to enhance navigation, improve visual hierarchy, and ensure responsive design for all devices, facilitating easier access to information.
Transparent Impact Reporting: The new website features clear, accessible impact reports and storytelling elements that showcase how donations are used, fostering trust and connection with users.
Streamlined Engagement Options: Simplified sign-up processes for volunteering and donations were introduced, along with easily navigable sections for current opportunities, improving user interaction and engagement.
Through comprehensive research, user-centered design, and iterative testing, I delivered a responsive, user-friendly website that effectively communicates ViequesLove’s mission and impact, fostering deeper connections with users.
process
Empathize
User Research
Market Research
Interviews
Surveys
Affinity Mapping
Define
User Personas
POV & HMW Statements
Product Goals
Ideate
Brainstorming
Information Architecture
Priority Matrix
Sitemap
User Flows
Prototype
Responsive Wireframing
Iterations
Responsive Prototyping
Test
User Testing
Final Iterations
Executive Summary
empathize
Research & Design Objectives
Research methods
I conducted a competitor analysis of three non-profits focused on Puerto Rico, user interviews with seven participants to understand their experiences, and an unmoderated survey with 13 individuals to validate insights.
Explore user frustrations regarding usability on non-profit websites to enhance satisfaction
Identify user expectations for non-profit websites and the design factors influencing their decisions to donate or volunteer.
Evaluate user perceptions of non-profit legitimacy and identify trust-building elements on their websites.
competitive analysis
I analyzed the following organizations to identify strengths and gaps:
Friends of Puerto Rico
Good project visibility but outdated content.
❌ Easy to find projects
✅ Volunteer positions
✅ Blog
✅ Their team
❌ Easy to find projects
Vieques humane society
Clear mission but lacked engagement features.
✅ Easy to find projects
✅ Volunteer positions
✅ Blog
❌ Their team
❌ Easy to find projects
Puerto Rico Rise up
Strong programs but needs clearer project details.
❌ Easy to find projects
✅ Volunteer positions
❌ Blog
✅ Their team
❌ Easy to find projects
market insights
Non-profits focused on Puerto Rico often struggle with outdated content and unclear project descriptions, which can erode user trust.
User insights
"i couldn't complete my intended task in a reasonable amount of time."
Mara, 28
"how is it positively impacting either a group of people or the community?"
Chelsea, 31
"I want to know how I can be hands on and help spread the word."
Kevin, 33
User Interviews
Through 7 remote user interviews via Google Meet, I discovered that:
100% of participants want to see the impact of the non-profit.
71% desire detailed information on volunteering opportunities.
Affinity Mapping
After validating the user interview data with an unmoderated survey of 13 participants, I organized the collected information into an affinity map to identify common themes and pain points.
Key takeaways
Users favor well-organized, transparent websites that foster emotional connections.
Many seek to support non-profits non-monetarily, desiring transparency without pressure to donate.
Users want easy navigation, impactful stories, and straightforward volunteer application processes.
Testing of assumptions
The research supported initial assumptions about the importance of transparency and ease of use but also revealed a strong desire for non-monetary support options.
Impact on the project
These insights guided the design process, emphasizing the need for clear navigation, transparent impact reporting, and a focus on volunteer opportunities.
Define
User Personas
Using the research data, I developed two distinct personas to understand their needs, guiding my design decisions with clarity and purpose.
impactful isabella
“How is it positively impacting the community?”
Motivations
Isabella loves the sense of community and making an impact for those in need. While she enjoys spreading a positive message, she is prudent about where she chooses to invest her energy.
Goals
Seeing the results of the efforts made
Trusting the organization they are involved with
Have flexible ways they can help
Pain Points
Difficulty finding essential information that would positively influence her decision
Feeling disconnected from the organization’s team
Experiencing a vague point of contact
Supportive Sam
“Some individuals prefer to donate directly, trusting their dollars to make a meaningful impact. Others prefer hands-on involvement or spreading awareness.”
Motivations
Sam is a high-achieving, compassionate person who likes to donate his time and skills to NGO’s in hopes of meeting like minded individuals in their community.
Goals
Help without giving a monetary donation
Learn the details of the NGO’s mission
Utilize his time efficiently
Pain Points
Wishing they could help a company without feeling obligated to spend money
Companies not following up with communication
Websites being unorganized making it difficult to find details
Product goals
I used POV statements to help me understand user needs, goals, and frustrations, guiding my design process to create solutions that resonate with user experiences.
Using HMW statements, I reframed challenges into design opportunities, fostering creative thinking and ideation to address user needs effectively.
“I’d like to explore ways that we can help users feel they have flexibility in the ways they can support us.”
How might we offer a variety of support options that cater to different user preferences and availability?
How might we provide users with clear information on how their contributions—financial or otherwise—make an impact on our organization?
How might we facilitate conversations around support options to discover what users value most?
Ideate
Brainstorming
Priority Matrix
I utilized a priority matrix to organize my brainstorming ideas aimed at addressing the identified pain points, with a focus on enhancing transparency, improving ease of navigation, and fostering emotional connections through impactful storytelling.
User flows
Taking into account the specific goals of Isabella and Sam, I crafted 3 tailored user flows for navigating Vieques Love, focusing on:
Discovering relevant non-profit engagement opportunities.
Effortlessly comparing available volunteer options.
Streamlining the sign-up process for a seamless user experience.
prototype
wireframing & Design Decisions
Low-Fidelity
I translated ideas into low-fidelity wireframe sketches, focusing on enhancing navigation and key sections like volunteer opportunities and impact reports.
Homepage
Get Involved
Volunteer Brief
design Decisions
Improved Visual Hierarchy
Prioritized important elements for easy access.
Streamlined Navigation
Reduced clicks to access key information
Responsive Design
Ensured compatibility across devices
Mid-fidelity
Now it was time to start digitizing the ideas. Keeping the user flows, personas, and product goals in mind, I began reformatting the information architecture to determine what worked best.
In the future, I would welcome the opportunity to collaborate with the organization to streamline the text for an enhanced user experience, but for now, I worked with the content they provided.
Home Page
Personalized accounts to track user engagement
Interactive timeline, quickly access various project details
Quick & easy access to the impact report
Easily find different ways to support
Professional affiliations, enhancing trust
Volunteer brief
New designated area for volunteer opportunities, providing options
Opportunity cards providing specific details that can be “liked” and saved to user account, or easily applied to
Filter options that enable users to customize their search preferences according to their specific needs
Easy access to other support options
test
Iterations & final product
User testing
The interviews revealed that users valued the ability to see the positive impacts the organization has made, find information easily, and access detailed information about volunteering opportunities and the sign-up process.
I conducted three unmoderated tests via Maze with 15 participants to evaluate how well the new designs addressed these user preferences.
tasks
While exploring this nonprofit's page, how would you look for information about the impacts they've made on their community?
If you wanted to support their cause, what steps might you take?
What would you do to create a profile?
metrics of success
Task Completion Rate: Specifically tracking the percentage of users who can effectively find impact information, sign up for volunteer opportunities, and create profiles without assistance.
User Engagement: By analyzing metrics such as session duration and pages viewed per visit, aiming for increased interaction with key content areas that showcase the organization’s impact.
User Satisfaction: Gathering qualitative feedback through post-testing surveys to assess user satisfaction with the redesigned website, focusing on their overall experience and specific aspects such as navigation, aesthetics, and content clarity.
results
100% Success rate
✔️ Completion time was quick
85% of users rated their experience as a 7 out of 10 or higher
Iterations
I organized the feedback from the usability test into an affinity map to prioritize the direction for future iterations.
While the feedback was largely positive, some users expressed a desire to see volunteer position details displayed on the cards above the call-to-action buttons.
Additionally, they preferred easier access to the 'Get Involved' section instead of having to go through the newsletter sign-up process.
Most of the changes were straightforward and minimal, so I implemented them and then moved on to developing the high-fidelity prototype.
Before
after
Before
after
high-fidelity
Participants in the user interviews expressed a dislike for stock images and a generally somber tone. As a result, I selected authentic images that, while not the highest quality, genuinely represent the organization and highlight its positive aspects.
I maintained a color palette consistent with their branding and aimed to keep the tone uplifting while preserving the depth of their mission.
In an unmoderated usability test with 16 participants, I gathered valuable insights into user preferences, emphasizing the importance of seeing the organization’s positive impacts, easy access to information, and detailed volunteering opportunities.
Overall, the feedback was positive, with most users finding the tasks easy to complete, guiding further iterative improvements to the design.
mobile screens
Desktop screens
executive summary
Overview
This project focused on redesigning the website for Vieques Love, a non-profit organization dedicated to supporting the community of Vieques, Puerto Rico. The goal was to enhance user engagement, improve navigation, and increase transparency regarding the organization's impact.
objectives
The primary objectives were to:
Increase visibility of the organization's positive impacts.
Simplify access to detailed information about volunteering opportunities.
Enhance the overall user experience to drive donations and volunteer sign-ups.
approach
To achieve these objectives, we conducted extensive user research through interviews and usability testing with 31 participants. Insights revealed that users valued clear, accessible information and wanted improved functionality in buttons and navigation. Based on their feedback, I made iterative design changes, focusing on button visibility, spacing, and alignment.
results
performance against objectives
The final design successfully met the set objectives, enhancing the visibility of the organization’s impact and simplifying navigation, which facilitated user access to volunteering opportunities.
impact on users
The redesigned user experience significantly improved user satisfaction, with most participants reporting that tasks were easy to complete. Users expressed greater confidence in engaging with the organization.
impact on the business
The design changes are expected to lead to increased donations and volunteer sign-ups, as the site now provides a more engaging and user-friendly experience.
Lessons learned
Throughout the project, I learned the importance of actively listening to user feedback and the value of iterative design. This approach not only addresses user needs more effectively but also fosters a stronger connection to the organization's mission.
areas for future improvement
Moving forward, I recommend ongoing collaboration with the organization to streamline content and continuously update the website based on user feedback.
strategic value
This redesign not only improved the user interface but also fostered a deeper connection between users and the organization’s mission. The project highlighted the importance of user-centered design and iterative feedback in creating a website that resonates with its audience.
By focusing on user needs and enhancing the digital experience, this project lays a solid foundation for ViequesLove to connect with more supporters and drive meaningful impact in the community.