Hearst: Television (HTV)

HTV delivers local and national news in nearly three dozen U.S. cities. The company and its employees have been honored with numerous awards for distinguished journalism, industry innovation and community service.

htv-opener.png

PROBLEM

HTV is using expensive technology for its CMS and it also has an outdated look which isn’t scalable anymore. For the next HTV phase, they collaborated with our team on a few things:

  • To migrate from an old CMS to Hearst's internal MediaOS CMS

  • HTV has it's own edit interface requirements which need to be reflected in MediaOS

  • Create front-end responsive website templates that can be used across all news stations

  • Build separate template apps for each news station

  • Existing third-party services need to accounted for (i.e. weather, school closing, etc.)


RESEARCH

The project was already started by HTV team. They asked our team to get involved based on our background in mobile and technology space. We discussed their findings on user research, project briefs, scope, stakeholders, etc. to get a grasp on the project in more detail.

htv-research-brief.png

IDEATION

An HTV contract designer had started on the wireframes. I reviewed the designer’s wireframes and discussed more optimal user interfaces especially in regards to mobile. I proposed a strategy to collaborate on all wireframes at once for the responsive site and native apps. Glad to not be swamped, we shared the work. I started cleaning up some of the wireframes to make them more modular.

htv-ideation-poll.png

PROTOTYPE

Once I set up a library of ui elements and components, I started redoing the wireframes for responsive and native platforms. The designer assisted in maintaining the library and began building additional prototypes using it’s components. This was we worked more efficiently.

Homepage With Flexible Modules

Homepage With Flexible Modules

Tables in Responsive Modes for a Results Page

Tables in Responsive Modes for a Results Page

Article Detail Views

Article Detail Views


DESIGN

Responsive View of a Lede Story

Responsive View of a Lede Story

This Shows Two Different Local TV Stations with the Same Mobile Template

This Shows Two Different Local TV Stations with the Same Mobile Template

Newsletter Signup on Desktop and Mobile

Newsletter Signup on Desktop and Mobile

Slideshows Shown on Mobile

Slideshows Shown on Mobile


DEVELOP

JSON File → Design CMS Section and Lede Story

HTV has external content populated in the feed. The backend model was updated to reflect that. I worked with a developer using their updated JSON file to wireframe the cms fields. This example shows a JSON file I received (1) for the lede. I used this to construct custom fields in MediaOS (2). Alongside I optimized my current lede design with different possibilities of the lede (3).

htv-develop-feed.png

Weather Section → Backgrounds and Icons

For the weather section design, I used available imagery and icons to create backgrounds and icons. These display across the site and apps. To create these, a mobile developer on the team demonstrated how to update backgrounds and icons in Xcode. So I worked in swift to create these. (Ex: a rainy night would show a rainy night background and a rainy icon on mobile apps and site.

htv-develop-weather.png

IMPACT

HTV was now in the Hearst CMS, so that made it more scalable and cohesive.The local stations gave feedback throughout the process. They are big on weather, so were glad to see a lot more emphasis on that as well as more customization. There was also positive feedback on the apps. With the amount of video content added later, the feed loaded slower.

htv-impact.png

Project

HTV update online presence and mobile apps

Goal

Design a responsive site and mobile app for 25+ Hearst local TV stations. Design coinciding custom CMS feature for editors.

Timeline

Fall 2014—Continued ‘till 2016

My Role

Wireframes; design iOS, andriod, responsive site; production; gather feedback across all stations in the nation and iterate designs accordingly.