I first heard about Bento 3.0 at TechCon 2016. I literally “ooh’d” when the Bento lead, Jen Hinders showed me the backend mockups. It was a major upgrade from the dropdown-scenario Bento 2 had to offer at the time. Jen told me the idea was to create a CMS that was as easy to use as Squarespace.
When I went back to my station (Nashville Public Television) I alerted the digital team that Bento 3.0 was coming--and to be excited. We eagerly signed up to be part of the Bento 3.0 Alpha Group in Sept 2016. It was fun to see the mockups come to life and to familiarize ourselves with the functionality of a completely new CMS. We also realized that this wasn’t going to be a quick or easy transition. As with any website redesign, we needed to reevaluate our site goals before moving our current Bento 2 site to Bento 3.0. Are we putting a spotlight on our local content? How mobile friendly is our website? Are our users getting what they want and expect when they visit us?
On Sept 18, 2017, one year later, we launched our Bento 3.0 site and couldn’t be more pleased. There was a learning curve going from Bento 2 to 3.0 but we took this opportunity to rethink our site and its functionality as a whole. There are three things worth mentioning when we talk about our experience with Bento 3.0.
1. Stay Native
In our Bento 2 site, we often added content to our site as needed, usually with an emphasis on how we wanted the new element to function in mind before actually adding it to the site. The result was adding custom components that weren’t native to Bento and a site that wasn’t truly responsive. Adding custom components in Bento 2 are done within an iframe, and iframes can wreak havoc on your mobile design. So when in the beginning stages of this redesign, we wanted to be as close to 100% native to the Bento CMS as possible. Going forward, any new content will be set in a native component. It is very important to recognize our limitations upfront because ultimately it allows for a more user friendly site. We’re still not mobile first (nor is that our goal), but we’re much more responsive than prior versions of our website.
2. Our Favorite Component is Highly Customizable
Some components are more customizable than others. And it’s no surprise that our favorite component is probably the most flexible component that exists. I’m talking about the Promo Box. EVERYTHING about this component is customizable. Want a horizontal info box? Use a promo box! Want to change it to vertical? No problem! Include an image or video or don’t. The title, description, caption and call to action---each one of these fields can be turned on or off. We used these little miracle boxes to replace the Profile Grid component that we fell in love with in Bento 2, and we haven’t looked back. Promo Boxes have become our go to component with each new addition to the website.
Our homepage uses Promo Boxes to highlight a program in prime tonight, NPT | Passport and our American Graduate Champion videos. Promo Boxes help us navigate our About and Support pages. And they highlight what’s happening in the community on our Events page. I can’t say enough about Promo Boxes. We love the look and flexibility of this component.
3. Local Production on Display
One of our website goals is to showcase our local productions, from our weekly magazine and interstitial series to our public affairs and documentary series. We used the new Poster Image Gallery to visually display all of our work on the Productions page. I love how it shows the great variety of content we produce. But it’s not only pretty--it’s functional! Each image has the option to include up to two “call to action” buttons which allows us to send users to both the Media Manager streaming page and its official website. It doesn’t hurt that this layout mirrors the PBS.org Shows page.
BONUS: What else?
We added a “How to Watch NPT” page so users know what channel we are over the air, on cable or on satellite. It also includes our streaming options and an antenna FAQ because even though the digital transition was 8 years ago, we still get inquiries almost daily regarding our digital signal.
We’re using Google’s Custom Search Engine (CSE) for the first time (thanks for the tip, PBS) and added our social pages to the mix for fun. Imagine our surprise to find that it works! So don’t forget to add your Facebook, Twitter, Instagram and YouTube pages to your own CSE. Also be sure to link it to your Google Nonprofit account so the CSE does not populate ads.
The Footer is more than just a footer. Any code that we need to be on EVERY page is added to the footer. Our direct marketing tracking code, Google Analytics code, CSS, 404 forwarding code, semi-working favicon, it’s all in the footer.
We’ve had a fun year with Bento 3.0! As with every website, we’re continuously making adjustments and changes to keep up with the world around us but we’re happy with where we landed on launch day. Mega menu...here we come!