Girard Foundation Redesign

Capabilities

Branding, Figma, Web Development

Girard Foundation Redesign

During the summer of 2021 I was approached by Cecile Thomas of Make it Matter to redesign the website of the Girard Foundation. Their vision is to foster innovation and systemic change in education with the goal of improving student outcomes in San Diego County and beyond. The old site was both outdated in its appearance and needed updating in terms of their recent accomplishments. Other goals included wanting to look more established and on a par with other major grant foundations. Working with my old friend and associate Scott Marlowe of Marlowe-50, the goal was to convert the site to WordPress, transfer all the existing content, and train the team on adding additional content with the WordPress Block Editor.

Working in Figma, I felt that the best approach was to design a series of cards or components, rather than design a layout for every page. Scott and I explained that responsive layouts in WordPress allow the content to take any form and designing a series of cards allows for a variety of different contexts. Cecile and her team were really open to this approach and showed the initial cards to the client and they were excited about next steps. While my original goal was to just design cards, clients alway feel better when they can see the completed page in its entirety. The great thing about working with cards in Figma is that they can be turned into components and combined as variants. Building entire page layouts happens much more quickly as I snapped together sections to test and prototype different solutions. As the Foundation provided final copy and imagery, it was really easy to drop that into my existing card structure. Making adjustments and fine tuning typography and spacing in Figma was a breeze. After that, it was really fast and straightforward to export my css from Figma and give it to Scott to create a working style guide. This really helped the clients visualize what the site would look like as we provided training in the Wordpress Block Editor. While the process took a long time , I’m thrilled with our new Figma-WordPress workflow and I’m looking forward to trying out on the next project.