Fox.com
Fox.com
Launch the Site

Check out Fox.com

As we analyzed FOX’s current offerings and researched the competitive landscape, we realized they were already leaps ahead of all the other American network sites. Starting with a product already at the top of the heap among its peers was both a blessing and a curse. We had to make substantial positive improvements while taking care not to introduce any changes that would detract from existing successes -- not an easy balance to maintain. We had our work cut out for us.

Project Screenshot

The key task on the structural side was to improve and enhance the navigational experience of the site. The trick here was to make several competing experiences work in tandem without overshadowing one another. On one hand there was a "core" site which served as a global overview and guide to all FOX shows. Then there was a separate "video" experience where users could watch the latest episodes and clips of their favorite shows. The challenge was to combine these experiences into a natural navigation flow but also preserve the unique identities of the individual show pages.

There were plenty of design-specific challenges to the project as well. Their strong advertising model required a lot of creative thinking within the existing model to keep advertisers happy with exposure levels but not diluting the user experience. Their current identity was perhaps a bit too dark, but they wanted to maintain their edgy visual identity. The design goal was to make the site simpler, clean and white, allowing the content to shine through the packaging.

FOX was very clear about their need to improve the video-watching experience on the site and our task was to create the best way to watch both short and long content in one place.

Site Audit

We started with a site audit of all current functionalities and requirements. A big network site like Fox has lots of requirements to keep in mind while designing, but the real challenge was to be innovative within the confines of the specific business requirements laid out for us by FOX. It was anything but a blank slate.

Competitive Analysis

From there we did an in-depth competitive analysis. We looked at all the other American network sites and figured out what they were doing well, and what they were doing poorly. We made sure to stay away from obvious mistakes, but there was also plenty of inspiration to be had for features and components that would truly enhance the Fox.com experience.

Features and functionality matrix

Once all the preliminary research was done, we documented every desired feature and component proposed for the redesign. Features were ranked by user importance and business importance and grouped into appropriate phases. Is a feature appropriate for phase 1? Is it better slotted for a phase 2 release? Decisions here were greatly assisted with guidance from the FOX team.

Information Architecture

When all interested parties reached a consensus on requirements, we laid everything out in black and white wireframes. Wireframes are a great tool and we use them in all our projects because it allows us to focus the discussion on structure and strategy without getting distracted by colors, typography and other “polish” details that will come later. It also helps us easily identify weaknesses in our own flows and thinking, and serves as a great tool to make mid-flight adjustments along the way.

Design

The FOX brand consist of simple shapes, bold types and transparency elements which needed to be enhanced and integrated throughout the visual experience of the site. Fi worked closely with FOX during the design stage to ensure the brand identity of the site was consistent with all offline elements as well. FOX and Fi met up periodically during this phase, face-to-face, to guarantee all business goals were met and every pixel was accounted for in the final design.

Development

Fi worked closely with FOX’s development team in order to bring the initiative to life. While the front-end was completely re-architected by Fi, FOX had to integrate with their existing back-end architecture to complete the build. Because the front-end is composed of several interwoven components, Fi took special care to clearly communicate with FOX about all the relevant functionality.

For example, Fi outlined the entire site schema with data relationships between the Brightcove architecture (video) and the new front-end. In the same regard, Fi also provided a data schema relationship outline which identified how the components would talk to the back-end. Other components were custom built in Javascript including an Accordion, Interactive Scheduler, Editorial Pod, Auto-Result Search Input, Infinite Carousel, Tooltips, Lightboxes and more.

An effective search tool is especially important on a content-heavy site like Fox.com, and Fi took on the task of researching Search Engine technologies like SOLR and Google Custom Search to find the best fit. After thorough investigation, Fi provided FOX with detailed documentation and flowcharts about how to implement the final chosen GCS product. Fi optimized the site’s architecture with SEO in mind, using proven techniques that have increased visibility for all our sites.

To make the site accessible for mobile users, Fi had to gracefully degrade all Flash elements to HTML, which required building an exact replica of the Flash homepage Editorial Pod using only HTML and Javascript.

The Result

The site is newly launched but Fi hopes to see a great increase in SEO and user satisfaction, and we hope our hard work and tough decisions helps the site become the primary destination for the millions of fans who love the FOX shows. Working with FOX was a great learning experience as well. For one, we greatly improved our approach to evaluating and analyzing user data which greatly impacts the overall strategy and approach. We learned how to work with a huge amount of video content and how to leverage swift loading HTML techniques to ensure the user feels a distinct sense of speed and performance while surfing bandwidth-hungry video content. We were able to design some tricky features such as the mini scheduler and came up with innovative ways to market multiple shows above the fold in a single marquee. The end product is a smartly designed and easy to navigate broadcast website that we feel is the industry’s finest.

Components

A collection of components from Fox.com

Project Icon

Client
FOX

Release Date
November 1, 2010

Technologies
XHTML/CSS
JavaScript
Flash
PHP

Similar Projects