wgnamerica.com — strategic design initiative for a more user-centric experience
- Creative Direction
- UX Wireframes
- UI Design
- Art Direction
- WCAG Accessibility
- Style Guide
- WordPress Development
- Technical Consulting
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.
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.
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.
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.
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.
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
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.