Ciao Italia currently airs on more than 270 PBS stations nationwide and is seen internationally in Canada, New Zealand and Japan. It is independently produced by Rhode Island PBS and hosted by its creator, Mary Ann Esposito.
Since it started in 1989, the show has kept meticulous records, saving every episode and catalogging every recipe. There was an attempt to put the recipes online using a database, but it was slow and cumbersome. Retrieving a recipe would often take more than a minute. None of the videos or episodes were online at all.
Additionally, Mary Ann kept a popular blog with many active followers. Unfortunately it was hosted off-domain by Blogspot, meaning none of her posts contributed directly to the Ciao Italia brand, from either an SEO or User Experience perspective.
In redesigning and rebuilding the site, our goals were to consolidate all of these tremendous assets (videos, recipes, cookbooks, blogs) into one easy-to-use site. It needed to serve the older, dedicated Ciao Italia fanbase as well as reach a new audience that would find the site through Google searches or social media sites like Facebook and Twitter. Finally, it needed to be completely manageable by Ciao's current staff, who was talented but did not have a Web background.
Making thousands of recipes clean, organized and accessible.
From the outset, we wanted to design a site that would set a tone that was like the show: friendly, homey, and informative. We wanted visitors to feel like guests invited to a dinner where the door is always open. The design needed to be clean and easy to both navigate and read. We wanted the site to feature lots of white space to give it an open feel, but also use traditional, bright Mediterranean colors to set the right tone.
Because we wanted such a clean look and we had such tremendous photographic assets, we built a wireframe that incorporated both colors and imagery. Typically we avoid doing this so that we can focus strictly on the structure of the site elements before moving to the design of a site. In this case, we had some very constructive conversations with the production team at Ciao Italia and felt like we were on the same page. Our wireframes used solid colors and also some photos to convey the desired warm, friendly tone. We started with the homepage because it featured a number of elements that would appear elsewhere in the site.
Once we nailed down that look to a near-final version, we moved to other areas of the site.
The Ciao site was a bit unusual in that it would relaunch with thousands of pages for its recipes. If we did our job correctly, the decades of content that they show had produced would be available through Google searches, meaning that an extremely high percentage of visitors would enter the site through an interior page rather than the homepage. This was therefore an important consideration when we designed the interior pages. They needed to present the necessary content, but also act as an entry point to the rest of the site. For this reason, we kept the navigation design very consistent and clean. We also included some general Ciao content in the sidebar to help draw visitors into the site more deeply.
On recipe pages, usability was paramount. User feedback showed that many fans would either have their laptop in the kitchen while they cooked, or print out recipes to use in the kitchen. We made sure to use a large, high-contrast font for the recipe text and developed an especially usable print-stylesheet. We also highlighted the video at the top of the page. For many fans this would be an incredible surprise: for years they had used their favorite Ciao recipes and had never seen the episode on which they originally appeared!
Finally, there was already a large collection of fans that was using the existing online recipe database, even though it was very slow. They knew exactly how to search for the things they wanted -- many even knew the internal episode numbers of their favorite episodes! It was therefore crucial that the new design be usable and familiar while being improved in speed, efficiency, and design.
Everything from a data import, to a site API, to microformats.
The Ciao Italia site development presented some fun, multi-disciplinary challenges:
- Thousands of recipes existed in an old, slow MSSQL database with an unknown schema that needed to be migrated out.
- Once migrated, they needed to be in a more structured format so that we could accomplish our design and SEO goals AND they could be managed by a non-technical user. Recipes needed to be searchable by everything from ingredient to episode number.
- The site needed to be extremely high-performance.
- The front-end code needed to take SEO best-practices into strong consideration.
- All data needed to be available through an API so that Canadian Television could make some recipes available on its site.
- The project had a tight budget.
In order to accomplish this project within a reasonable timeframe, we started on the database problem even before the site had been designed. It was a bit of a logistical issue to get access to the existing database, but eventually we secured a copy after getting remote desktop access to a Windows 2000 server.
Because of the tight budget, a custom solution was impossible. We considered using open-source content management systems like Wordpress or Drupal as well as our favorite self-hosted commercial CMS, Expression Engine, but we ended up excluding them all. They either presented an unacceptable user experience (overly complex and technical) to the non-technical Ciao staff or they would require us to solve too many database and performance problems on our own.
We ended up using HiFi, our in-house built content management system. By design, HiFi solves all kinds of sophisticated site performance problems right out of the box and allows us to create custom database-driven sites that are very easy to manage for non-technical users. In the case of Ciao, Hifi allowed us to focus on the problems that were specific to this project and not common boilerplate problems like site performance. In turn, we could deliver a very large, complex site on budget and on time.
Our first step using HiFi was to set up the custom season/recipe/episode database structure along with custom fields.
Next, we created an import format from the previous database and used it to pull in the 20+ seasons with 20+ episodes per season and three recipes per episode in one fell swoop. Additionally, we could turn over the CMS keys to the Ciao staff before the site was finished so that they could upload the latest season that never made it into the previous database.
Because we were able to use HiFi, many of the development challenges we would have faced melted away. Canadian Public Television immediately had an API they could use to pull recipe data. We could use the API to search by season, episode or recipe content and display the content intelligently.
Because HiFi has built in asset compilation and minification, image resizing, gzip compression, client-side cache headers and http caching, the site was blazing fast. The average page load time dropped from 5+ seconds to under 100 milliseconds!
Leveraging years of first-class recipes, videos and content to drive search traffic.
Our initial plan for marketing the site sought to fully capitalize on the library of high-quality content the show had created during its run. A big part of this took place during site development:
- We wrote clean html that was accessible and easy for search engines to index and spider.
- We used recipe micro-formats so that Google could identify the recipes.
- We dramatically increased site performance, a factor that increasingly matters in search results.
Additionally, we used HiFi's sitemap functionality to present a comprehensive directory of all of the pages on the site. Previously, they were only discoverable through spidering.
We dramatically improved the site URLs so that they contained relevent information for both humans and search engines. When we did so, we kept track of thousands of old URLs and 301 redirected them to the correct new ones, so all existing Pagerank passed through and no external links went bad. For the weeks and months following the site relaunch, we checked Google Analytics and Webmaster Tools to correct any issues that we discovered.
All of this work made the site more usable and discoverable. We also made it more sharable. On all blog posts and recipes, we installed social sharing buttons. Recipes and posts have been shared thousands and thousands of times on Twitter and Facebook, driving additional traffic to the site.
Bringing it all together for rave reviews and explosive traffic growth.
After the relatively complicated design and development process we were very excited to launch the site and see how our work turned out. The results were even more immediate than expected.
Over the first week, before Google could really discover the change, we benchmarked the new site's analytics against the old site's. The change was dramatic. Because of the vastly improved site performance, design and navigation, the number of pages per visit increased 142%, the time on site increased 27% and the bounce rate was down 15%. This number has held even after the initial launch.
Within a month it was clear that the improved SEO and site performance was making a dramatic difference to Google. The first full month after the site launch had nearly a half million page views. Visits originating from search doubled. These results were more than double the highest amount in the site's history. Additionally, the email list began growing again. The list grew by 750 subscribers which was 3% or 35% annualized. This was not just a launch spike, either. Traffic continued to grow for several months, primarily driven by search which increased by 275% in comparison to the old site.
In addition to the new traffic and hard, quantitative improvements, there was incredible qualitative improvement as well. Form submissions and comments poured in by the hundreds complimenting the site. Perhaps most importantly, the Ciao staff was finally able to manage and control their online brand, something they had never been able to do by themselves.