Integrated Wireframe Flowchart
By mehera o'brien on April 13, 2010
Categories: Interaction / Visual Design
So today I found myself without a whole lot to do (which nearly never happens) and was assigned a small production job on an account I rarely work on, and have little background with. Our strategy team had sold in an idea, but the client still wasn't totally understanding the click path through the experience, especially as there were a few entry points to the same core task. My Account Director asked for wireframes, citing the client's frustration with just seeing boxes and arrows.
Unfortunately, I can't actually post the end result as it's confidential (boo, I know!), but I thought I'd share my process. Normally, after a short time doing some desk research into the current online experience, I'd knock out a simple flowchart in about 20 minutes. This time, after I did that, I then created detailed wireframes for each of the boxes in the chart.
I then jpg-ed everything, shrunk down the comps, added magnets and applied connection lines to show how different buttons on the same wireframe triggered different click paths. When looked at globally, it's essentially a snapshot of the entire experience in visual form, but with a focus on movement and flow.
I used to do this more, but have found that time doesn't usually permit for this level of work. But seeing as I had time today, and it seemed like a good way to communicate to this specific client, I dug out an old system and was quite pleased with the result.
Most of my days are filled with meetings, client presentations, checking work and (if I'm lucky) brainstorming something cool. But there are the days I just get to sketch and sit behind the computer tinkering all by myself. And sometimes, those days are a nice respite from everything else. :)