Website Headers for 8 Local News Stations

The CX team identified opportunities to optimize the header on the ABC “owned” news stations’ platform. With engagement data, surveys, and user testing, we reduced the size of the header while still improving key user and business metrics.

Responsive header specs for OTV news stations

Stakeholder:

ABC “Owned Television”, eight Major Local News Stations

Problem:

The headers topping our eight websites pushed content down the page in favor of links and graphics that were rarely engaged with and provided no perceived value, especially on pages where highly localized content was only relevant to a reduced segment of traffic.

Goals:

  • Reduce the size of the header across screens, without damaging engagement
  • Elevate the relevant content, especially on mobile post pages
  • Increase video engagement
  • Create opportunities for future personalization

Approach:

This project reached priority because of the significant amount of data that validated our assumptions. Concerns with the size and relevance of the header were presented as missed opportunities for the business, and that theory was proven by the low percentage of elements engaged in click-testing and by broad-reaching surveys conducted across our user base.

The CX team was also concerned with the number of out-of-region visitors being exposed to locally relevant content and links on high-traffic pages. Leveraging business goals and user interests, we aimed to meet in the middle, improving the experience for everyone in an iterative design cycle that took over a year. We began with simple A/B testing of contextual prompts for available video types, and ended with multiple tests of a complete header overhaul.

Deliverables:

From internal conversations about wireframes, testing of those wireframes, live prototypes of those wireframes, and then more wireframes, we reached a design that we were comfortable making available to a segment of our users. From that point we were able to reduce the links and graphics in the header, while increasing engagement, especially on the, now more prominent, video prompt.


Tools: Sketch, Adobe Illustrator, HTML/CSS/Javascript, Zeplin