Website designs for six high-traffic media brands

ZergNet Case Study Image

For one of the Internet's leading content recommendation networks, I designed the interfaces of six editorial/ news sites with content spanning movies and TV, celebrity culture and entertainment, women’s lifestyle, food, and gaming.

For one of the Internet's leading content recommendation networks, I designed the interfaces of six editorial/ news sites with content spanning movies and TV, celebrity culture and entertainment, women’s lifestyle, food, and gaming.

Skills

UI Design, Branding, Responsive Web Design

Tools

Photoshop + Photoshop Ink plugin, CSS

The Challenge

ZergNet’s Director of Digital Products, in charge of growing their media brands, tasked me with re-designing Looper.com, which had been running for close to a year, along with NickiSwift.com and Grunge.com  — soon to be launched from the same template. Looper was growing and already receiving a lot of traffic, but did not have an optimal internal click-thru rate, and because it hadn’t yet been touched by a “designer”, it lacked credibility as a premium brand. Some of the existing problems included a lack of aesthetic appeal and stylistic consistency, ambiguous information hierarchy on article pages, and an over-abundance of space allotted to certain modules and widgets, particularly on the homepage.

Old version of Looper

In the beginning, there were a number of constraints to consider, the primary one being that the product owners wanted to maintain the overall template and menu structure. In addition, a 300×250 ad on the article page needed to remain fixed at the top of the right sidebar, even as the user scrolls.

My Role

I was the sole designer on this project, responsible for fully revamping the user interfaces of Looper, NickiSwift, and Grunge, and designing three additional sites from the same template that had been developed. I also created style guides and worked closely with developers to guide CSS coding implementation and to run quality assurance testing before each release.

Phase I Designs

Given the high-level constraints on structure, I did a minimal amount of sketching before proceeding to Photoshop. As I re-designed each page, I made a number of identifiable improvements in addition to elevating the aesthetic appeal.

On the home pages, I initially split the top featured story into three modules in order to attract a higher number of clicks above the fold. I also introduced greater visual separation and contrast for the additional content immediately below the featured stories.

On the article page, I moved the section sub-headers above their respective images to improve organizational clarity and readability. I also incorporated an author name, twitter handle and date.

For desktop screens, I made room for additional content widgets to be immediately visible on the right sidebar by reducing the image sizes and keeping the design more open and clean. I introduced dividers to break up different types of content. On a more global level, I specified a consistent fixed site header with social media icons to be used on all of the pages.

With the exception of the logos which were designed by a third party, I developed each brand’s unique identity and gave each its own set of style rules for fonts, colors, headers, and dividers while working from the same overall template. Taking all desktop and mobile views into account, I generated over 100 mockups for five sites covering all pages and important views. In addition, I wrote CSS snippets and rules to aid the developers in translating the designs accurately. The following is a selection of the key mockups delivered in this phase.

Looper homepage (desktop) - phase 1 design Looper home — desktop Looper article (desktop) - phase 1 design Looper article — desktop Looper mobile - phase 1 design Looper home — mobile Nicki Swift home (desktop) - phase 1 design Nicki Swift home — desktop Nicki Swift article (desktop) - phase 1 design Nicki Swift article — desktop Grunge home (desktop) - phase 1 design Grunge home — desktop Grunge mobile - phase 1 design Grunge — mobile phone The List article (desktop) - phase 1 design The List article — desktop Mashed home (desktop) - phase 1 design Mashed home — desktop

Phase II Designs

While the new site designs were feeding into positive results for the brands, each of them experiencing rapid growth trajectories over the following several months, I was asked to continue refining the designs, including the overall template, while also introducing a dedicated news column on the Looper and NickiSwift home pages. The product owners sought to increase pages per visit (and hence ad revenue) by introducing even larger images and text and imbuing the sites an even more enhanced, premium look. In addition, the development and editorial teams wanted to reduce the number of different image sizes and image ratios to improve ease and efficiency in publishing articles.

In this second phase, I reconstructed every page template, revisited each brand’s design, and came out with a large number of optimizations. On the home page, I defined a new configuration of featured stories that allowed for a single landscape image ratio to be used while keeping three features above the fold. I designed a more fluid layout, letting the content areas scale to 1600px and article images up to 1000px wide. I boosted body text sizes across the board. I gave the sites a more sleek and efficient look by streamlining the color palettes, reducing the number of fonts and font weights used, and deploying thinner dividers. And, as an improvement to the article page UX and to boost social sharing, I introduced an alternate header with the article’s title and a Facebook share button that appears once the user scrolls past the intro image. Here are selected mockups showing the result:

Looper home (desktop) Looper home — desktop Looper article (desktop) Looper article — desktop Looper category (desktop) Looper category — desktop Looper mobile Looper mobile phone Looper article (tablet) Looper article — tablet Nicki Swift home (desktop) Nicki Swift home — desktop Nicki Swift article (desktop) Nicki Swift article — desktop Nicki Swift mobile (phone) Nicki Swift mobile phone Grunge home (desktop) Grunge home — desktop Grunge article scrolled (desktop) Grunge article scrolled — desktop Grunge mobile (phone) Grunge — mobile phone The List article (desktop) The List article — desktop The List category (desktop) The List category — desktop Mashed category (desktop) Mashed category — desktop SVG article (desktop) SVG article — desktop

Style Guides & Specs

Once the new set of 120+ mockups were approved for development, I wanted to ensure an efficient re-coding and translation process, so I devised a thorough, comprehensive set of spec documents by leveraging the Photoshop Ink plugin. (The plugin allowed me to easily detail exact CSS-compatible values for margins, padding, fonts, colors without checking and typing each value manually).

I created a “base” set of specs for a generic template that would be shared by all of the sites, and then individual sets of specs that would apply to each site alone. This way, the developers could easily separate global styles from site-specific styles which had been an issue for them in Phase I. Below is just a sampling of over the many documents created.

ZergNet site global spec Global template spec document for desktop home pages Looper home spec Looper spec document for desktop home page

In addition to the spec documents, I designed a more general set of style guides for the marketing and video teams to maintain brand fidelity.

Zergnet brand style guide 1 Zergnet brand style guide 2

Result

As of this writing, the latest designs have been successfully applied to all 6 sites. The mobile designs have also been ported to Apple News under my guidance. PPV (pages per visitor) and TOS (time on site) showed a notable improvement with the rollout of Phase 2.

Live Sites

Retrospective

The final designs, which serve six distinct brands, mark a vast improvement over the originals. The biggest upgrades in my view came from applying and enforcing consistent style and structure rules across each site.

When I began this design process, Photoshop was still my tool of choice for web design, and the one that the development team preferred as well. I found that one of the bigger challenges involved managing all of the design files in Photoshop. Much of my time was spent organizing folders and updating layer comps (something I did a very good job of doing), and I found that getting designs to be translated accurately in the browser required combinations of PSD handoff, rigorous spec creation, in-browser inspections, and active delivery of CSS corrections. By Phase II, the process was greatly improved, with a bigger payoff, as my spec documents helped the developers to create more efficient front-end code and to minimize translation errors. Nonetheless, if I were to start over, I would probably choose to design the project with Sketch and Zeplin, which together make for a better UI workflow and asset management system and work to get the development team invested.