Saturday, September 15, 2007

Tree Story wireframes


I've been dabbling with quick wireframes to explain the design of Tree Story. There are two common ways you can look at a spec.
  • One is that of the blueprint, a plan that will be rigorously followed by production workers in order to achieve the end result. In this model, the team members are followers who are expected to implement a list of fixed details, not innovate.
  • The other is that of a communication tool. As a communication tool, you are trying to seed key concepts in your team so that they can take ownership and run with the idea during implementation. In this model, the team members are ultimate owners of the final design and the 'designer' is more of a facilitator of the process. Any spec exists only to spark conversation so that the team can build up a shared understanding of the feature's goals.



I've found that text is rather horrible as a communication tool, especially with small teams. It takes too long to iterate on and starts bogging down as soon as there is more than one person editing the document. Even worse, text fails horribly when describing anything visual or tactile.

Instead, I'm a big believer in using storyboards augmented by multiple discussions around a whiteboard, especially for early discussions. The story boards / paper prototypes can be quite concrete, but they are still visual and tactile enough for two or three people to stand around and comment on.

The iteration process is straight forward:
  • Whip up a quick storyboard. Limit yourself to spending 30 minutes to an hour on it. Make it very rough.
  • Print your latest 'official' wireframe on the biggest paper you can lay your hands on,
  • Tape it to a whiteboard and nab the first person you spot on your list of influencers.
  • Brainstorm around the idea. The taped version acts as a starting point for the conversation and an anchor if the conversation gets lost.
  • Immediately update the wireframe with the new thoughts.
  • Rehang it on the wall. Ideally look for a spot with a lot of traffic.
  • Rinse and repeat.
Within a short period of time, you have a design that:
  • Is easily understood in a glance.
  • Is understood by multiple team members. The story board acts as quick reference to your indepth conversations.
  • Is up-to-date.
  • Is a conversation starter for the rest of the team. I've had the best results when my desk is positioned near where the drawings are hung and I can leap out and chat with people wandering by.
Example wireframes
Here's a stab at some wireframes for Tree story. Sorry that we don't have a good white board built into this blog. Someone needs to fix that. :-)

The basics of communication
In Tree Story there are NPCs you can chat with. Here is how.













Picking up objects
You can also pick up objects and drop them where you desire.
















Planting seeds
A special type of object is a seed. It lets you grow new platforms in the world.








Each seed creates a different type of tree. Use different sized
trees to reach different areas or grow interesting fruit.




These were done in a vector drawing tool because I find wireframes use a lot of objects that are the same. I personally prefer to copy and paste instead of spending time redrawing. However, they could just as easily been done by hand. They are likely a bit more detailed than necessary, but I'm compensating for the rather low bandwidth nature of a blog.

take care
Danc.

Weather system
PS: Here are some additional wireframes that describe how a sunlight and weather system might work. This could be used with Clint's idea for the weather trees and machines.