TV Network Responsive Website

Make it responsive, templated, and do it quick

A major TV network needed a responsive redesign that would allow users to watch TV online after authenticating with cable credentials. They also needed the site to work across their 9 networks, and in time for the launch of a new ad season. Lots of things that could go wrong did, but we still delivered, and with a bit of time to spare. 

My responsibilities

  • Lead workshop exercises
  • Write requirements
  • Content inventory
  • Wireframes
  • Site information architecture
  • Oversee documentation and deliver

Where we started: Alignment on goals, KPIs and value of content

We knew going in that a lot of the content wasn't working. Instead of tip toeing around that question, we brought it into the open during a collaborative workshop. We emerged with clear direction on where we should focus our efforts and what should be deprioritized. 

Write and prioritize product requirements

Screen Shot 2016-04-09 at 11.13.32 AM

Listing assumptions was a life saver on this project. With such a short turnaround, we were forced to make many assumptions just to take the first step. Instead of hiding that, we were transparent with the client about what we knew, what we didn't, and the risks involved. These assumptions could be validated with testing at a later stage of the project.

Wireframe around user journeys

Ideally, we would create user journeys and flows based on our own research, but that's not possible for every project. Based on what we did know and some prior research, we created five journeys to build empathy with users. These journeys were critical to imagining mental context and providing the right content to the user at the right moment. 

Five user journeys like this one eventually became the project's wireframes.

They put a human face on boxes and arrows,

and insured that our designs existed in a context.

Screen Shot 2016-04-09 at 11.44.03 AM

Challenging moment: navigation design

The client had PTSD from a double (and in some places triple) stacked navigation on their old site. This made them extremely wary of anything that took up screen real estate on the page. We presented them with 3 streamlined options, along with pros and cons for each, successfully leading them to a decision that addressed their concerns. 

Check out how nav wires became design:

 

Blog Innovation

With its internal navigation structure, a blog can be a whole site in its own right. We significantly streamlined this for two reasons: 1) because users overwhelmingly land at the blog via SEO, we weren't convinced that people actually navigate this blog via top level navigation and 2) timeframe called for simplifying IA. Our solution was to create a 'load more' experience at the bottom of posts that allowed users to discover related content if they happened upon a blog post they liked.

Document Site Structure

While we were tracking the site structure throughout the design process, as we wrapped up it was time to increase the fidelity of the sitemap. Doing this too early would have meant many time consuming changes.

Tie it up with a bow and deliver

Working backwards from what will be delivered is the only way to meet timelines and not die on a project like this. We knew exactly what we were building up to a few weeks before delivery date, and made it to the finish line stress free.