WGN America Website redesign and WordPress VIP build

wgnamerica.com — strategic design initiative for a more user-centric experience

Strategy
Creative Direction
UX Wireframes
UI Design
Art Direction
WCAG Accessibility
Style Guide
WordPress Development
Technical Consulting

Challenge

WGN America has faced challenges with their website and online content delivery. Many elements on the site appeared to be placed without clear visual thinking. The site was once managed on a propriety Content Management System that was outdated and difficult to operate. They made the switch to WordPress VIP and migrated content from the old platform to WordPress. This created problems with the codebase as well as other technical concerns.

These issues were compounded by a fragmented digital experience, lack of categorization, and outdated visuals.

Approach

We set out to elevate the overall network experience through an improved UI, better categorization of content, and more organized delivery. We wanted to create a seamless, unified, and branded digital experience truly representative of the WGN America brand.

The new website brings together everything viewers care about in an organized manner. Some of the old site’s best elements are carried over and enhanced in the new design to provide frequent visitors with a sense of familiarity. We also focused on creating a consistent feel throughout the whole website by defining rules that have been established for the new website’s aesthetics across all user interface elements such as buttons and dropdowns.

Visit Website

STRATEGY & DESIGN

Digital strategy for WGN America website.

We collaborated with several departments at WGN America to identify a set of strategic objectives and create a framework for the design initiative. The primary goal was to create a modern, user-centric experience for the WGN America audience.

To obtain stakeholder buy-in, we mapped out our vision for the entire experience with wireframes and prototypes.

UI design.

For the interface design refresh, it was imperative that we worked within the larger WGN America brand guidelines. The updated design was created to reflect a more modern approach and a friendly interface that showcases the content better.

We crafted a design which is easy-to-use and understand for older audiences with the use of big fonts, high contrast colors, and vibrant spots of color; which all come together to aid in accessibility and a quality user experience.

UI interface design for WGN America website

Overall color scheme.

The WGN America website primarily utilizes a dark color scheme for large background elements. This color scheme allows imagery, videos, and calls to action to easily stand out.

Black is used for the navigation bar as well. Exceptions factor in when you select an option (such as “Series”). The style changes to a lighter grey background around the text, along with a yellow underline to indicate that the option is selected. “Find Your Channel” uses the Pacific blue to stand out since it is the most popular feature on the website.

WGN America site navigation — The primary color of the navigation bar is pure black. Exceptions factor in when you select an option (such as “Series”). The style changes to a lighter grey background around the text, along with a yellow underline to indicate that the option is selected. “Find Your Channel” uses the Pacific blue to stand out since it is the most popular feature on the website.

WGN America primary buttons — The majority of the buttons on the WGNA website will be using the Pacific blue color. The blue buttons also include an arrow to indicate that pressing the button will take the user somewhere.

WGN America website play buttons — Buttons which lead users to videos are yellow to differentiate them from the other buttons. There is a gap of 2px between the “Watch Trailer” and the play button for stylistic purposes. On the video player, the play button will stand alone in accordance with standard UX practices.

WGN progress bar — On the Schedule page, a progress bar was placed below the time listing of the current program to indicate how much time remains in the program. This is programmatically generated by the system.

Current selections and up next indicators — The style for current selection and “On Now” indicators will largely follow the scheme used for the navigation bar selected items. It will use a variant of light grey (slightly different than the grey used for the navigation). The yellow underline is also seen for these items.

DEVELOPMENT

WordPress VIP development.

The WGN America website is hosted on Automattic’s WordPress VIP platform. This requires a much more stringent codebase whereby source code typically goes through a code review before being deployed.

We implemented custom blocks using the Gutenberg editor, which makes editing the site more intuitive and easier to manage.

By eliminating unnecessary legacy code and rewriting much of the codebase due to the design refresh, our efforts have led to a significantly faster and higher performing site, as well as a leaner codebase to manage.

The design refresh for WGN America website build is fully responsive and created with a mobile-first mindset. Although the growth of mobile is not unique to WGN America, we understand that many users visit the site on their mobile devices and use their channel guide to find upcoming airings of favorite shows. Thus, mobile was a major focus of our efforts.

WGN America website results.

WCAG 2.1 Accessibility Rating

55%

Increase in site speed

Load time in seconds

The WGN America website is a functional and beautiful Cable Network site that drives higher engagement with increased performance and usability.