Wireframes and story carding

This is the first post in our "How we work" series, in which we detail, well... how we work. For more information, check out the post about what these posts are about.

At 80beans we follow an agile approach to development, but we do think creating a comprehensive interaction design upfront is very helpful. Some of our clients have in-house or external interaction designers, if they don't, we usually work with them ourselves to create the wireframes.

We do our wireframing and functional designing in Axure. Their site looks very enterprisey, but it's a very useful tool. It allows us to design wireframes and add interaction to them. We start the design process with a kick-off session where we talk about the vision and high-level functionality. We will create a first version of the wireframes and have sessions to go over them until they represent what the client wants.

We will typically wireframe every screen in the application and add notes for use cases that are too detailed or can't be captured in the design properly. Axure can generate both an interactive prototype and a functional specification. It's nice to have a document, but we end up using the interactive version in most projects. This interactive version forms a good base for a designer to create the graphical design.

Once the wireframes are completed a very crucial step has to be taken; writing stories based on the wireframes. A story describes every piece of the functionality in a narrative form. For example: "A user can upload a photo" or "A visitor can sign up as a user". We always write these stories together with our client in one to three sessions, depending on the size of the project. It's very important to write the stories together, so both parties have the same idea about what every story means. The result is a complete checklist of all functionality in the proposed application that will be used to track the project's progress later on.

When the wireframes and stories are done we can start actually developing the project.

The next post in this series is "Working with stories"