Case Study

Variety

View Website

Entertainment news, film reviews, awards, film festivals, box office, entertainment industry conferences.

Intro

Variety.com features breaking entertainment news, reviews, box office results, cover stories, videos, photo galleries and more, plus a credits database, production charts and calendar, with archive content dating back to 1905.

Variety redesigned their website from the ground up in the fall of 2017. The goal of the redesign was to place a bigger emphasis on the stories which are had picked by the editors to create a more curated experience. The site was given a new look, with every page being touched in the process to reflect the new experience.

Services

Web Design, Art Direction, UI & UX

Clients

Penske Media Corporation

Color & Texture

The previous iteration of the website was flat and a bit monochromatic. With the redesign I wanted to introduce a secondary color into the site. This accent color was yellow which was pulled from the magazine edition with the intent of better unifying the two products.

Yellow

#FFEC00

Black

#000000

Diagonal Lines

Texture

Austin Text
Graphik

Typography

For the typography of the site I mixed the sans-serif font Graphik with the serif font Austin. Graphik was used prominently throughout because of it’s modern curves and high legibility form factor. To create some more flair and variance with typography Austin was used throughout.

The Designs

Homepage

The homepage design was a big departure from what Variety previously had. The page was redesigned from the ground up to make the bulk of the experience a curated affair. This allows the editors to highlight the stories they feel are the most newsworthy at that moment in time. The typical news river still remains but now lives further down the page and is simplified with headlines only.

Previously the Variety site relied heavily on right rail modules to promote additional content like their real estate news, videos and photos. In the redesign I wanted to make these apart of the core experience. The end result is large and prominent homepage sections for these special types of content.

Article Page

The article page is where most users funnel into the site. With the hope of driving user engagement the page includes a few key areas to entice the user to read another story after they are finished with the article they are on. The navigation of the site shrinks down to be a persistent navigation and displays a related story. Related stories are also added as a floating module near the end of the article.

Due to the advertising requirements of the brand I had to find creative ways to promote more engagement. The bottom of the article page features a grid of stories from the vertical which you the user is currently browsing.

Section Front

Section front pages were designed to stand out from tag pages by featuring articles at the top of the page in a large format. The scale of these stories is intended to create a feeling of importance and highlight the best content of the day from that category of content.

Gallery

The gallery was designed to make full use of the users screen real estate. Since there are no wallpaper ads directly sold on this template I was able to go full width the images — maximizing their size to enhance the experience.

Site Navigation

Variety’s vast coverage of content required a navigational menu which allowed users to discover all the different sections of the site. The result was the ‘mega menu’ which overlays on the screen after the user clicks on the hamburger menu icon. From here a user can find any section of the site and easily navigate to it.

Mobile Designs