Looper.com & Affiliates

Web Designs for 6 Surging Media Brands

I developed website designs for a group of consumer media brands — Looper.com, NickiSwift.com, Grunge.com, TheList.com, Mashed.com, and SVG.com. The sites, owned and operated by ZergNet, contain a mix of editorial features and news content spanning different verticals including movies, entertainment news, gaming, women’s lifestyle, and food.

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, a lack of clarity in the information hierarchy in 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 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 home — desktop

Looper homepage (desktop) - phase 1 design

Looper home — article

Looper article (desktop) - phase 1 design

Looper home — mobile

Looper mobile - phase 1 design

Nicki Swift home — desktop

Nicki Swift home (desktop) - phase 1 design

Nicki Swift article — desktop

Nicki Swift article (desktop) - phase 1 design

Grunge home — desktop

Grunge home (desktop) - phase 1 design

Grunge — mobile phone

Grunge mobile - phase 1 design

The List article — desktop

The List article (desktop) - phase 1 design

Mashed home — desktop

Mashed home (desktop) - phase 1 design

Phase II Designs

While the new site designs were feeding into very 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 wanted to increase conversions with even larger images and text and to give 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.

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 featured 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 phone

Looper mobile

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)

Styleguides and 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 with the Photoshop Ink plugin, detailing exact values for margins, padding, fonts, colors, as well as CSS recommendations for every single element. I created a “base” set of specs for the generic template, and then individual sets of specs that would apply to each site. 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 100 documents created.

Global template spec document for desktop home pages

ZergNet site global spec

Looper spec document for desktop home page

Looper home spec

Im 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 site designs have been successfully applied to svg.com, mashed.com, and thelist.com and are poised to be rolled out across the remaining brands. The mobile designs have been also been ported over to Apple News under my design guidance.

Retrospective

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

ZergNet sites promo

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 try to get the development team invested.