How to Foster Cross-Functional Collaboration on Wireframes
On a recent project, the internal project team found success in documenting functional specifications in a Google Document, as show below:
The benefits of this process included:
- Detailed functional specifications that 1) can be implemented, 2) provide a positive user experience, and 3) will be delivered within scope and budget.
- Better cross-team understanding of what we were building and how the system functioned.
- The ability to ask questions and document answers.
-
Greater participation in solution development: enabled team members to contribute to solution generation rather than just documentation approval.
Step 1: Create the Image
The Information Architect created the wireframes in his or her tool of choice (Visio, Graffle, InDesign, etc). He/ she placed "indicator" over the area of functionality in the wireframes. He/she created a PDF and distributed it to the team.
Step 2: Document The Details
The Project Manager created a Google Document (Word equivalent) called "[Project Name] Wireframe Annotations" and distributed it to all team members via email.
The team then referenced the above wireframe and began annotating (asynchronously) according to page and indicator number. For example:
Recent Blog Post Title
1.1 Our Focus
- User can click one of the links to see newsroom content only relating to a specific program
1.2 Authors
- User can click an author's name to see newsroom content only authored by them
- This list will be automatically generated based upon who has added Newsroom content
- Allows a user to click one of the dates available to see older newsroom content
- Links to current year and month will display, as well as links to all content from previous years
1.8 Meta-data of post
- Displays the author's picture, name, and date of the post. Users can click the author's name to see other posts by them. What happens if there is no picture?
In this case, the Information Architect replied to the question by adding further annotation in the example below. This process really helped the IA determine the level of detail needed to communicate how the system will function.
1.8 Meta-data of post
- Displays the author's picture, name, and date of the post. Users can click the author's name to see other posts by them.
- If the author does not have a picture associated with them, no picture will display. Similarly, if there is no associated author with the post, nothing will display where the author's name is.
Step 3: Combine / Present
A few hours prior to the client meeting, the Information Architect would inform the team that he was importing the functional specifications into the wireframes and that they should stop updating the functional specifications at that point. The IA would then cut and paste the annotations into the wireframes as appropriate. We found this to be a very successful way to document functional specifications. I will be advocating for it on future projects and hope that your projects will likewise benefit from this type of collaboration.
We found this to be a very successful way to document functional specifications. I will be advocating for it on future projects and hope that your projects will likewise benefit from this type of collaboration.
Forum One News
Manager of Information Architecture
Brian grew up on land that used to be part of his grandfather's dairy farm and spent hours exploring the outdoors. That kind of roaming and curiosity is a great foundation for an information...
Comments
My legacy lives on :) Great
My legacy lives on :) Great post Brian!
Post new comment