Friend of the Press: A Comprehensive Website Redesign that Captures Attention

"I edit images for the news, using Adobe Lightroom, ProCreate."
- Professional Journalist (US)

Using this information, Hulu built a foundation for understanding their audience and were prepared to develop opportunities that fit in line with their customer’s needs.

High-Fidelity Wireframes and Visual Design

The design phase focused on aligning the press site with Hulu's branding, ensuring a visually appealing interface that was also functional and user-friendly. Modern UI/UX principles were applied to guarantee a seamless experience.

Three variations of the Hulu press site homepage were created, each utilizing brand elements in a different way throughout the contentTo incorporate audience feedback into the wireframing process, we gathered emotional reactions to our design variations along the way to understand how different visual elements impact user experience.

Green brand elements used for emphasis in the hero increased anticipation on the page by up to 12%.

After observing and interacting with one of the designs, participants were asked to indicated what feelings the experience elicited from a selection of 8 emotional reactions:

We found that homepage version 3, which incorporated less green brand elements into the hero content, performed significantly worse in terms of producing positive emotions for visitors. Keeping negative emotions below 10% is important for maintaining positive impressions with an audience, so spikes of over 10% in fear and sadness, and a 12% gap in anticipation, is a clear signal that version 3 was not engaging for users.

For the other 2 versions that showed high anticipation and low negative impressions, the sum of their positive impressions were within 5%, which is practically equal. 

The team moved forward the version 1 of the homepage due to its equal positive impression with V2, and the reduced need for build-out in the backend due to a simpler design than the complexity of version 2.

Prototyping and User Testing

Early prototypes of the redesigned press site were developed, emphasizing ease of use and engaging content presentation. These prototypes underwent several rounds of user testing, gathering feedback for iterative refinement. This phase was crucial for validating and ensuring the design met user expectations.

As low fidelity wireframes of new pages were designed, we put each to the test using Helio interaction testing and a framework called the Interaction Matrix.

We asked 100 participants to interact with each design based on directives that were provided, each reflecting a goal that the user might have on the page. For instance, finding where to access images for use in written articles is a key action that users need to be able to take on the homepage:

Five directives were presented to participants to test the usability of the homepage, each representing a primary, secondary, or tertiary action on the site. Primary actions are the most important CTAs on the page, while tertiary actions are necessary links that don’t need to be emphasized on the page, like access to news releases. 

The success of the audience to complete each directive was entered into the Interaction Matrix framework, and then color coded to paint a picture of the usability across the experience. Bright green boxes represent actions that tested above expectations, pale green are average, and red actions need improvement.

Users need more clear access points to gather images from their content of choice.

Upon testing the first 4 versions of the press site homepage, the team found that users were having trouble with the primary actions on the page, such as finding latest Hulu Original shows.

We determined that users were choosing to seek out the content they need for their work based on the title of the work rather than categories like ‘images’ or ‘originals’.

We continued this iterative process of tweaking the wireframes and testing the usability until we began seeing success of the primary actions in versions 6 and beyond.

Finally, with the 8th version of the Hulu homepage, the team saw the usability success they were hoping for across their primary and secondary actions.

The new version of the homepage provided more pathways for users to access the content they need by navigating through the title of choice, rather than reaching a ‘visuals’ page and then filtering by title from there.

The Interaction Matrix testing on Hulu’s homepage gave the team confidence in the usability of their new site experience and excitement to move towards their final tweaks before launch.

Launch and User Adoption Strategies

Preparation for the launch included the development of marketing materials, user onboarding guides, and support resources. Strategies to encourage user adoption highlighted the benefits of the new press site, addressing potential concerns and leveraging Hulu's brand trust. Post-launch, the team monitored feedback and adoption closely to refine and improve the site as needed.