Multi-national Broadcasting Website Ready For Prime Time
CBSSI Website Redesign
OVERVIEW
CBS is an international broadcasting television network intent on producing quality programming for a diverse audience. Best known for hit shows like The Big Bang Theory, Survivor, CSI: Crime Scene Investigation, MacGyver, and many more, CBS is no stranger to award winning content, and we at SPINX Digital were thrilled to step up to the plate and have the opportunity to deliver a website on par with the network’s publications.
With such a long, storied history of televisual success, we at SPINX Digital set out to design a website that reflected the tradition and esteem of CBS while maintaining ease of access for site visitors to discover the shows they are most interested in.
Working within CBS’ database structure, we were able to automatically associate news and press releases with certain shows, allowing users to access current news through the show’s detail page.
DISCOVERY
We began our discovery process with a tour of CBS Studios, before finding ourselves in a conference room. Meeting with key executives, we gained an understanding of their brand guidelines and their needs for the new site build. We also gained an in-depth understanding of their complex internal systems. CBS has a massive database of images, videos, and copy and it is highly secure, so we needed to weave our code seamlessly in with theirs adhering to the same security standards.
To kickoff our discovery meeting, we went through some exercises with the CBS leadership team to better understand their main site visitors and what information they are looking for on the CBSSI site. Knowing that their audience was predominantly interested in finding key information about the shows CBS distributes, we decided to take a simple yet highly affective approach to our UX strategy in order to support ease of use and information gathering.
before
UX STRATEGY
Ease of information gathering drove the UX strategy for the CBSSI redesign. CBS distributes a lot of television shows, so we needed to be able to push newer and more popular shows to the front of the site and allow for older shows or shows that are no longer in production to fall in line accordingly. In order to do this, we focused the homepage almost entirely on new and upcoming shows that CBS wanted to promote.
CBS needed a lot of flexibility for the homepage hero section. They made it clear that they wanted to be able to manage all homepage hero content themselves and each hero image needed to be different. Some hero images were just an image, some images required the addition of the show’s logo, and some images required the show’s logo, a description of the show, and a button linking to that show’s detail page. The challenge here was determining how this content would layout over the hero image so that copy was legible and all components played nicely with one another or were able to be hidden depending on the approach CBS decided to take.
Knowing that CBS distributes a lot of television shows (about 150 shows in total), we wanted to make it very easy for users to sort and find the show they are looking for, so we added some genre filters to the top of the show listing page. This made it incredibly easy for users to find the show they are interested in or simply browse by category.
BUILD
With our UX strategy in place, we started our deisign phase taking our simple and clean wireframes and applying styles to it that adhere to CBS’ brand guidelines. We made elegant use of the CBS “eye” employing it as a background element on each page. We also decided to use the font Helvetica Neue for its clean lines, which resonate with our minimalist design.
CBS was concerned about site security, so we decided to build the new site on Umbraco. This allowed us to create a custom site built with advanced security and a rigid, easily usable CMS. With Umbraco we were able to create custom fields and restrict what that administrator can and cannot edit, allowing them enough control to be able to add, remove, and edit content, but not enough control to potentially break the design.
Additionally, Umbraco includes a customizable blog allowing us to keep CBS’ news and media within the site allowing us to maintain the styles setout on the homepage and internal pages.
One additional benefit of using Umbraco is it allowed us to access CBS’ database of show related images, videos, and information and automatically pull that information onto show detail pages within the new website. Building the website this way allows for the administrator to edit or add a show to the database and for that show to automatically be added to the front-end of the website. Rather than adding information to the database, creating a new page on the website, and calling for that information, the entire process was automated once the administrator edited the database.
TEST & LAUNCH
The new CBSSI site build needed to be thoroughly tested for quality assurance. With 150 shows on the website, we needed to make sure all show detail pages pulled in the appropriate information from the database and that new shows were automatically added to the site once saved to the database.
Once the site was tested and everything was working perfectly, the site was launched on a brand new server environment designed to adhere to CBS’ rigid security protocols and allow for various degrees of traffic from a very international audience.
CLOSING THOUGHTS
Thanks to clearly outlined goals through our discovery meeting and a clear and concise UX strategy, we were able to elevate the CBSSI website on par with CBS itself. The new website is incredibly user friendly, informative, and responsive regardless of browsing device.
View Site Download PDFExplore our related expertise
Next up
