Arizona Community Foundation Website

Web module designs for Arizona Community FoundationHomepage design for Arizona Community Foundation

One of the largest community foundations in the U.S., Arizona Community Foundation had a complex set of storytelling needs to reach a and a broad variety of audiences that spanned donors and investors to students seeking scholarships. Their website had grown organically over time, without a strategic lens that allowed them to scale the design or content management system to fit changing and emerging needs.

It was time to rethink the site completely, and build an audience-focused experience that created clear pathways to their various services and initiatives, also worked well for their internal teams. We rebuilt their site from the ground up with a simpler brand story and curated experiences for a myriad of audience types and donors.

Webpage hierarchy diagram reflecting the website architecture for Arizona Community Foundation. Webpage design hierarchy from homepage to basic page designs for Arizona Community Foundation.

Creating Clear Audience Pathways

Community foundations are complex because they have to be experts on the community, philanthropy, customer service, and much more. Our IA strategy hinged on the fact that the website needed to both  to tell a broad, clear story about the organization while also serving up simple pathways for each audience to easily find specific content.

The navigation took this directly into account, with primary nav items to explain the big picture, and a secondary utility menu directly pointing users to more specific audience-based content. Clear calls to action on each page allowed us to create pathways to related content and audiences on every page, creating a loop of exploration and information.

Style guide for a website designMobile call to action block design for a website.

Creating a modular, flexible storytelling system

ACF’s website is built on a system of custom modular components that can be used to construct unique pages. We built a variety of color and image-based themes for components that reflected the diverse landscape, flora, and fauna of the state. This allowed us to deliver visual variety and flexibility to ensure pages look fresh. Another widely used component, the grid block, was also built with flexibility in mind—allowing ACF to chose between square and rounded imagery.

Storytelling is a key tenet of the website. We designed flexible Story Block modules that can be added to a page. These special modules allow the ACF team to share small story quotes or longer multimedia-rich stories from their community about the impact of their work.

Webpage design showing a stats or  case study block design.
Website module designs for Arizona Community Foundation.
Website filter dropdown designCall to action module design for web on mobile

User Guidelines and Documentation

For this site, we built a custom WordPress implementation that uses Custom Post Types to make it easy to maintain news, events, publications, grants & scholarship, and staff & board pages across the site. Users entered information in one place that could dynamically auto-populate modules across various pages. We worked with a variety of third-party integrations so that ACF could keep using some important current technology.

We also delivered a full set of documentation, including a user guide and a library of custom screencasts to document the strategic reasoning behind the site and to ensure that future members of the team have access to the knowledge base and could easily train others on how to build and publish new pages.

CMS screenshots, demos, and documentation to help userrs navigate and use their new WordPress website.
Pages from a WordPress user guide and documentation for how to build and maintain web ages across the Arizona Community Foundation website.

Scope & Services

  • Website Strategy
  • UX UI Design
  • Prototyping
  • Accessible Web Design (WCAG 2.1)
  • Custom Iconography
  • Hover Animations
  • Custom Post Types
  • Image Sourcing

Credits

  • Creative Direction & Design, Robyn Baker
  • Creative Direction, Talie Smith
  • Web Strategy, Scott Smith
  • Tech Director, Becca Connors
  • Development, Nic Laflin and Andrew Houle
  • Case Study Animation, Robyn Baker and Amanda LaMarco