Aug 182012

The summer has flown by, and we’re now only two weeks away from launching version 2 of the game. And, remarkably, nobody’s panicking! We’re very much on track for our launch date, and that’s due in large part to our learning from our mistakes.

This year, we took on the task of fully redesigning the technology, content, and interface of the game in a single summer–that’s nine weeks to encompass planning, development, and testing. Given that very small time frame, we spent what might have seemed to some people to have been an inordinate amount of time on planning before we ever wrote a line of code. As we come into the final stretch, that emphasis on front-loading the design and architecture (of both the back-end technology and the front-end user experience) is really paying off, as we watch pieces click nicely into place with no last-minute realizations that we missed something critical. So this post is devoted to the topic of what tools and processes we used for that design process, and how and why we used them.

We began the old-fashioned way, by locking all the key faculty and staff from last year’s game in a room for two days and doing an in-depth breakdown of what worked and what didn’t from a game design perspective. What pieces did we want to keep? What pieces were clearly broken, either technically or from a user standpoint? Were our core ideas of what we wanted the game to be still solid? Were our core mechanic for delivering that experience solid? During that retreat, we sketched out the basic structure of how the game could change this year, retaining our core goals and objectives but retooling the presentation and mechanics. Without those two days of intensive thought and planning, we wouldn’t have been able to move forward. That kind of deep-dive design work requires sustained attention, not a meeting here and another there squeezed between other obligations. This was not a high-tech process, either–we relied on whiteboards, notebooks, and piles of index cards (for card-sort exercises). The one technology tool that was valuable during that process was Evernote, since it allowed me to take photos of our white board diagrams and be able later to search for them based on the automatic text recognition.

Once we had a clear sense of direction, the next step was to write detailed functional specifications for the new system. Who were our users, what were our use cases, what content would we have, how would it be presented, and what functionality needed to be supported? This document was primarily my responsibility, because writing specs is not something that typically works well by committee. However, it was an iterative process that required regular input from other members of our team. I wrote the specs in Google Docs, granting read and comment permissions to the rest of the team, and encouraging them to add comment in areas where things were unclear. At the same time, our technical architect (Chris Egert) began creating a data model for the new site, taking into account both what I was drafting in the specs and the need to better record data for ongoing analytics.

As the specs took shape, I worked with Elouise Oyzon, our design lead, to mock up the pages of the site in wireframe form, focusing on functionality rather than aesthetics. We chose to use Mockingbird, an excellent web-based tool for creating application mockups, both because the tool itself worked well for our purposes and because as a cloud-based app it allowed for us to work collaboratively. We paid for the $20/month version, so that we could maintain separate wireframes for the public version of the site, the logged-in version of the site, and the administrative interface. All members of the development team had access to the wireframes, which helped enormously in clarifying the functionality in the specs. As we mocked up pages, I updated and clarified the functional spec to match what we’d determined. Eventually, the mockups became the definitive design document for the whole team, since the visual representation of the functionality was very effective for communicating requirements. Here’s an example from the administrative interface wireframes:

Mockingbird - Admin Wireframe

Once the mockups and the data model were largely complete, our dynamic developer duo of Chris Cascioli and Ben Snyder began work on the actual application engine, which was built using the .NET MVC framework. (We looked at a few other web application frameworks, including Django and CakePHP, but ended up going with .NET because our development team had strong C# coding skills.) Because that part of the project was outside of my expertise, I’ll leave it for our devs to talk about that side of the project. While they toiled in the code mines, though, Elouise and I went back to work on design issues.

To manage the many aspects of the content and visual design production process, we chose to use Trello, a free web-based project management tool made by Joel Spolsky’s company Fog Creek Development. Trello provides a flexible and very visual framework for representing tasks as “cards” that can be moved between lists. Here’s what our “front-end” Trello board looks like today, as we near the end of the process:

(2) JPP Front End | Trello

Trello is wonderful for tracking to-dos, and for maintaining an at-a-glance sense of what’s happening and needs to happen in a project, but I found when we tried to use it for organizing achievements and quests in the game that its limited search and sort capability made it less effective for large amounts of structured content than a spreadsheet or database. I finally ended up moving all of the achievements and quests into a single Excel spreadsheet, which I’ll eventually move into Google Docs.

Our final go-to tool for the design and production was Dropbox, which I have a love-hate relationship with. I love the ease of being able to share documents with a group, particularly for things where there’s little confusion about who can modify the documents–like the folders of icons we need for both print and online representation of achievements. The inability to restrict access in any way in Dropbox is consistently frustrating, however. Any person with access to the file can move or delete it, making it unavailable to other users. There’s no way to make a file “read only.” I’ve begun investigating Microsoft’s SkyDrive as an alternative, but the challenge is getting a large group of people to all be willing to shift their tools and workflow, and that wasn’t a challenge I wanted to take on with this project.

While this particular project was a game, the process and tools I’ve described are applicable to any complex web-based application (and probably non-web-based applications, although I’ve got less experience in that domain). I get asked often enough what’s involved in building a complex website that it seemed worth outlining our workflow in details for others to learn from. If you know of other tools or resources that are helpful in collaborative design and production processes, I’d love to hear about them!

Jul 252012

As Weez said in her last post, we’re changing the look and feel of Just Press Play for the new academic year. But that’s not all that’s changing, not by a long shot. Some of the changes are technical, and we’ll devote a post later to the nuts-and-bolts of the infrastructure. This post is about how things will be changing for the players.

The most obvious change in the mechanics of the game will be around the collectible cards and awarding of achievements. There will still be cards associated with achievements, but there will now be cards for *every* achievement, even the ones awarded automatically or based on materials you submit online. Once you get an achievement, you can stop by the IGM office to pick up the associated card. The cards will be professionally printed playing-card format, and later this year we’ll be developing some card games that you can play with them.

The cards won’t have those impossible-to-enter codes on them anymore, either. We know that lots more people participated and got cards than ever entered them into the system. That meant the mechanic was broken, so we spent a lot of time thinking about how to improve that aspect of the system. What we decided on was to equip anyone who can award an achievement (professors, staff members, etc) with a mobile app that can scan a QR code. Students will still get a keyfob for the game, but instead of RFID transmitters (which we were never able to integrate properly with our game engine) the keyfobs will hold a unique QR code linked to your game ID. When you qualify for an achievement, the person who can award it will scan your code, instantly giving you credit for the assignment. Sometimes they’ll have the collectible with them, other times you’ll need to pick the card up at the office. Either way, you won’t have to enter anything online to redeem the achievement. (For faculty and staff who don’t have mobile devices, we’ll provide a web interface they can use to assign the achievement.)

Another big change is in the core mechanic of achievements, quadrants, and “leveling.” We’ve changed the quadrants to four distinct categories–Create, Learn, Socialize, and Explore. Every achievement is worth 4 points in the system, and the points can be all in one quadrant, or distributed across 2 or more. There won’t be levels in the same sense that we had them in the past, either. All achievements and quests will be available to all players. We’ll reward players with achievements for reaching certain milestones (for instance, 25 points in each quadrant), but the levels will simply be progression markers, not restrictive barriers.

We’ve also added repeatable achievements into the game, which we’ll use for things like the “Flocking to Hockey” achievement. Go to one hockey game and find the JPP rep and you’ll get the base achievement. Go to 5, and you’ll get the next achievement in the series. Go to 25, and you get yet another achievement. We’ll use that mechanic for a variety of repeating events.

For every achievement you earn, you’ll be able to upload an optional text narrative and/or photo to help remember the activity. We hope this will allow people to build a nice record of the activities they engaged in to get the achievement.

And finally, you’ll now be able to make your achievements public if you’d like. By default, your achievements will be visible only to your friends in the JPP system. But you can opt to make them visible to the outside world, and even share them on Facebook if you’d like.

We’re excited about these changes, because we think they’ll make JPP more accessible and enjoyable for our players. What do you think?

Jul 102012

There is a reason for a beta phase. You see what works; what doesn’t.

The previous designer was told to go light, and playful and colorful. It didn’t quite hit the mark. A mid-year revision reworked the palette and some of the elements, but it didn’t change greatly.

With this new year comes a decisive overhaul of Just Press Play. There is much happening under the hood, but I can speak to the portion that is visible to the outside. The goal is playful, vibrant and alive. With that in mind, the graphics are solid. There is not a gradient to be found. There are no faux bubbles, nor drop shadows. The rework continues.



 Posted by at 11:43 pm
Mar 092011

Charlie pinged me to see what he could be working on (because that’s how he rolls).

Can I just take this moment to say that everyone on this project kicks ass? /aside

Told him to work on levels as actual states, and a means of indicating progress in-level. Some interesting side discussion:

  • Both he and I are accustomed to RPGs (Role Playing Games), and my gut says a descriptor of the design style of those games is “EPIC”. The word “EPIC” is not on the short list of words to describe the site nor the game. My take, is that the word feels very masculine. It’s a subtle distinction, but I think an important one.
  • FYI the adjective list is: playful, light (as in both weight and value), engaging, young, colorful, dynamic. Vision documents contain an overarching description of content objectives. The short list is vision vibe. (Note the absence of the word “EPIC”)
  • There will be levels roughly equivalent to freshman, sophomore, junior and senior levels of college. Additionally, there will be a graduate and alumni level. Faculty and Staff will be playing as well – are they a level? or a class? Should they be collapsed into one grouping? We will not be leveling as the students do. Hrmmm…I think I just answered my question. Class it is.
  • The last bit was just my assignment to Charlie – this is ideation week. We’ve already seen the XP bar in a gilded frame. How many other ways do we indicate empty to full? Dials? Multiples of things? How do we measure volume of air, liquid or solid? How do we gauge changing states of matter? ¬†of mood?
 Posted by at 2:21 pm
Mar 082011

So I’m at my favorite bar and ask Erin, the bartender, “What would you like an achievement for?” I’ve been springing this question on random people since the project began. She answers without skipping a beat, “Random acts of kindness.”

Brilliant! an achievement one would give to someone else to recognize that unasked for something that made the day better. Not something I would get, but something I would give!

Liz said, “Yes, but…” because it is her job to be the pragmatist and to tell me that unicorns do not exist. How will you prevent 25 kids from gaming the system? What is the validity of such a system if they do? F I N E. I will make this work.

Here goes…

The hero’s journey narrative lends itself to the idea of leveling and this can be gauged with meaningful experience points. (XP) In fact, one cannot beat the game unless they graduate. This does not eliminate a subsequent alumni level, but that is so next week.

Parallel to this are badges and achievements that do not necessarily contribute to XP. These would be badges created by the players and reflect things they value.

When a player submits an achievement for acceptance, or when they submit the accomplishment of an achievement or badge, they will have to submit a story/proof of completion. The community will be able to “like” it. This unit of “like” is distinct from XP; what it indicates is street cred (CRED).

The value of CRED is that at some threshold beyond the noise, there is an indication of investment in the game. Those “like”s translate into others’ appreciation of their wit or way of doing the tasks. I say translate that CRED into a superuser (but with a sexier name).

Ultimately, the community should be self-moderating. It’s the superusers who should be the moderators.

There could be button or some way for someone to “call¬†shenanigans”, and the superusers could sort it out. But I digress a little…

Maybe another benefit of cred is this, for x units of cred, you earn the ability to bestow a random act of kindness to someone else. So the cred is a currency used to take recognition you’ve received and reflect it on someone else. After seeing how quickly these units accrue, we can make the cost of giving that award a real sense of preciousness and honor.

What other tangible value could CRED have?

 Posted by at 10:35 am
Jan 042011

One night, over wings, Steve O and Brad said, “We should have achievements for being awesome.”

How awesome?

In so many ways. What we have here in the Interactive Games and Media department is all kinds of awesome, of sick, of of of…but how to define it? And how would we measure it? And what would you do to get that indicator of your oh-so-awesomeness?

This begat an email to Andy, our most wise leader, which spawned the academic version of, “Let’s put on a show! I’ve got costumes and a barn!”

So we are in the process of creating an achievement system for IGM. “JUST PRESS PLAY”

This is the design and process blog for this endeavor. I have entitled it “THINK PLAY”.

Well, that is the original idea of what this is. I promise there will be lots about the design process, but it is my nature to be a storyteller so I will likely riff off that idea of “think play”. There are others here who think and play. I think they may very well jump in here and throw in their two cents, four bits, or bushel.


 Posted by at 8:48 pm