SwemKids is a nonprofit swim school program that partners with local schools to provide introductory swimming lessons and water safety skills to children as part of their school curriculum. However, their existing website was outdated and did not effectively convey their mission or align with their branding. As the contracted UX/UI designer for SwemKids, I was tasked with redesigning their website to create a more compelling and user-friendly experience for donors, advocates, and other stakeholders.

The challenge was to create a website that would effectively communicate SwemKids' mission, attract supporters, make it easy for donors to contribute, simplify volunteer recruitment, incorporate visual storytelling, ensure mobile responsiveness, and integrate with social media. Additionally, the website needed to include images/videos of program participants, events and activities, and have inclusive design elements to cater to a diverse audience.

As the UX/UI designer for SwemKids, my role was to lead the redesign effort and create an engaging and user-friendly website that aligned with SwemKids' mission and brand. I collaborated closely with CEO Trish Miller and the SwemKids team to understand their goals and requirements, conducted user research to gain insights, and employed design thinking principles to create a compelling solution.

The project started with a kickoff meeting with CEO Trish Miller to understand SwemKids' vision and goals for the website redesign. We discussed the current pain points of the existing website and identified the must-haves based on research, including clear mission communication, content to attract supporters, donor-friendly features, easy volunteer recruitment, visual storytelling, mobile responsiveness, social media integration, and inclusive design elements. We also reviewed the user survey results to understand user priorities and preferences.

‍

To gain insights into SwemKids' target audience and their needs, I conducted user research by interviewing donors, advocates, and other stakeholders. I also analyzed competitor websites and nonprofit best practices for website design. The research revealed that donors wanted to understand SwemKids' mission and the impact of their donations, while advocates were interested in opportunities to get involved and make a difference. Based on the research findings, I identified the problem statements for donors and advocates, which served as the guiding principles for the redesign.

Based on the research and user survey results, the main problems identified were:

1. Lack of clarity on SwemKids' mission and impact for donors.
2. Difficulty in finding opportunities for advocates to get involved.
3. Outdated design and branding that did not reflect SwemKids' vibrant and community-focused approach.
4. Non-donor friendly and complicated sign-up and volunteer process.
5. Limited visual storytelling and engagement features to attract and retain users.

Armed with the insights from research and the problem statements, I began the ideation and design phase. I started by creating wireframes and mockups that incorporated the desired features, such as clear mission communication, compelling calls to action, visual storytelling through images/videos, easy donor sign-up and volunteer recruitment, and integration with social media. I used a modern design approach with a vibrant color palette that included illustrations, photo cutouts, gradients, and abstract shapes resembling aquatics and pool themes to create a dynamic and exciting visual experience. I also ensured that the design was inclusive, accessible, and responsive for mobile devices.

To address the problems identified, I focused on the following design solutions:

1. Clear and prominent display of SwemKids' mission, impact, and scholarship program on the homepage to instantly communicate the organization's purpose to donors.
2. Creation of a "Get Involved" page that provided comprehensive information and easy sign-up options for volunteers, including an online form and a clear call to action.
3. Incorporation of compelling visual storytelling elements, such as images and videos of individuals participating in the program, to create an emotional connection with the users and showcase SwemKids' impact.
4. Implementation of donor-friendly features, such as a donation page with different giving options, an explanation of how donations make a difference, and a simple donation process.
5. Integration of social media sharing features throughout the website to encourage users to share SwemKids' mission and activities with their networks.

‍