Moleskine 04: Further refinements of the interface. Drawing on right shows affordances and triple encoding of played cards: color, location and context.

In addition to sharing the design process and concepts, I also hope that this will serve as a forum for feedback and suggestions, not just from peers and colleagues, but also from thought experiment participants. All comments, critiques and suggestions are welcome in the comments section of this post.

[Before you get bored with all this text, there are lots of pictures down below.]

Project Overview

Client: Institute for the Future
Game Concept & Design: Jane McGonigal
Scenario Development: Alex Soojung-Kim Pang
Scenario Research: Signtific & IFTF Staff
Chief Signtist: Mathias Crawford
Signtific Team: Jane McGonigal, Mathias Crawford, Natalie Villalobos, Cesar Castro, Alex Soojung-Kim Pang
Technical Architect: Afraaz Ali @ Appnovation
Drupal Web Development: Appnovation
Timeline: December 2008 - February 2009 (approx. 8 weeks)
Hard Deadline: Webstock keynote address, February 18, 2009
Public Launch: February 18, 2009
First Day Stats: 1,414 cards played / 202 players from 5 continents / 2,295 unique visitors
URL: http://lab.signtific.org

Principles

1. serious science
2. does not appear to be a game
3. play fast
4. tweet-length to make contributions less daunting and easier to riff
5. scan card text fast
6. reload page obsessively to watch score
7. 100s of simultaneous players
8. conference key note announcements to launch
9. players can play as many cards as they like
10. video introduction
11. content managed by game masters
12. cards can be embedded on blogs
13. cards have their own urls
14. experiments have limited timeframe
15. publicly available in read-only mode afterward
16. game masters can ban players and remove all their cards
17. game masters can highlight cards
18. optimized for google analytics and seo
19. javascript support required, degrading ajax is not
20. let content stand on its own
21. avoid popularity and digg effects

Description
[You may want to skip ahead to the mind maps and wireframes at the bottom of this post, and then refer back to this text description. My words may fail where my diagrams succeed. You may also refer to this blog post titled "I Want: Signtific Lab" by Nikki Pugh, which provides a clear, concise description of the site.]

The core concepts for the game are thought experiments, cards and players. Each thought experiment is a provocative question about a research-backed possible future or trend. (For an example, see Facts Behind Free Space, which provides background for the first thought experiment.) The context for the question is set with a movie explaining the scenario. The players then respond to the question by playing “cards” with their ideas on what might happen as a result of the scenario/question. Each “card” is a short, Twitter-length response. At the first level players are able to play 2 card types: Dark Imagination and Positive Imagination. After the first level a chain reaction is created where players can play 4 card types in response to the previous cards: Momentum, Antagonism, Adaptation and Investigation. As cards are played, players earn forecasting points and can monitor their progress on their dashboard, which also provides feedback on the ratio of card types (strengths) played. The combination of forecasting points and strengths serve as a feedback loop to keep players engaged. At the end of the thought experiment, researchers are able to mine the cards to uncover interesting ideas and outliers, information which can be used by futurists to create forecasts for a particular technology.

From the Moleskine: Original Notes & Concepts

Moleskine 01: Notes and sketches from the first meeting with Jane in December 2008.

Moleskine 02: More notes from the first meeting.

Moleskine 03: Starting to get a sense of the interface at the turn of the new year. Scribbles contributed by Phoebe, age 2.

Moleskine 04: Further refinements of the interface. Drawing on right shows affordances and triple encoding of played cards: color, location and context.

Mind Maps
The following models were created using NovaMind Platinum. NovaMind, in my opinion, is an excellent modeling tool when you want to develop maps rapidly (in minutes) and keep them simple. These models were instrumental in communicating the core concepts to the development team, so they could develop the domain model and underlying architecture before the rest of the design was completed.

Mind Maps for the core concepts of the site: Experiment, Trial, Card and Player Profile.

Wireframes
The following wireframes were created using OmniGraffle. OmniGraffle, like NovaMind, is hands-down the best tool for rapidly creating wireframes. Again, in minutes, not hours. The large library of user interface design stencils and the smart-guides that are displayed as you move elements make OG a must-have. (In the interest of full disclosure, I’m ashamed to admit that until recently I was a PC guy and struggled with Visio, the cramped usability of PC notebooks, and the annoyances of Windows. If you’re doing interaction design on a PC in Visio or PowerPoint, do yourself a favor and STOP RIGHT NOW. Microsoft should just shrivel up and die - just leave us with C#, XBOX and MS Office.)

The wireframes were circulated for feedback. Once reviewed and discussed, they were passed to the development team so they could implement the user interface blocks, nodes and rough out the themes, and also to visual design to create the comps.

Wireframe 01: The experiment page with the video, initial provocation and ability to play two card types.

Wireframe 02: Showing the AJAX drawer open.

Wireframe 03: Showing the second level, once a card has been played.

Wireframe 04: Details for the card and AJAX response drawer.

Wireframe 05: The player profile / dashboard showing score, favorites and cards played.

Visual Design Comps

Comp 01: This is the original comp for the landing page which routes players to different experiments. Credit: Big Wide Sky.

Comp 02: This is the original comp for the experiment page with the video and initial provocation. Credit: Big Wide Sky.

Comp 03: This is the original comp for the card page. Credit: Big Wide Sky.

Implementation & Playtests

The site was implemented in Drupal by Appnovation. We had two rounds of playtests, which tested the usability of the design, as well as the concept itself: is good content generated by the design. As a result of the playtests we identified a few bugs in the implementation, some missing features, and some usability flaws.

Issues Identified:

1. Insufficient affordance on the card tray
2. Insufficient feedback when a card is played
3. Trays hidden at 1024×768
4. Forecasting points are hidden
5. No indicator when a card has follow-ups: drill-in only to hit back when no follow-ups
6. Truncated tweets a distraction
7. Text difficult to read on some displays
8. Top navigation is crowded
9. Listing of cards needed in one place
10. Display issues in Internet Explorer (shock surprise: YOU SUCK INTERNET EXPLORER)

Each of these issues were addressed for the final version of the site, as you can see in the screenshots below. And props to the Appnovation theme-team for their serious CSS Jedi skills on the display issues.

Screenshot 01: In this screenshot of the experiment home page, you can see the adjustments that were made as a result of testing. The text is higher contrast, the forecasting points are persistent in top right on all pages, the tray affordances are pronounced and visible at 1024×768, and the top navigation has been broken up into two sections: primary nav in the top right, and secondary nav in the “more future” menu. Taken 19 FEB 2009 1024×768 Mac OSX Firefox 3.

Screenshot 02: In this screenshot of the card page, you can see the additional adjustments that were made to this page. The first list of follow-up cards is visible at 1024, the phrase HAS FOLLOW-UP CARDS! is included and the entire tweet text is displayed. We purposely use the binary HAS FOLLOW-UP CARD! instead of an account to avoid players gravitating to popular content - we want each item to stand on its own and be read by all. Also note the primary nav includes a real-time card feed, which provides an RSS listing of all cards played. Taken 19 FEB 2009 1024×768 Mac OSX Firefox 3.

Additional Features

• Ability to favorite cards for easy access on dashboard.
• Leaderboard showing the top 100 in forecasting points.
• RSS feed of cards marked super-interesting by Lab Guides.
• Complete Drupal CMS for managing content, including blocking players and editing/deleting content.

Additional Features for Lab Guides
The game is not completely self-contained. There are a handful of Lab Guides who monitor the site for exciting content and “stoke the fire” of engagement. Features provided in-game are a super-interesting flag, which allows Lab Guides to feature content. Lab Guides can also delete offensive content on the spot. We use Twitter to broadcast tinyurls to interesting content, and live blog game progress and achievements. The Lab Guides use Google Reader to monitor cards in real-time, and tag them to create hands that can be used in blog post storylines at a later date.

Analytics
In addition to Google Analytics, we also use StatCounter for real-time monitoring of the site. Two of my favorite features in StatCounter are the Recent Visitor Map and the Recent Visitor Activity, which automatically performs reverse IP lookup for visitors, so if their IP is associated with a particular company or organization, it is included in the report. Here’s a screenshot of the Recent Visitor Map, which shows the global reach of Signtific Lab on the first day.

Recent Visitor Map on Signtific Lab on 18 FEB 2009.

Conclusion
I hope this post provides sufficient background on the design of Signtific Lab, a process that was completed in a very short timeframe. I am fortunate to have worked with such a talented group of individuals on this project. It is far from perfect, but it successfully meets the objectives of generating interesting content and keeping players engaged.

All comments, critiques and suggestions are welcome in the comments section of this post.

Once you create your player, you can embed your profile and cards that interest you on any website. Here’s the embed for my profile, the first card that I played and an interesting card I stumbled upon. You can click on the card text to view responses from other players.

I have the good fortune to be working with Institute for the Future and Jane McGonigal on a forecasting project called Signtific Labs, which is part of a site I am currently helping to redesign, Signtific.org. The project uses game theory to facilitate online brainstorming of implications of future scenarios. These micro-forecasts can then be analyzed to identify outlying ideas, trends and possible futures. Signtific Labs is going to be launched at Webstock 2009 after Jane’s keynote on Gaming Reality.

To whet your appetite before launch, check out this trailer for the lab.