Appeal to donors
Midtown’s old site made them look like a small town non-profit. They needed a new visual identity that would articulate their modern and innovative sensibilities to local donors, and increase on-site conversions.
Modernize the website
Midtown’s donors live and work in Silicon Valley. We used modern design language to create instant familiarity and evoke the same innovative spirit as silicon valley’s top tech companies.
A beautiful, blazing fast SPA
The end result was a responsive website single page application. The admin interface is powered by a custom atomic-style page builder in WordPress and the front-end is built using React, Next.js, GraphQL, and Chakra UI.
This website leverages the robust administrative capabilities, security and reliability, and extensive plugin ecosystem of WordPress and combines it with the modern React ecosystem, which is equally extensible and provides a superior developer experience, and Next.js Static Generation to generate lightning-fast front-end.
Superior Performance
These days websites have to be wicked fast. Page speed and mobile experience are critical to website SEO and user experience, and conversion rate optimization.
Leveraging Next.js static site generation allows us to build the site all at once and then deploy it to a global CDN, and Next.js image optimization reduces the complexity around image optimization.
This website leverages all of the modern performance improvements to deliver a 90+ mobile page speed on an image heavy page, that loads a custom font, and uses 4+ tracking scripts.
90+ lighthouse performance rating on mobile and desktop
Atomic page builder
Flexibility, stability, and longevity, and a rapid content management experience were critical. WordPress is the obvious CMS of choice due to its popularity, longevity, and best-in-class admin interface.
This wordpress install is supercharged with the Advanced Custom Fields plugin, which powers a custom component-driven page-builder composed of Sections, Rows, Columns, and Column Content.
Columns editor
Resulting columns on front end
Global Layout Options
Users can create global Sections, Rows, Columns, and Column Content that can be created and managed from a single location, and then included on multiple pages on the website.
Paypal Integration
A custom 3-step paypal integration was developed to create a streamlined donation form, with paypal details being configurable from within WordPress.
The donate form is included on PPC landing pages, and the form is set up so that as a user proceeds through the three steps, each step fires an “add to cart”, “initiate checkout”, or “purchase” event, respectively, so that marketing campaigns can optimize for conversions.
Multi Language Internationalization
Midtown Family Services, serves both English and Spanish speaking communities. Through the combined powers of Next.js localized routing, WPML, and GraphQL for WPML, editors can create language-specific versions of webpages.
Page Previews
When requesting a preview URL, the user is authenticated using their WordPress credentials