Leveraging the IA Process with Wireframes, but Realizing There’s Still Room for Improvement

As a creative organization, we are always looking for ways to improve our processes while at the same time give our customer the best value for their dollar. For a while, we strayed away from using wireframes during the information architecture and design stages. Too often, wireframes influence the design direction of a site, and we didn’t want that to be the case here at Aten. We have great designers that are up for the challenge of giving the site well-balanced visual appeal. Our designers create element collages and design comps to provide our front-end developers with the basis for creating a theme for the site. However, we realized that we needed more detail on pages that were not designed out and decided to try wireframing again from a content only perspective.

Improving Our Process with Wireframes

In just the few short months we’ve been using Axure, an application for prototyping and wireframes, we’ve already seen improvements in our process.

• By keeping our wireframes low fidelity (or simple), they are quick to create and less likely to influence design.
• Our clients are able to grasp the functionality, structure, and content of their future site better.
• Our developers are able to easily understand what content goes on each page.
• We are able to identify common elements that can be reused throughout a site earlier in the process.

Using Axure, we create reusable elements as “Masters.” Our first project included masters for the header, footer, and sub-navigation. Since then, we have added Drupal-specific elements, such as blocks found on multiple pages, teasers for different kinds of lists, and guidelines for titles, breadcrumbs, exposed filters, and pagers. Version 7 has built-in headers, which makes some of these tasks even easier.

Responsive Design in Wireframes

Axure has been a great tool to use for our wireframes. With version 7 we can even use the adaptive feature to create an alternative view of a single page. This means that we can now show our clients how the content would be displayed on a tablet and phone. However, in order to show all of the breaking points, we would need to create at least six versions to cover the following devices: base view, large screens, tablets (both landscape and portrait), and phones (both landscape and portrait). This definitely helps the client visualize their future website, but it’s labor-intensive for us to set up. If we were able to use these features to create actual markup for our sites it would be even more valuable to us. We just don’t have the best method for doing this yet. Are you using wireframes to show responsive design? If so, what program are you using?

Keeping Wireframes Up-To-Date During Development

Unfortunately, we’ve found it hard to keep the wireframes up-to-date. Many changes take place as the website is built out. But when multiple people are working on the same project, it’s important to document these changes. Here at Aten, we’ve looked into updating the wireframes each time a major change occurs. This becomes tedious, time consuming, and an issue with access. To make changes to a wireframe, you need the .rp file and Axure downloaded on your computer. Our process right now is for the developer to send a ticket to the information architect to create these edits. We’ve also discussed sharing the file among those on the project using Dropbox or Google Drive so that anyone can update the wireframes. However, there is no clear way to know who made which change, and this method requires the person to save and upload the file to the shared folder. I see two solutions for this. Either create Axure as a cloud application where individuals can log in to make changes or at the very least, increase the features of the Page Notes tab to allow for more commenting on the actual wireframes

Our Current Information Architecture Process

Here is an outline of the process we use now that includes wireframes.

1. We start with a Content Audit to get a sense of our client's current site.
2. We use the Content Audit to help structure a Sitemap.
3. The Sitemap is used to build Content Maps, a flat hierarchical list of content for each page of the new site.
4. The Content Maps are expressed visually as Wireframes.
5. We finalize the IA phase with a Technical Architecture document.

How does this compare to your process? Do you use wireframes as part of your process? What tool or tools do you use to create them? Any cool tricks you want to share?