E! News

E! News delivers exclusive breaking news and in-depth celebrity coverage, red carpet livestreams, TV scoop and spoilers, lifestyle trends and tips, and what's viral now.

The project was a responsive redesign of the E! News platform that gets 30M+ unique visitors per month. The site needed to work on a single codebase for faster development and rapid content delivery to save time and dollars. The site used 2 separate codebases for mobile and desktop, with an outdated CMS platform causing delays in publishing and lost opportunities to automate content.

Client

NBC Universal Media LLC

Services

UI/UX Design

Industries

Entertainment

Date

March 2020

Project Links

Research

We started learning about competitors in the entertainment and media space. We evaluated their websites and analyzed layout and styles, patterns, and design specs on different breakpoints.

Next: UI Audit

Design Audit

We gathered and assessed all the components of our site with a design audit. This gave us all a better understanding of the front-end components we needed to rethink and design.

Next — Colors

Colors

We created mood boards with assortments of fonts, colors, and visual samples that conveyed impressions of authenticity, bold & adventurous, or modern and fresh. The site needed to be an seen as trustworthy, while balancing a pop-culture look at the same time.

Next: Typography

Text Styles

We chose Open Sans as our body and headline fonts, due to its readability accessibility, and since its an open-source font family. It also does check all the boxes in terms of conveying an authentic and trustworthy news site, and can made to have visual instances of color and 'pop culture vibes'.

Next: Widgets

Widgets

News widgets are content modules that give the content their structure, like a foundation or skeleton for the content be presented on the front-end. We took a mobile first design approach, since 80% of users were on mobile devices.

Next section: Navigation

Hero Widget Wireframe

A hero widget refers to a large hero image and corresponding story, with 5-8 additional headlines. The hero widget below is titled 'This Just In'.

Next: Video Widget

Hero Widget Design

Video Widget Wireframe

A video widget is encompasses a playlist of latest news videos on the homepage.

Next Widget: Gallery Widget

Video Widget Design

Gallery Widget

WIREFRAME

A gallery widget is a collection of recent photos in a carousel.

Next: Thumbnail List

Gallery Widget

UI DESIGN

Next: Thumbnail List Widget

Thumbnail List

WIREFRAME

Next: Navigation

Thumbnail List

UI DESIGN

Next: Navigation

Navigation Bar

We opted for a compact design that could contain many topics and categories, to give users better accessibility to the content they care about. News, Photos and Videos would be the default sections in the navigation. Editorial can curate more popular topics, and program them into the nav from the backend CMS.

Next: Main Menu

Main Menu

Shows and categories were the main priority on the menu. CTA buttons were added give users access to watch full episodes. Search, trending topics, social media channels, and footer links, were also added for quick access, and other promotional links to push subscription based content.

Next — Watch Hub

Watch Hub

The goal of the watch hub is retain users on the site, by recycling content to keep them watching. We enabled autoplay next video as a way to loop continuous videos from a playlist or related videos after the initial video ends.

Next: Article Page

WIREFRAME

UI DESIGN

Article Pages

Data from our analytics team suggested users were landing on articles from Google search, searching for celebrities and recent news. We aimed to retain users by serving related articles, photos and videos. Editors would tag articles, photos and other media, through our CMS, which would programatically be served upon viewing related stories or media.

Next — Results