« I wish I worked there | Main | Chris Hacker Encore »

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. :)

e

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00e551ffcc0388330133ecaa8756970b

Listed below are links to weblogs that reference Integrated Wireframe Flowchart:

Comments

> And sometimes, those days are a nice respite from everything else. :)

i just promised myself one of these days. tomorrow.

Indeed!! It's nice to get back to the basics sometimes, isn't it?

The comments to this entry are closed.

About

Foxes + Sparrows looks at how professionals who started in traditional user experience roles have transitioned to broader ones... Read More

Contributors