Grockit Test Prep

Learn more about why Grockit is the leader in social learning

Posts Tagged click-thru

Design Deliverables for Agile Planning & Development: A Clickable Collection of Mock-ups

pseudo-version of grockit exported from Fireworks

We’ve tried a few different approaches to communicating design at Grockit. Our process is constantly evolving but I feel like we’ve reached an ah-ha moment so I thought I would share in case there are any designers out there working with agile development teams that might benefit from what we’ve learned.

In a nutshell, we create a clickable psuedo-site (“click-thru”) that is interlinked as needed to communicate interactions. The index of the click-thru is the go-to place whenever we want to reference a design. In my experience, this has proved superior to attachments-to-Tracker-stories or a folder of flats because it seems to be easier to find things and most importantly it lets me demonstrate interactions and conditional changes.

I also use the click-thru as a place for collaborative exploration. For me, it’s inspiring to make changes to something that teammates will notice. It speeds up the feedback loop and increases the amount of encouragement I get, which makes me happy and more productive, so I make more mock-ups, …etc. One example of using the click-thru for experimentation is the layout and content of the Game Lobby, in the click-thru right now the SAT lobby is different than the GMAT lobby, one represents the next incremental design while the other represents a future version many iterations away. Note: the click-thru is always delivered with the expectation that not all the links will work, and it is almost always presented with narration.

Tools to create the click-thru and to communicate the plans we derive from it are:
* Adobe Fireworks
* Dropbox
* SubEthaEdit
* Pivotal Tracker

To maintain the click-thru we set up Fireworks files with slices over buttons that lead to other pages. When a flow is mocked-up and linked together we then export html and images. Since we use Dropbox and everybody shares the folder the update gets shared with no extra effort on my part. Then we write stories collaboratively with SubEthaEdit …and usually modify the mockup while we are writing the stories. We import the stories into tracker and then the team assigns points to the stories with the click-thru for reference.

The click-thru then becomes a reference for implementation that is still malleable and can be used as a starting point for further collaboration if we discover a more compelling alternative. Alan, Lane and Tim from Cooper Interactive stopped by our office recently to check-out our style of Agile and they asked if we keep the click-thru up to date if we make changes during the implementation process. If we change the design slightly during implementation we will not update the click-thru, it’s simply an artifact at that point and the application itself is the current iteration of the design. I’ll only update that section of the click-thru if we are building something more on top of it in a subsequent iteration.

What will be especially interesting is to see how this process evolves with more than one designer at Grockit. If you know a designer (maybe you?) interested in working in an agile environment, please get in touch.