Case Study: 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 IA

Oversee documentation and delivery

To start out:
Get aligned on value of content, goals and KPIs

We knew going into the project that a lot of the content wasn't working. We could have spent weeks analyzing why, but instead we brought those thoughts into an open conversation with the client early on. With key decision makers and subject matter experts in the room, we determined together what would stay and what would go, setting the project up for success.

Write and Prioritize
Product Requirements

Listing assumptions is fun, but on this project, it was a life saver. 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 sadly 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

Tricky project challenge: 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

 

Collaboration between UX and UI was very close and very important to this project. I loved seeing my ideas evolve and improve over multiple iterations as I worked with talented team members.

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.