Case Study A Spiceworks First: Online Publication


IT Budget Report

Project Stats

  • Project Timeline
  • October 2014 – January 2015
  • Site Metrics
  • Unique Pageviews: 2,166/month
  • Avg. Time on Page: 7:40
  • Tags
  • Art Direction, Website Design, Interactive, UI, UX, Illustration, Photography, Project Management, HTML, CSS, SASS, AngularJS
Visit the Site

The challenge

Each year, the IT Budget Report lives as a PDF two-page spread that tech marketers can download and read. While this was well and good, there was not a lot of insight into what parts of the report were actually consumed. We needed to bring the insights of the Spiceworks platform out from under the old distribution model and leverage technology to highlight it.


The solution

Spiceworks has access to 6 million IT pros from within its network. With so much rich data to be delivered; why not pair that data with unique and stunning photography and wrap it in a micro-site online publication sort of format?

We knew that we wanted to separate content out into "chapters" and that there would be some kind of navigation to guide the user from one chapter to another. After many iterations, it became clear that we needed to implement angularJS to serve up dynamic pages that transitioned in and out – much like reading a story – except that we made the pages come alive.


Wireframes

Early sketches of how the content could be laid out.

Wireframes

Mock ups

Navigation totally not figured out yet, transitions between "chapters" had not yet been determined.

Wireframes

Animation Study

To figure out how to best transition between the various subpoints of chapter 1, I utilized After Effects to try to capture what I thought was a good way to get around.


Higher Fidelity

Wireframes

Navigation Components

A lot of work went into getting the navigation states just right. Upon scroll, the side navigation would become thinner and unobtrusive. Even though the PDF of yesteryear was to be seen as a relic, based on feedback and user testing, we found that users still wanted a PDF copy so that they could share the content with their superiors and/or their colleagues.

Wireframes

Optimized for mobile

Analyzing the site traffic, we knew that less than 5% of all total traffic came from a mobile device of some kind. Because of this, we weren't completely concerned with sharability via mobile devices. What we were most concerned about was, however, consumability of content. Our assumption was that other tech marketers out there would view this site on a desktop and send their colleagues that link. And if the recipient was on a mobile device, that content, no matter where within the report they were, would be able to have access to it and consume the content as quickly as possible.

Wireframes