Interactivity with an agenda
Strong interactive designs deepen the users understanding of the content.
Tasked with creating a frame for Wired.com's video documentary about the creation and installation of the epic-scale kinetic sculpture Nebula, I conceived and developed an interactive structure interweaving parallel stories along a central narrative timeline.
The objective of the interactive design was to convey to the user the breadth and complexity of the Nebula project.
The documentary produced by the Wired video team defines the main timeline of the experience.
Characters and topics are lifted from the main timeline to become topics of shorter secondary video vignettes.
Key points in the the main timeline spawn graphical links to the secondary vignettes as the user watches the documentary.
Clicking a link pauses and reduces the documentary. The selected vignette expands, and as it plays it spawns a third-tier of vignettes.
U.I. and transitional animations help reinforce the relationship between the video vignettes and the points along the timeline which spawned them—understanding the interconnectivity of the stories was a key design goal.
The interactive structure of Wired Nebula allows users, through their choice and actions, to peel away a larger narrative embedded in the main documentary. At the same time, it gently constrains and directs user choice as a way of influencing the viewing sequence of videos and managing their relative positions in the display.
Interactivity excels at illustrating the operations of systems.
Giving people control of the system variables and providing rich engaging feedback for their actions provides a depth and nuance to the learning that is difficult to equal with words alone.
In May of 2010 Wired magazine introduced, Equation, a new monthly feature to examine the mathematical formulas underlying systems and phenomena which people encounter daily.
I conceived and produced a series of interactive pieces that would allow people to set key variables in the formulas and provide feedback for their actions through an animating graphic that changed state in accordance with the rules of the formula.
The first Wired Equation examined the Kaya Formula, a method of calculating the amount of CO2 human activity produces in the Earth's atmosphere by correlating four key factors: global population, consumption per person, BTUs per dollar, CO2 per BTU.
Sliders above each of the variables allow users to set the value and thus alter the formula's output. The changing output is graphically represented through an image of Earth in which the atmosphere can transition from clear to dark brown, depending on the user's actions.
In another instance of Wired Formula, users manipulate sliders to set values in a formula used to explain the phenomena known as phantom traffic. A top-down view of a highway animates from nearly empty to impossibly congested as the user plays with different values.
Playing with various combinations of values users gain a practical knowledge of the operation of the formulas.
Because their own actions drive the outcomes, users internalize the learning better and because the experience is designed to delight they spend more time learning from it.
Interactive integrations are strongest when user actions generate meaningful outcomes.
The February 2012 issue of Wired carried a short article about a bit of geek culture known as the Konami code—a defined sequence of button presses originally used to unlock power-ups in the game Gradius.
To help create a meaningful interaction in this example I posed the question, "How couled we empower Wired.com readers in the way the original code empowered Gradius players?"
Kill the ads!
In the online version of the article, after readers enter the code (up-up-down-down-left-right-left-right-b-a-enter), an 8-bit style robot shoots quickly from the left edge of the screen, pauses short of the right sidebar, and blasts an ad units. Repeat…
User reaction to the Konami robot piece was super positive—everyone hates ads and loves robots with lasers.
Creative and meaningful outcomes to user actions give interactive work a sense of purpose.
Deeply integrated game mechanics
When game elements are distributed directly into content, in highly integrated ways, design and production iterations happen quickly.
The Curse of Cow Clicker was a Wired article about a satirical game, Cow Clicker, by persuasive games evangelizer and indy game provocateur Ian Bogost. The Wired article chronicled the unlikely success of Bogost's game which he created as a critique of the type of online games he sees as manipulative and shallow.
Experimenting with a radical approach to game integration I created an experience for the feature about which Kotaku said, "Finally, a video game article that is also a video game."
Bogost's game centered around the compulsive clicking of graphical cows and the essential meaninglessness of the action. Wired.com's game should echo Bogost's ideas, but transpose them fully into the context of a web-based magazine article.
My solution was a game whose rules and parameters are bound to the rules of the article as a web page and as text.
Players click the word "cow" to spawn graphical cows. The maximum score, 97, is the number of times the word "cow" appears in the article. The type, relative size, and position of the spawned cow is determined by where in the text the player clicks. Spawned cows cover up unchecked instances of the word "cow".
Bogost used Facebook activity spamming to comment on the way some games propagate themselves through spammy activity notices.
To echo this theme (and help promo the article!) I devised a cheat allowing players to reach scores beyond the 97 instances of the word "cow".
Players remove cows from the screen by sending them to their Facebook friends. Removing cows in this way exposes instances of the word "cow", thus making them available to be clicked repeatedly. A player's score is limited only by their shamelessness in spamming friends and their compulsive need to click.
Thinking of the online article itself as the game's "field of play" not only created a neatly integrated game woven into the actual text of the story, but greatly reduced production requirements. I was able to produce this game from concept to launch in less than three days. A stand-alone game such as Cutthroat Capitalism consumes many times that number of production hours.
The rules and mechanics driving a game can be distributed across and integrated into other systems or content. When executed with a strong editorial sense this implementation provides a meaningful user experience and can be produced quickly.
Deeply integrated games leverage the player's drive to master the system as a means of connecting them to ideas and points of view.
The July 2009 issue of Wired carried the feature Cutthroat Capitalism, an info-graphic driven explanation of the economics of Somali piracy.
I conceived, designed, and developed a game which attempts to simulate the systems described in Cutthroat Capitalism's graphs and formulas.
Cutthroat Capitalism: The Game puts players in the role of a pirate commander staked with $50,000 and a three pirate crew. The objective is to amass profit and crew by mastering the choices generated by the game system.
The Attack screen is a top-down view of the Somali coast and the Gulf of Aden. Merchant ships, represented as variously colored dots, stream out of the Suez Canal. Player's initiate attack by clicking a merchant ship, then clicking anywhere on the map. This sets a waypoint and the pirate ship immediately begins sailing towards it. If the selected merchant ship and the pirate ship intersect an attack simulation is run.
If the attack is successful players move forward to the Negotiation screen.
The Negotiation screen is a set of sliders, buttons, meters, and message screens allowing players to set ransom demands, apply persuasive tactics, and get feedback on their effectiveness.
The player's objective is to maximize ransom payout while wrapping-up negotiations before the Navy is called in.
Player choice effects the outcome of each round of negotiation. Being threatening can help move the counter-offer towards your demand, but it negatively effects trust. Feeding hostages builds trust, but your pirate crew will mutiny if they think you've gone soft.
Success on both the Attack and Negotiation screen requires the player understand the effect their actions have on the operation of the game system. This sort of nuanced understanding of Somali piracy was the editorial objective of the article.
Games persuade and teach. Their rules and interactions can be developed to support ideas and points of view.
Deep integration of games with educational, editorial, or persuasive objectives means developing game systems representationally—working with rules and player choice as elements of language.
Simple game mechanics can be used to motivate behavior and drive players to productive action.
In September of 2011 Wired carried the feature, Lost: The Definitive Guide to Pop Cultures Lost Treasures.
In bringing the article on line I proposed creating an editorial frame for the article that could act as the natural rejoinder to "Lost"—Found.
I conceived, designed, and developed a mission-oriented community focused on recovering lost pop culture relics and driven by integrated game mechanics.
Wired Relic Wranglers is a community of groups, each focused on recovering a specific "lost" pop cultural item.
The "wrangling" is driven by challenges posted to a stream at the top of the Relic Wranglers website. Members compete for points and rank up by completing challenges.
Not every engagement requires a leaderboard. Sometimes "achievements" aren't.
Experience, creativity, and a thoughtful understanding of the integration subject lead to games that excite and illuminate.Production at newsroom speed
In the Wired newsroom, production is driven by events.
Delivering ambitious work under deadlines measured in minutes requires cool minds and the confidence of experience.
When Steve Jobs died, work on a memorial wall takeover of the Wired.com homepage was not yet complete. The mechanism for managing the new template was not in place.
Working directly with another editor I quickly set up an ad hoc system for replacing the homepage and hot patching memorial quotes from the likes of Bill Gates and President Obama as they came in.
The next morning our work was widely cited (nytimes.com, washingtongpost.com) as the strongest response on the web.
Great work depends on creative and decisive solutions to production challenges.
Production at newsroom speeds means taking projects from conception, through design and development, to live in hours.
In January 2012, as the U.S. Congress considered the Stop On Line Piracy Act (SOPA) Wired.com joined dozens of other leading websites in observing a day of self-censorship.
The plan was for the Wired.com homepage to appear in redacted form—all the content present, but individual words and images blacked out.
Additionally, two "Uncensor This Page" buttons toggle the state of the page, revealing the unredacted content.
In a final "Wired" twist, clicked "Uncensor" buttons become "Censor This Page" buttons—playfully turning reader into censor.
The Wired.com editorial and design teams, that developed the treatment, were finalizing mockups a few hours before start of the protest.
Implementing Wired.com's interactive SOPA protest in hours required an immediate sense of what could be accomplished in the time available. Leading the implementation, I made on-the-fly feature adjustments and delivered the much praised protest homepage on time.
Experience and production discipline allow for rapid implementation of award winning work.
Lean start-up methodology emphasizes speed through the development loop—build, measure, learn.
In The Lean Startup former IMVU CTO, Eric Reiss, stresses a rapid development environment of constant iterations, driven by metrics and good judgement.
At both IMVU and There I worked alongside Eric in the development environments that germinated his thinking regarding lean start-up methodology.
As part of a three developer team I helped build an early first iteration of IMVU Games.
We created a basic game template with a default pirate theme that would allow our user-developers to theme-up their own games.
This approach allowed us to ship a minimal product which our dev community could help extend and experiment with. Within days of shipping we had over a dozen versions in the IMVU store.
As lead on the first IMVU Groups implementation, the metric I sought to drive was user retention.
Collecting user data on early revs of Groups allowed us to identify which features to develop further and which to drop.
When the initial project ended we saw significant uptick in buddy requests and daily visits from users exposed to the Groups product.
Rapid turns through the development loop informed by critical use of user data lets a project deliver real value to users by executing on the right features.
As editor of interactive news technologies at Wired.com, Shannon Perkins facilitates the integration of print and online media and leads the design and implementation of interactive products that help readers better understand and synthesize the news.
Before coming to Wired.com in 2008, Perkins spent over ten years in Silicon Valley startups helping to develop new categories of consumer products including mobile applications, an avatar-based chat client, and the worlds largest catalog of virtual goods.
Rapid ideation and iterative development. Deep integration of game mechanics that drive engagement. Rapid design and deployment of API leveraged web apps. Development of editorial interactivity—UX that informs.
PHP, MySQL, Javascript, HTML5, CSS3, JQuery, Git, Ruby, Rails, Photoshop, WordPress theme and plug-in development, Heroku application development, Flash/Actionscript.
Authoring personas, scenarios, and use cases as part of user centric development process; rapid design and execution of early and ongoing usability tests.
BFA Winter 1999, San Francisco State University, magna cum laude, Information Arts and Conceptual Design department.