The San Diego Foundation
Re-design Website

Oversee design , Production and Implementation

Background

To transition the Foundation’s existing website—originally built using Dreamweaver templates—into a professional, mobile-first, responsive website featuring a robust Content Management System (CMS). The new design aimed to enhance usability, navigation, and content updating flexibility, aligned with the Foundation’s diverse structures.
The Foundation manages four distinct entities: 
  • The Center for Charity Foundation
  • The Center for Civic Leadership
  • Community Foundations
  • Programs
The initial website, built on Dreamweaver templates, lacked responsiveness, modern aesthetic appeal, and efficient content management, hindering user engagement and content updates.

Information

CLIENT
The San Diego Foundation
ROLE
Lead  Visual Designer and Content Management
YEAR
2012-2013

Approach & Strategy

Collaboration with Aaryn.com

I partnered with Aaryn.com, a design firm specializing in non-profit websites, to create a professional yet approachable visual identity that aligns with the Foundation’s mission.

 

Design Review and Feedback

As the project supervisor, my responsibilities included reviewing initial design proposals, providing constructive feedback, and guiding the design process toward a mobile-first, user-centered approach. Due to project constraints, feedback was often communicated through low-resolution wireframes, focusing on layout, navigation flow, and visual hierarchy.

 

Content and Image Curation

A significant aspect of the project involved sourcing and selecting impactful images that tell donor stories, highlight community projects, showcase grant recipients, and illustrate program initiatives. I also contributed by creating and organizing content for over 1,000 web pages, ensuring consistency across the diverse site structure.

 

Navigation and Site Architecture

Given the Foundation’s complex structure, we prioritized the development of an intuitive navigation system. This included: 

- Clear menu hierarchies 

- Quick access to each core area 

- Responsive design elements to ensure a seamless experience across all devices.

 

Development and Implementation

The final website was built on a modern CMS platform that supports: 

- Responsive design (Mobile First) 

- Easy content updates by Foundation staff 

- Enhanced user experience and accessibility.

Challenges & Solutions

  • Diverse content scope: Managed immense content volume by structured categorization within the CMS.
  • Legacy design limitations: Replaced static templates with flexible, responsive modules.
  • Image sourcing: Leveraged impactful imagery to tell community stories, boosting engagement.
  • Navigation complexity: Designed a streamlined menu that navigates the four main structures effectively.

Results

  • Modern and professional appearance: The new site presents a trustworthy and dynamic presence, ideal for donor engagement and community outreach.
  • Responsive, mobile-first design: Users can access and navigate the website effortlessly across any device.
  • Content Management System: Staff can now easily update pages, add new content, and manage media without technical skills.
  • Enhanced user experience: Clear navigation pathways encourage more profound exploration of the Foundation’s programs and stories.

Results

This project successfully transitioned the Foundation’s digital presence into a responsive, manageable, and visually appealing platform. My supervision, content curation, and design feedback contributed significantly to creating an engaging website that effectively communicates the Foundation’s mission, stories, and impact.