CLIENT

MTV

ROLE

UI, QA

 

The MTV News Team covers news from a variety of topics from music, politics, style, celebrity, and more. As part of their strategy, the editorial team wanted to feature the more relevant and long-form content from writers at the top of the page to make it more available to users while also keeping it differentiated from the latest news. Our inspiration for redesigning this experience was under the theory that our users benefited more from finding content through better scanability.

mtv-news-promoted-posts-desktop-pagesmtv-news-promoted-posts-desktop-pages

A/B TESTING

We started our first round of design solutions for the News Hub Promoted Posts via the mobile site (our largest source of traffic.) After conducting A/B tests with designs that had 1) the headline moved, 2) carousels, 3) blended content, and 4) labeled flags, our tests proved that the easiest scanability for our users was moving the headline off of the image.

promoted-posts-mobile-AB-testspromoted-posts-mobile-AB-tests

REDESIGN GOALS

The original design placed the news headline directly on top of the article photo. Since the majority of the articles feature images of people's faces, these headlines were covering people's recognizeable features like eyes and mouth making it diffucult to recognize the person. Our users were being forced to read the headlines for information instead of being able to quickly scan images to find news relevant to their interests. By rearranging the content to keep the headline large and prominent while still connected to the featured image, and without covering the eyes of faces, the click-through rate of featured posts drastically increased, driving more traffic to the promoted posts.

mtv-news-promoted-posts-before-after-designmtv-news-promoted-posts-before-after-design
[unex_ce_button id="content_kxuyoynjl" button_text_color="#ff6464" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://www.mtv.com/news/" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VISIT MTV.COM/NEWS[/ce_button]