Migrating to a new platform can be a daunting task and an opportunity to refresh your website. Luckily, we had PBS to guide us through the process. They provide the platform, design and resources.
We scheduled our new website launch to coincide with our station’s 50th anniversary and the release of the Bento 3 upgrade. The upgrade was postponed and caused some issues, but we were able to create workarounds to meet our deadline.
Review, Refresh, Remove
Our station departments were provided with Google sheets that listed their related pages and links, Google Analytics stats, project status, and a comment section. We used an online sitemap creator to gather the list and added the stats. The content owners were instructed to review, update, remove or keep the current content, which was documented in the Google sheets.
Navigation is a critical component for any website. We used an online card sorting tool to learn more about improving our user experience. Our goal was to find out how people thought our content should be organized. We chose an open card sort where participants would sort the topics we provided into categories and label them. The insights were subtle and valuable. For example, users grouped a variety of topics in the Community category including shows, education, meetings, events and more. Station Information was used for items usually found in the About section. The Learn category label was more popular than our current label, Education. These insights were used when creating new navigation labels for our refreshed site.
Including the content stakeholders is critical to the process. Meeting with the content owners, management and our communications and marketing team provided an opportunity for reviewing our goals, strategy and concerns for our website project.
Build & Launch
We created the page structure in the Bento 3 admin section and built each page with the components and embedding features.
The Bento 3 mega menu provided a solution for showcasing content above-the-fold. The fold may not matter as much as it did prior to the popularity of mobile devices, but it’s helpful to have the option for our content owners. Users have learned to scroll. The poster grid provides an easy way to present and organize content in an inviting way. We’re using it for our shows and monthly program magazine. The Hero image is great for promoting the national and local content. The video player/playlist makes it easy to add video to a page whether it is from Media Manager or YouTube.
It’s a good idea to plan for pages that will be redirected or removed to avoid 404 error pages. Bento 3 now offers redirect functionality in the advanced settings for the individual page.
Bento 3 is evolving, and we are looking forward to enhancements in the future Bento 3 roll-outs.
Resources and Tools:
PBS offers documentation, archived webinars and blog posts to assist in the re-design process. These topics include setting goals, creating personas, and auditing content.
- PBS Digital | Bento 3 (http://digital2.bento-live.pbs.org/products/bento/bento-3/) – Resources for migrating to Bento 3 and more
- PBS Docs | Bento 3 (https://docs.pbs.org/display/B3/Bento+3.0) – Bento 3 documentation
- Google Search ID (https://cse.google.com/cse/) – Create or update your custom search. We also used this tool to exclude retired sites and pages from the search.
- Google Search Console (https://www.google.com/webmasters/tools/) - Created a new https property.
- Google Analytics (https://analytics.google.com/) – We changed the property settings to https and added an annotation.
- Google Tag Manager (https://www.google.com/analytics/tag-manager/) – Bento 3 provides easy implementation for Google Analytics and Google Tag Manager.
- PBS Docs | Google DoubleClick (https://docs.pbs.org/display/B3/Google+Doubleclick) – Bento 3 provides a custom component for using DoubleClick.
- PBS Digital | Resources (http://digital2.bento-live.pbs.org/resources/) – Hub for PBS resources
- Google Data Studio (https://datastudio.google.com) – Great way to present website’s stats
- W3Schools (https://www.w3schools.com) – Great resource for the embed code feature in Bento 3
- Bootstrap (https://getbootstrap.com/) – More great code.