Apr 28

Apr 28 Hulu Advertising Site

Andres Montano

UX, Visual Design

Project Goal:

Design, develop, and launch a new Hulu Advertising website in less than 6 weeks.

Deliverables:

Site Map
Info Architecture
Wireframes
Site Design
Development Direction

Why this was going to be challenging:

The previous site was built by an intern on the Hulu site team (who built it entirely on Ruby on Rails). We'd have to develop and rethink from scratch.
The Advertising org at Hulu is spread out over 7 locations across the country. If this site was going to serve the needs of the organization, then there would be a lot stakeholders.
There was no pre-existing visual design to jump-off of. In fact, this would be the first new Hulu Business page to launch outside of Hulu.com itself.
I would be designing all of this myself, and pulling together the content and strategy with the help of one project manager.
Because we only had 6 weeks, we would only have enough time for 1-2 rounds of design.
The site was going to be built from the ground-up in Wordpress. While this wasn't challenging, Design was 100% guided by the ability to be housed in a CMS. I was responsible not only for designing, but designing everything with "modular" and "dynamic" in mind.

Hulu Advertising 1.0 (The original version)

A few notes on what the needs were

Sales, Ad Solutions, Marketing, need to own, edit, and update content on this site whenever necessary. With 1.0, in order to make any updates, this includes both text or images, we would have to put in a development queue ticket. This ticket would compete with Hulu site-wide priorities and could take weeks.
Update design to exist under the new Hulu.com (2.0) design. Design was running off an old "Hulu 1.0" codebase. The brand and visual design was out-of-date.
Need a 100% responsive, device-agnostic site for a sales team always on the move. This site is shared or referenced by a national team of sales managers on a daily basis. Because it was web only, we weren't competing with other digital advertising competitors.
Address bounce-rates, time-on-site, and general "visitor flow" metrics. Metrics of the site indicated that there was a major bounce-rate problem on the homepage.

1.0 Design:

Collecting Intelligence

My Project Manager and I begin to meet with each Advertising department and hold interviews:

How do you use the Advertising site?
How would you like to use the site?
Who else do you think uses it? why?
What are some things you find challenging or wish were different?
If you had an open platform to tell your advertising story, what would you say and how might you say it?

After reviewing all the data we had, we partnered with the Ad Solutions department (the main business owner) to review. We identified enough so we could begin information architecture.

Information Architecture + Site Map

We asked stakeholders to review. Once we were good-to-go, we had our sitemap:

Wireframes

We began working and brainstorming with each partner to build out content for each page.

This was a pretty grueling process of starting big with expectations, then systematically killing butterflies as we scaled down each page to the necessary contents needed in order for us to launch on time.

With wireframes, I only did TWO rounds for the homepage and ONE round for the remaining pages. In order to keep on time, we had to move into design asap, but since the homepage need more work on what "story" we were trying to tell, I submitted a round two once I received feedback on how we should adjust content.

Wireframe v2 Homepage:

Design from Wireframes to Development

Remember when I said that one of the challenges of this project was to get this site live in only 6 weeks? We were getting near that point.

Because we were nearing our launch date, many of the pages were only 1-round-design pages.

Once we had a homepage, we delivered to our developer, had a dev-kick-off. As he built the homepage, we delivered a few more pages. Once we began those, we delivered a few more.

Final Design

Here's a look at some final pages, but before I do:

Success and Learnings

This version of the site lasted from January 2014 through May 4th, 2016.
This was the first Hulu Business page to launch since Hulu launched itself. It felt on-brand, but stood alone as a separate one: Hulu Advertising.
The entire Advertising org across the country, including the SVP of Advertising, was ecstatic over launch and re-set the habits of it's use.
Set the precedent for future Hulu Business pages including: Hulu Jobs and Hulu PR.
There were many "cart-before-the-horse" situations on this project. I learned how to navigate forward through them. A site with so many stakeholders was sure to have this problem, and it didn't fail. There was no time for pointing fingers or holding others accountable.