Spreadsheets & Dependencies Aren’t Engaging

I recently attended a WebEx meeting where a team of 8 stared at a project plan spreadsheet for an hour. The spreadsheet organization was simple: activities as rows, each with columns for name, responsible person/team, start date, and end date. But the arduous discussion took forever and achieved little. The problem?

You couldn’t see the plan.

Oh, sure, everyone was watching their WebEx (and emailing, IMing, and maybe even taking in the latest YouTube sensation) and put up with the spreadsheet. Maybe most folks didn’t even realize their lack of productivity and didn’t know any better. But I sat in my chair, phone on mute, cursing the lack of efficiency and threatening to stab my eyes with Sharpie pens as a preferred alternative. Since self-inflicted blindness is a bad thing, I instead opted for EightShapes Unify, laid out the entire plan they’d formulated in two minutes, and sent it to everyone via email with a declaration of “Can we look at this next time? I’m guessing things will go faster.” The response, beyond a mild irritation at my lack of tact, was an enthusiastic “Yes!”

The format of my EightShapes Unify project plan is, not surprisingly, a gantt chart. Activities are bars, deliverables and other events are icons, all laid out on an x-axis grid depicting a periodic passage of time (usually, weeks or days).

But, and it’s a big BUT, my project plans come nowhere close to the rich, deep information conveyed through a typical Microsoft Project plan. Ah, those rich, interconnected dependency lines connecting activities and resources. Estimates of hours spent, percent allocation per resource, the list of project management goodness goes on. All glory to the deeply thought through plan? Hardly. But it’s those expectations that keep many a UX designer away from planning, scared or even annoyed with the complexity. In fact it’s a designer that should be able to most effectively, simply, and quickly communicate a plan via a picture.

Tell Your Plan’s Story with a Picture

No matter who you are, it’s most important to tell the project’s story from a high level: what are the big tasks, how long will they take, and when can other expect the most important deliverables. You’ve got to get people on board with the big picture first, especially with a focus on proving you’ve got your act together for what’s coming up next.

It’s not like a project plans must be a sophisticated, detailed works of art. Far from it. But my project plans elicit reactions of “that’s so beautiful!”, “wow, a sexy project plan”, and nearly instant understanding perhaps because they are visual and simple.

These plans are about gaining alignment and getting started, not exploring detailed dependencies and creating a maintenance headache for the lifespan of the project.

That’s the goal: gain enough credibility that you and your team know how to tackle the problem and have a plan to solve it. A well-communicated plan via a simple yet effective visualization gets you there, and even engages and empowers collaborators to begin to project their own impacts and responsibilities too.

Creating a Project Plan with EightShapes Unify

Fortunately for us, and you, creating a project plan visualization is actually quite easy. Here’s a video that demonstrates it in just over three minutes.

DB: Did you modify the system pre- or post-rollout to better match your organization or clients? If so, would you mind sharing the reasoning?

NC: Reuse – rather than reinvention – is the spirit of the whole system, really, so clients aren’t interested in some generic set of wireframe templates that force them to recreate their own designs from scratch. Instead, they ask to “gimme what we’ve got so we can communicate what we’ve got and have a good foundation to innovate from.”

A wireframing library – specifically the wireframe template (.indt) and all it’s grid, typography, other styles and a complete component and page type library – is always fully customized to a client’s existing design system. Sure, common libraries like form controls, buttons, tabs, and a range of Yahoo patterns can be helpful. But it’s the specific design assets that their staff can use that are far more valuable.

On the other hand, deliverable document templates and their associated libraries have ended up being almost exactly the same across nearly all of our 12-15 “documentation system” engagements. Make no mistake, UX teams want to firmly stamp their corporate identity, if not their team identity, on deliverable templates. But only one group has significantly refactored master page layouts, color, and typography beyond simple tweaks that require only an hour or two.

That said, it’s not unheard of for teams to update or create new page patterns like a functional spec, creative brief, annotation standards, or even a full recipe for creating something like a competitive analysis. While the existing page patterns are extensive, each team has their unique style, facets, and depth with which they communicate. Those conversations around page patterns are really deeper around design communications in general, and how their own workflows support the authoring and consumption of such artifacts.

DB: What kind of reaction are you seeing from project stakeholders, developers and designers?

NC: Reactions vary widely, but some common themes include:

• From designers: InDesign is different and perceptibly harder (at first), but a system and deep set of reusable assets eases that transition and enables designers to have a higher level of forgiveness for that learning curve. That said, there are also later realizations that the “learning curve” wasn’t that InDesign was harder (than a Visio or Omnigraffle), but instead just different.
• From designers: Initial perceptions of creating more documentation that are changed later by inspirations of creating better or more specific documentation, and acknowledging that by separating design files (like wireframe screens) from deliverable documents creates opportunities for more lightweight and rapidly iterated “documents” in greater quantity.
• From developers (and actually, QA): An appreciation for greater clarity in annotated design screens, and – if embraced by the designer – better and clearer structure for those annotations. I’ve gotten no better feedback on my deliverable effectiveness than from a QA colleague who (unwittingly) participated in countless informal “deliverable usability tests.” By the end of the project, I’d used the EightShapes Unify approach to refine and deliver something that was completely tailored to what he needed. But, this is really a tough interpretation because every culture, workflow, and value placed on deliverables is different. Even today, I was exposed to a new workflow with different definitions for who within – and outside – a user experience organization actually own the communication of requirements to an engineering team. Interpreting such reactions is always highly dependent on the context of a team’s workflow and process.
• For stakeholders: Again, tough to say because the EightShapes Unify system and approach is highly dependent on context. That said, it’s not uncommon for me to obscure the ease of producing deliverable that appears “so polished” and that elicits unexpected reactions like “Damn that’s a sexy project plan!” or “How’d you change all those wireframes so fast?”

Do your designers use the InDesign wireframes as the basis for their comps, or start from scratch in their tool of choice?

I don’t endorse painting wireframes. That’s lunacy. But certainly wireframes are to serve as a lower fidelity inspiration and structure from which visual designers create final comps.

That said, there are design systems mature and stable enough – like Sun Microsystems’ www.sun.com/webdesign/ – that comps aren’t part of the workflow for many IA and content-based projects. Instead, the wireframes and their attendant mapping to the component library are sufficient enough for (a) stakeholders to understand the proposed design solution and (b) engineers and / or publishers to create the page. Visual designers are involved in reviews, but the bulk of their effort becomes more focused on evolving the visual system rather than comping nearly duplicative layouts that tread no new visual ground.

How do you manage your source files (e.g. dedicated file server, TeamShare or Basecamp site, true Doc Management Solution or other)…are you happy with the solution?

Context is really important, and some teams within even massive corporate structures don’t have access to version control systems (like Subversion) or even shared drives. That said, typical storage solutions cover the range of:

• Local drives and file swapping via email
• Share drives
• SharePoint / Basecamp-like project management systems (although I don’t recommend this for sharing anything except deliverables others consume
• Subversion, installed on your corporate network and supported by someone who gets it. If you have the infrastructure and the designer patience to learn the over-the-top processes for checking files in and out, nothing beats it. We’ve also succesfully used an online subversion application called beanstalkapp.com. That said, we go for subversion on a project basis only when the scale of collaboration warrants: if it’s an IA working in isolation then it’s unnecessary, but if you’ve got 4-5 IAs syncing frequently on a holistic experience design then it’s essential.

What online forums or communities do you use to connect with other UNIFY users (if any)?

Interestingly, the chatter on EightShapes Unify ebbs and flows, and like most collaboration within design teams, its more ad-hoc and peer-to-peer learning rather than via online, archived discussions.

I’m more than happy to respond to feature requests or even seemingly inane “How do I…” inquiries directed at my email address or twitter handle of @8sunify. Admittedly, most of the questions, endorsements, and shouts of “Eureka!” from our 5,000+ users that have downloaded EightShapes Unify come via Twitter.

Lastly, while we incorporate items like coaching time, “office hours”, brown bags, and even scheduled review sessions for our clients and colleagues to get help, its interesting that it’s the most underutilized service. Designers may lack confidence to ask questions, be too busy or distracted, or may simply not care enough about improving their skills in this area. But I’ve not done enough asking around to get to the root of that gap.

Download the Scenario Description Swimlane page pattern

Yvonne Shek

NC: What is your “Swimlane” diagram?

YS: To be more specific, I’d call it something like a “Scenario Description Swimlane.” The diagram has a number of lanes, which align to describe a story or flow of events. Each lane describes a different element of that story:

• The top lane is the storyboard lane. It can include comic strips, photos, drawings or sketches to describe the story in a visual way.
• The next lane is the user experience lane. It is a description of the story above, in the form of boxes and arrows.
• The third lane is the business process lane. It is the business flow that matches the top two lanes.
• The fourth lane is the tools and systems lane. This lane includes technical systems, such as servers, databases, spreadsheets, etc. – that support the business process lane above it.
• The last 2 lanes are optional and could be used to include use cases and features.

The goal or differentiating factor of this diagram is to tell a story from multiple perspective, in a comprehensive and holistic way.

NC: When is it appropriate to use a Swimlane diagram?

YS: It is most appropriate when the various aspects of the experience needs to be dissected, understood, aligned, and put back together again. It is most helpful to see the various aspects and roles, such as the user experience, business, and technology – come together to complete the picture. This is done prior to Design.

NC: What part of a swimlane diagram ends up being the most important?

YS: The beauty of it is the different aspects coming together. So in that sense, no one part is more important than the next. That said, the order of developing the diagram is important. We normally like to start with the user experience lane (second lane).

NC: Do I have to be a good illustrator to make attractive comics or visuals in order for my swimlane to work well?

YS: You don’t need to, but we were lucky to have had that person on the team. You can use photos or rough sketches for that first lane.

NC: Have you ever used a swimlane diagram in a project that’s ended up working really well? Why did it work well?

Yes, we worked with Alberta Education (Canada) and the application LearnAlberta.ca was designed based on the 12 swimlane diagrams that we built. It worked well because the diagrams communicated to the project sponsors, project team, new team members joining throughout, and for our own design team. The project was understood quickly by new members. It was also a good reminder of what we were building for those on the team throughout the (long) project.

NC: Have you ever ended up wasting too much time on a swimlane diagram?

YS: That is a concern and a risk. We did take too much time, even on the Alberta Education project. However, the time we took was not wasted when we entered into the Design Phase. In a sense, the time invested was made up later on in the project. The other thing to keep in mind is that the storyboards do not have to be “perfect”.

NC: Alas, and there’s the key. It doesn’t need to be perfect. It’s a pattern you can use, interpret, and integrate into your own design communications in your own way. Thanks so much for spending this time with us, and sharing your great ideas!

NC: What are isometric experience maps?

JW: Unlike two dimensional flows and site maps, isometric experience maps give depth to those same flows and maps. Isometrics give a three quarter view of a site or applications overall experience. This not only helps communicate the experience, but allows for more information to be shown on a page.

With the resources provided in EightShapes Unify, experience maps can be created within any deliverable template.These include a new isometrics library of many starter objects and a grid snippet.

NC: When is it appropriate to use a Isometric Experience Map?

JW: Admittedly, there are many times when a two dimensional site map or flow can be created and convey the same information just as effectively as an isometric experience map. Where an isometric map can be helpful is when you need to display a complex or broad map of information, to project participants outside the design team, including executives. You can use them to convey big ideas, confirm understanding of project scope, and sell ideas.

NC: What part of a isometric experience map ends up being the most important?

JW: Two things: the whole picture as well as specific details, and it depends on what messages the creator wants to convey. For example, the diagram could convey how multiple site, sections of a site, or a site and related applications converge as well as the specific connection points between them. Many times, actually visualizing key page designs from each of those areas makes all the difference, since consumers of the document can confidently identify what’s what and see each part of the experience rather than imagining what a box with a label abstractly refers to.

NC: Do you have to be a good at InDesign in order to make a compelling isometric experience map?

JW: You can create some basic experience maps by using Page objects, changing their labels, and adding screenshots. In order to create really powerful isometric site maps, however, you’ll benefit from knowing many features of InDesign. For example, understanding how to transform objects, group & ungroup starter shapes, place and resize artwork, and using the direct selection tool all come into play.

NC: Have you ever used a isometric experience map in a project that’s ended up working really well? Why did it work well?

JW: Yes, we worked with a rather large enterprise client that was overhauling a large area of their site. In order to convey the importance of the user experience, we needed to show what portions of the site were underperforming vs. over-performing with layered-in site analytics.

The challenge we faced was that executives weren’t about to consume and make good decisions based on spreadsheets or even a site map with boxes and arrows. Using an isometric experience map, we were able to give a fantastic 30,000 feet view of vital pages and areas of the site and overlay that data. The diagrams really engaged everyone, including the executives who directly connected with the impacts on the pages they chose to invest in.

NC: Have you ever ended up wasting too much time on a isometric experience map?

JW: It’s all relative. One can spend too much time creating a conventional two dimensional site map or flow just as much as they can with a isometric experience map. The key difference is that a isometric experience map can often provide more value, context, and appeal for marginally more effort than a traditional map. Like with any other deliverable you produce, you have to assess the value relative to the effort needed to produce it.

What is IDEA 2009?

The IDEA Conference is about how to create experiences in a world where tangible and virtual are converging. And not just in a lofty way, but in a practical context for professionals who need to understand this convergence. Where are you seeing convergence in your job or life?

The EightShapes Workshop

Over the course of a full day, I’ll be speaking on modular techniques to improve your design and documentation practices.

In the morning, you’ll learn about components, each a chunk of a page, and how you can create, vary, and recombine design elements to produce a better, more usable solution. You will also get a glimpse of experiences we’ve had creating and managing component and pattern libraries for many UX teams, and take away useful techniques you can apply to your work and team’s process.

In the afternoon, we’ll shift gears and explore better ways to produce better design documentation. Using our own approach – EightShapes Unify – as a backdrop, we’ll demonstrate techniques for creating effective UX deliverables. From design strategy to research, page and component wireframe designs to effective annotations to even integrating comps and copy, you’ll leave with ample inspirations of how to better communicate many parts of your design’s story and collaborate with your fellow designer (even if you don’t use our specific templates, which we give away for free).

Why am I speaking on it?

I’ve been thinking in patterns and components for years, but didn’t really hit my stride on the subject until I worked with the incomparable UX team at sun.com, who built the gold standard on component libraries (take a look-see yourself, since they share it with the world at www.sun.com/webdesign/). Since then, I’ve had the great fortune to explore the highs - and the lows - of trying to implement more systematic design and deliverable libraries for a range of teams. It’s been a great ride, and coming out the other side I’m still a firm believer that we can communicate in a more unified, effective, and modular way.

What am I looking forward to most?

Aside from my own presentation, I’m especially looking forward to Social Design Patterns Mini-Workshop presented by Erin Malone and Christian Crumlish. No surprise there, I love thinking patterns, and Erin and Christian are always ready to put on a good show. In particular, I’m very curious how they are going to mash up patterns, a competitive game, and lucky cards. Competitively playing lucky cards in a pattern is one step closer to nirvana.

Join us in Toronto!

Therefore, we thought we’d share just a couple photos to give you a glimpse of how we’ve transformed pages into better platforms for storytelling. Warning: the last photo is a result of one of our interaction designers that just couldn’t help himself.

» Download the PDF Samples

Tips

• If you are trying to make a specific point or accentuate a particular theme, choose a powerful photo with an obvious object of focused attention, such as the dam below.
• If you’ve retained the header area as-is, with the gray line below your document’s title, logo, and such, then you can use that line as an effective upper boundary for the photo (or, for a diagram for that matter).
• Use a mood-setting photo on a chapter page, and then retain that photo as a more subtle backdrop or icon for the pages in that chapter.

Examples

Dam, for communicating mediated power

Cupcakes as a treat on a long day's walk through San Francisco

Shameless book promo, using cover shot as a chapter page

Cats! Jason Wishard, an EightShapes interaction designer, just couldn't help himself.

Templates

• Switch deliverable copy template to InCopy CS3 template file (.inct), with fully synced paragraph and character styles of the deliverable InDesign templates
• Expanded width of document title text area on the cover page of the tabloid-landscape deliverable template

Grids

• Increased gutter size from 10pt to 16pt for four and six column grids

Paragraph Styles

• Changed default deliverable paragraph style from [basic paragraph] to paragraphs > medium paragraph
• Changed figure (in annotations) to bold, italic, orange
• Added attribution for name/date/source, such as for quotes
• Changed spec header to have spec paragraph as “next style”
• Changed spec paragraph, spec bulleted list to have space after: 2pt
• Changed spec numeric list to have 12pt indent instead of 15pt
• Changed spec data format’s bullet icon to be wingdings 2 box
• Reduced spec header “paragraph rule below” to 4pt

Object Styles

• Changed diagrams connectors weight from 1 to 2, and arrows to simple with rounded ends.

_elements Libraries

• Added “spec legend” to /deliverables/_elements/markers.indl
• Added two additional overlays to /deliverables/_elements/overlays.indl with tails on middle right and middle left

_pages Patterns

• Added “Comparative Feature Grid” to visualize performance of two design alternatives in a usability test
• Added TOC Chapter Descriptions to augment your standard tables of contents
• Added Design Studio library including scenario sheet, plan, profiles, and teams
• Added sketching sheets (1×1, 1×2, 2×2, and 2×4)

Wireframes

_elements Libraries

• Added vertically resizeable text entry box (think: wordpress rich text editor) to Forms & Controls library

What

Therefore, I recent found it necessary to add more descriptive information about chapters of my deliverable by adding what I’ll call Table of Contents Chapter Descriptions. This page pattern (depicted below) includes presized grouped objects that include a gray horizontal rule plus a text area for the description you can place to the right of an area of your TOC.

How

When you drop the page pattern on top of an existing table of contents, you’ll have a few handy symbols and text areas to write up a brief description or rationale for each area of your document.

Considerations:

• The groups themselves (including the header text labels like “Wireframe Libraries”) are defined by adding Chapter pages to your document.
• Every time you update your table of contents, you may need to move the group objects around a bit.

Why

• These groups more effectively defined the document’s content without having to resort to an “About this Document” page that no one ever reads anyway.
• These groups set expectations as to what someone will find in each chapter.
• These groups - and the TOC in general - serve as a great way to start off a meeting with “Over the next hour, we’ll be covering…”

When

This page pattern will be available in the next release of EightShapes Unify.

Video Training

A piece of that puzzle is demystifying tool- and technique-specific topics through online instructional videos. Wireframes and deliverables aren’t all that hard, but if you don’t get the zen of things like components, modularity, styles and so forth, EightShapes Unify can seem like a whole lotta overkill. The basics shouldn’t be that hard.

Therefore, we’re beginning to author online course modules (yup, modular, big surprise) that will teach you everything from the basics (that’ll be free) to more advanced techniques (probably at an affordable premium). We’re so excited about this that I couldn’t help but share a comp of our video course page, which depicts a collection of 16 sequential videos through a broader topic.

EightShapes Unify Video Collection Comp, by France Rupert (@surferroop)

Your Feedback

So, what do you think? What kinds of videos would you find most helpful? What do YOU want?

Often times, the reason is that as you Save, Save, Save, Save your file iteratively over it’s life cycle, INDD’s format tends to save alot of historical information about your artwork and changes over time. Trouble is, it’s not like the file works as a Time Machine or anything - the information is just file bloat to you.

So today, as I rec’d a 33MB document, I applied my old trick of Save As. By doing a “Save As” over top of the original file, the file size was halved to around 17MB and all that bloat is removed. Much better, if still quite a bit large. Oh well, life isn’t perfect.