This week we launched the new website for Wave Hill, the beautiful public garden and cultural center that overlooks the Hudson River in the Riverdale section of the Bronx. As with any cultural institution, be it a garden, museum, park, or theater, our challenge was to design and build a site that would showcase the best of what the institution had to offer. Browsing their old website was like looking through a pinhole, and the new site needed to give users a sense of the experience they will get when they visit Wave Hill in person — namely, the lively gardens, the wide vistas, and the nature-inspired art that lives around every corner.
From the new, airy design to our thoughtful, flexible setup of Django CMS, there’s a lot happening on this site. Here, I’ll focus on two things:
- seasonal photography (or, how we designed for their assets)
- under the hood (or, how Wave Hill controls every aspect of the site through their CMS)
On Day 1, as we stood at the edge of the Hudson and looked across at the Palisades, it was clear that Wave Hill needed a spacious design to convey the endlessness of these views. What we were happy to find out later that day was that they also had a database of hundreds of hi-res photos — which, to boot, were tagged with metadata about the garden and season in which they were taken. Clearly, this was to be a photo-forward site.
So we started with a full-width homepage, along with a centered navigation and content area that would accommodate any screen size. The background photo you see above is part of the featured story; when it changes after a few seconds (or you click on an arrow), you get an entirely new background photo with the next story, showcasing yet another hi-res photo.
The photos get even smarter when you move to a garden page. What many people don’t realize is that gardens like Wave Hill are open — and thriving — throughout the year. When we thought about this, we decided we would showcase photos from all four seasons and create a season setting in the CMS that would determine which photos are featured upon landing. So now there’s a “season switch” in the CMS — literally, Wave Hill tells the site when spring turns to summer, and the photos and design adjust. It’s the next best thing to a weather machine.
When they flip the switch, the slideshow updates to the new season, as do the highlighted plants you can see at the bottom of the screen (driven by their newly improved seasonal plant database). As the leaves change color, so do the design elements: buttons, labels, and the text selection color are all driven by the season setting in the CMS. So you’ll always know when it’s summer.
Wave Hill’s old website needed a design update, but even more so, they needed a new back-end that would give them the power and flexibility to control every corner of their site: every news story, garden, event, blog post, art exhibit, and promotion. (Like I said, there’s a lot going on over there.)
So we built the new wavehill.org in the open-source Django CMS, giving them the ability to easily manage all of these assets. The homepage feature can link to anything on the site. They can create promo tiles on the fly, right in the CMS, and place them in any section of the site. If they open a new garden and create it in the CMS, the navigation will automatically update to include it, and they can populate the garden with plants from their plants database. Then, they can select artists, art exhibits, and events, and associate those with the garden to make each of those assets automatically cross-link to each other. It’s a CMS nerd’s dream.
There’s more, so please poke around the site and let us know what you think. When you’re done, make a trip to Wave Hill, too.