Nicholas Macias is a designer, and so forth.

I make cross-screen products that audiences experience billions of times per year. Resume.

Watch/Read: I led the first large-scale redesign of IGN’s editorial content since the advent of autoplay video, responsive web principles, and modern search/social behaviors.

In 2013, articles with video equivalents converted readers to watchers at a ratio of around 0.26 video views. This new design lifted the typical video view rate of a news package by +130%.

I brought a reader-style feed to every article, after discovering how few people ever saw the editorial programming.

Spreadsheets overtook the number of PhotoshopSketchFigma files on my Mac one day.

Edge cases are the rule in editorial and user-generated content design. Working with nearly twenty years’ worth of content led my team to developing “live” workflows in our early design process.

At the behest of engineering leadership, we supported a new, junior development team with a comprehensive, waterfall-style approach to documenting the new article design. It’s an 80 page love letter to Agile.

If IGN's VR-themed special edition for Snapchat Discover was an American prime-time show, it would have topped the Nielsen ratings the night of June 15, 2016 pulling in 4.5MM US viewers. We earned 11MM+ global uniques in 24 hours. Working closely with Snapchat's editorial director for tips on how to speak to the general Discover audience, our adaptability was rewarded with more than 100 million individual content views.

Ad Portaling: I developed a new ad technology that increased IGN’s viewable display yield by +27% in 2015. We coined it “portaling” for its allusion to the mechanism in the groundbreaking video game, Portal.

My team launched a digital TV station inside three months’ time, and if that sounds ludicrous, please know that it was. Named IGN1, the goal was to meet evolving watcher behaviors with a new tune-in experience, and we did that by stitching together both live & VOD programming into a 24/7 streaming channel.

Data and experimentation are critical to approaching an already-popular product, and not only to justify roadmap attention. Editorially-ranked lists, on topics like Sci-Fi Movies, or Video Game Moments, are so reliably popular for IGN that a 2008-vintage design had carried forward for many, many years.

Adapting this desktop-only Top 100 List content to its first mobile expression was a sheer project rationale, circa 2016, but a key story buried in the high pageview performance was how user counts were merely comparable to an above-average article or review.

Where Half-Life 2 features in a list as well as over 1500 articles across IGN, I recognized opportunity. Our strategy prioritized search and editorial promotion with an evergreen IA and a new visual branding system, braced by the insight that incremental reach held 6-10X returns over other experience factors.

A related experiment, from 2014, had established that removing explicit pagination could grow yield by +56%, while also improving the integrity of the reading experience.

As much as a video player might represent a “solved” UX problem, today, this wasn't always so. Building players from scratch in 2003 tought me some tricks.

Gamers are prone to pausing & rewatching moments in videos, and sharing screenshots from such. When designing IGN’s pause state, we made sure to keep the frame clear.

IGN reached a total of 8.5MM OTT app installs (Q2 2016) across platforms, including game consoles and set-top devices like AppleTV. My direct contribution varies by project, but all followed a key product strategy: these walled gardens are not like the Web, and IGN needed to invest the platform owners in our success.

One example of that strategy in action is the Playstation Store link in the IGN PS4 app, which was the first of its kind.

IGN’s Xbox One App was designed (with Wondersauce) to launch directly into video playback.

Snap panels are an exclusive feature of the Xbox One, and our app aligned well with Microsoft’s competitive story.

Our Xbox One design ran into a performance roadblock with Microsoft NUI requirements. I provided ancient Flash wisdom for a technical workaround.

At times, product goals are better achieved by internal organization, tools, and process optimizations.

To increase the sales value of IGN's live event coverage, I frequently directed (and occasionally animated) the visual branding of our event coverage, seen in many hundreds of millions of video views.

A designer on my team, Alex, wanted to learn React, and I saw an opportunity to solve a live video production bottleneck. Based on my prototype, Alex designed and built a browser-based tool that allowed a producer to quickly edit motion graphics overlays, output to an inexpensive chroma key switch.

GamerMetrics translates IGN traffic into a weighted score, a bespoke metric named the GPT, which is used by large publishers and media agencies to help plan their campaigns. I made sure it was friendly to screenshotting for pitch decks.

IGN commissions a bi-annual audience segmentation study from Ipsos. In addition to informing product & editorial efforts, the report has significant marketability with media agencies & client businesses.Way back in 2010, I adapted the underlying research into an infographic-style website, launching the story of gamers as influencers (more than introverts). I created everything, starting with the authoring the report.

I was told that I helped Typekit get funded, as they used my (webfont-enabled) site design for Jax Vineyards as a favorite slide in their pitch deck.

I designed an episodic digital companion product for a new children’s show, the WotWots, when Weta Workshop was originally pitching it to major U.S. television networks. Because kids are cognitively diverse—and sometimes, moody—I met the challenge of designing for 2–4 year-old attention spans with a persistent age control that could dynamically adapt the experience.

Before iPads, parents were wary of ceding their sole home computer for endless periods. I put parents back in control of the schedule through a clear “goodbye” sequence that saw the WotWots tucked-in, then shipped off to outer space.

IGN Article redesign, montage of responsive states. Roles: director, designer, product manager
IGN Autoplay Video UX design and reseearch. 4% of article views were in Read-only mode, while 7% of impressions elected to Watch immediately. 89% fell back to a countdown UX.
Just 16% of the desktop audience ever visits the IGN homepage, a trend we predicted and preached as 'The Article is the New Homepage.' The Covercard: slotted by the homepage editor, providing global promotional reach. The Spine: carries a reader-style list of top content from the home feed.
Responsive Web Design? No, Adaptive Web Sales Team Negotation. An animation illustrating the complicated math of fixed-size advertising and responsive web template design.
At left: Many states of a preview card design system for games media database objects. At right: A screen-recording of a custom design tool, captioned: We designed headline typography scales in-browser, evaluating hundreds of real IGN headlines from the live article API.
Thumbnail overview of a large design deliverable, titled IGN Watch/Read Design Documentation. 2014, team credits: Justin Vachon, Gian Cruz, Chelsea Cropper
Preview of IGN's Snapchat Discover edition titled How VR Will Change Your Life
Visualization of ad unit viewability, that features a large-text label of 55%, representing the baseline ad viewability of IGN. The number is overwritten to 70% and a thumbnail of a product brief I wrote that achieved that improvement.
Visual overview of IGN Top Lists, a 2014 in-market experiment resulting in +56% more daily ad impressions, after consolidating paginated list content into a long, scrollable view. Team credit: Justin Vachon, Mark Ryan Sallee, Alex Gennette, Gian Cruz
App screens for IGN Top Lists, showing a page transition UX between list index and item article, and two screens showing search autocomplete. 2016, Team credit: Justin Vachon
Desktop web screens for IGN Top Lists. 2016, Team credit: Justin Vachon
Visual overview of IGN Top Lists, a 2014 in-market experiment resulting in +56% more daily ad impressions, after consolidating paginated list content into a long, scrollable view. Team credit: Justin Vachon, Mark Ryan Sallee, Alex Gennette, Gian Cruz
IGN Video Player interaction detail (menu hitbox buffers, similar to safety triangle UX). Dated 2012-2016. Role: design, prototype
Side-by-side [A] IGN's video player, where the video controls fully hide when the cursor moves outside the paused frame, and [B] YouTube's player as an example of a paused state with controls overlay the video image. Gamer audience frustration with the latter is communicated with a demo Google search for the phrase 'screenshot paused video'
Screen capture of the IGN PS4 app with a PS Store link to the game tagged in the example video.
Montage of the IGN Xbox One App UX, 2014. Design team: Mark Ryan Sallee, Michael Yap (Wondersauce), Molly Sugar (Wondersauce)
Screen capture of the IGN Xbox One App in split-screen alongside a TV commercial break in a third-party streaming app.
Showing how 60fps was achieved in the IGN Xbox One app, where a wraparound menu design challenged performance goals due to Microsoft NUI (Kinect) requirements. The overhead of dynamic UI components made the menu unusable. The solution, to blit menu items into a single texture and render them behind a fixed set of transparent buttons, was credited to ancient experiences I had with Flash hackery.
A design system of modular, vector-based character animations created for IGN Live San Diego Comic Con Event Branding 2015, Team Credits: Alex Griendling, Adam Baranblat.
A functional demonstration of the IGN Live Real-Time Graphics Editor, showing two browser windows where a CMS change updates on rendered video chyrons. 2015, Team credit: Alex Gennette
GamerMetrics 2.0, 2013, Team credit: Gian Cruz.
IGN Audience Segmentation Study (IGN/Ipsos Research), showing a long-scrolling infographic with paper-model character designs. 2010, Role: author, design, illustrator, development.
Website design for Jax Vineywards, 2007-2010. Role: label design, site design, art director, copywriting, development. The Y3 label design has a complex hole-punched perforation and there's a picture showing the winemaker's daughter playing with the roll of labels to help shake out stuck punches.
Site design mockup for Weta Workshop's show The WotWots, circa 2007. Feature labels include dynamic age setting, episode-aligned activities, and a parent-friendly timebox for the experience. Role: strategy, UX, art direction, visualization.