The Next Bite needed a serious web overhaul – Their site looked like Yahoo during 1993… but it was 2012 (I can say that because they joked about it too). Here’s a brief overview of the projects involved to make the whole site come together.
Step 1: Evaluation
On the surface, TNB’s site looked like any other site. Once we got to digging around though, we found a TON of information, good information, that was buried. The main focus of the site was their forums – with ~13,000 registered users and over 12,000 forum topics – this wasn’t going to be a quick move. They also wanted a better way to manage their video library.
The main objectives for this site were to get that useful information out to the front so people could find it without digging through multiple pages and menus, but present this info in a way that didn’t confuse users. TNB is video heavy – they are a TV show after all – so videos were extremely important to them. We also needed to speed up the site AND upgrade their Drupal installation from 6 to 7.
Solutions – A home page with the most useful information, but cut out a lot of the text. TNB is luck enough to have a great group of photographers and cameramen, so their information could be displayed through compelling images that would lead users to the content. The site speed would be a simple solution – a dedicated server. Caching wasn’t enough, so we had to take the next step and give them their own space. As for the Drupal upgrade – the site was WAY too big to complete a ‘standard’ upgrade, so the site was moved in ‘chunks’.
Step 2: Get the data!
Moving and upgrading the site was actually pretty easy – once we understood the differences between Drupal 6 and 7’s database scheme. While it wasn’t as simple as telling the database ‘give me all the video nodes’, it was almost that easy.
First, we got the bulk of the information that could be moved in this fashion. We had a local server set up with Drupal 6 installations that we would import a data type to, then upgrade that install to Drupal 7 and then import that section of the database to their dedicated server.
The hardest part of the whole process was the forums. The forums were constantly being updated while we were working and we wanted to minimize downtime (or have none at all) while we migrated/upgraded. We were doing nightly exports of updated forum topics with Node Export. The thread replies were easy – Since that was the only place ‘comments’ were used, we would just export the comment table, update and upload to the new server. The real trick was figuring out the node ID’s on the new server. The node ID’s never matched, so we had to manually change the node ID’s so the comments knew which node, or forum topic, they belonged to. We were moving threads and replies until the final seconds of the new site going live.
Step 3 – Make it look nice!
TNB’s old site did have some images, but overall, it was a wall of text. Good information was lost in deeply hidden submenus and pages. The home page also uninviting and somewhat overwhelming with the amount of text links. The new site had to maintain it’s vast library of information, but not be so text heavy. The solution was simple, use their existing images to draw users into the content. A slider was placed at the top of the page, which showcased their social media pages and major sponsors. A large video container was placed under that, with a featured video and 5 random videos to the right. Next, their articles, which followed the same principle as the videos, a large image from the article and 5 random articles to the right. Underneath this we displayed the ‘sponsor areas’, which consisted of various products, tips and a Q&A section. More images were used for featured content with the sponsors logo above.
The layout was clean and to the point, but still gave the users all the information that was hidden before. After the user was done watching a video or reading an article, more articles were available under the content they just consumed, so the homepage wasn’t flooded with links, but still gave TNB a way to show the user more.
Notice how I haven’t talked about the videos yet? That’s because I wanted to save it for the highlights.
The video section was a really cool set up. We gave TNB a ‘one and done’ solution for videos. On the old site, they would upload their videos to YouTube, then create two thumbnails manually, upload those thumbnails to the site, type in the description and embed code from YouTube and publish the node… Too much time was wasted!
Our solution was simple – Have Drupal ‘watch’ their YouTube RSS feed, grab any new videos, create the nodes and go have a cup of coffee once it was done… Ok, it didn’t have the coffee, but the TNB crew could, because they only have to upload their video to YouTube and the site handled the rest (actually, the editors can export the video straight to YouTube from Final Cut Pro X. This took out yet another step). Drupal watches their RSS feed, maps the video description, thumbnails and embed code to their respective fields in the video node and publishes the node. Simple huh?
The ‘Hot Topics’ section of the site is another highlight – bringing all of TNB’s sponsors Facebook and Twitter feeds into one, centralized page. This looks good to their sponsors and also gives the end user a quick place to see what’s new.
We have an ongoing relationship with The Next Bite, so keep watching their website and social media pages (we manage them too) for more updates! We are already working on some big projects that will be coming out soon.