The Business of Design

CarDomain Hi-Resolution Wireframe

People always seem to ask what tools or software do you use for creating wireframes, so I thought I would make note of a few options out there. I have used some, but not all of these so a few of my comments and opinions are going to be based on demos or opinions from colleagues with applied experience. This list is by no means complete and it’s possible to create some kind of wireframe or diagram in many applications not intended for that express purpose. Although many of these programs can also be used for prototyping, I’d rather save that topic for another day. In the meanwhile Dan Harrelson at Adpative Path has a nice list of Prototyping Tools in his article. Many are mentioned in this post since they do double duty.  Here then are a few products and approaches for consideration.

White Boards – This is the analog solution for a digital problem and benefits greatly by virtue of its simplicity and accessibility. These are really just big white boards that can be marked up using colored dry-erase pens. You can also put Post-It notes right on them and photograph/scan in the results for distribution, review and archiving. These are really fantastic for very early phase ideation and concept work. One advantage they have is that nobody sees the work as precious or literal so ideas can evolve rapidly in brainstorming sessions and everyone can participate whatever their role or competency with design software. One of the best examples of this that I have ever seen was in a huge corporate board room with 3 walls cover floor to ceiling with white boards. The forth wall was all windows since it was high in a downtown skyscraper. I have seen some pretty clever interactive white board software solutions out there and some companies such as Smart Tech offer dedicated hardware and software products. This is something I would encourage you to investigate on your own should you have an interest.

Pros – Cheap, easy and flexible
Cons – Not digital so artifacts must be captured and converted so they can be distributed over a network.

http://www2.smarttech.com/st/en-US/Products/SMART+Boards/Front+projection/

Visio – This Microsoft product is an old standby and workhorse for the creation of wireframes and diagrams. It is easy to learn and use, has lots of built-in controls, images, shapes, connectors and other elements for rapid inclusion and exports to several common formats. In most cases though, I think it has been eclipsed for wireframing by many of the other applications in this discussion. In my opinion, its best uses now are for diagramming or charting things like workflows, data, networks and such. This includes pie, pivot, Gantt, PERT and organizational charts These types of tasks can probably be accomplished more quickly and easily in Visio than almost anything else. If you’re looking for clean, simple and fast, Visio may be your best choice. If you’re familiar with Unified Modeling Language (UML) Visio’s many built-in standard shapes will be a welcome feature.

Pros – Short learning curve and plenty of support resources available from Microsoft and elsewhere.  Speed and ubiquity
Cons – At USD $259 retail for the Standard and $559 Professional editions, this can be a little pricey if you’re not using it a lot.

http://office.microsoft.com/en-us/visio/default.aspx

Balsamiq – This handy little program retails for $79 USD for the desktop version and has a wonderful hand-drawn look so that clients and other stakeholders aren’t distracted by designs that seem too polished or slick. It is easy to use and pretty intuitive. Balsamiq is a desktop app, but has an online version currently in Beta testing and scheduled for release in 2009. The program uses a proprietary form of XML called BMML and claims it would be possible to write scripts that would convert into actual code, although I have not tried this yet.

Pros – Comes with a decent library that includes over 75 pre-built controls for easy drag and drop functionality. If you need additional art (shapes, controls, connectors etc) not included in the library, you can either import your own imagery or download something from their community site Mockups To Go. Has a decent community site where you can ask questions, get advice etc.
Cons –  Some limited export functions.

http://www.balsamiq.com/

Microsoft Expression Blend and SketchFlow – I have to admit that I had mixed feelings when I first tried these apps out, but have really become much more enthusiast as I have worked them and learned. SketchFlow is really the Wireframing tool where Blend is intended for prototyping and actually application development. True, they are somewhat limited to design and deployment using Microsoft’s proprietary WPF and Silverlight technologies, but I have found they do have uses beyond these as well. For example, some very nice wireframes and diagrams can be created with a very similar hand-drawn look to that of Balsamiq. They have a great library of controls and graphic elements that can be dropped in and customized very easily. These can be made interactive and shared with team members, clients and other stakeholders relatively simply so they can get a better sense of functionality without being distracted by look/feel. If you’re designing for WPF or Silverlight applications, having the software generate customizable XAML markup on the fly is a pretty cool feature and I’m sure is appreciated by the Dev-Team members.

So far Microsoft doesn’t have near the ubiquity with these technologies that Adobe enjoys with Flash, but give them time since they do seem to be pushing marketing and resources pretty steadily in that direction.

Pros – If you’re comfortable with HTML and CSS as well as the UI and tools found in many Adobe CS3 and CS4 applications, the learning curve for basic production isn’t too bad at all. Microsoft also provides some very nice training videos, a community and other resources for getting up to speed fast.
Cons – Well, it’s pretty Microsoft specific so it’s hard to justify shelling out nearly $600 retail unless you’re going to be designing and developing projects using their technology. They do supply a free 60-day trial version, so if you’re interested, you can make a lot of progress with it during that time.

http://expression.microsoft.com/en-us/default.aspx

http://expression.microsoft.com/en-us/cc197141.aspx

Adobe Fireworks – Even though I originally came from the PhotoShop universe before Adobe acquired Macromedia, I have come to appreciate Fireworks for the unique tool that it is. My first impression was that it was attempting to compete directly with PhotoShop and in some respect that was true earlier, but it really has come into its own as a fantastic application for designing Web-based solutions. It also somewhat straddles the ground between wireframing, prototyping and design. While some people are likely to use it in the context of creating more finished designs for Website or other online applications, you can still use it to generate very clean and even interactive wireframes and diagrams. These can then easily be developed further into evolved prototypes and finished designs. It’s a very versatile tool. Like many of the applications discussed in this post, it could be considered a little pricey if you are just using it for simple wireframing. But for a retail price of $299 USD (upgrade for $149), you get a fully featured image editing and prototyping application geared for working with online projects. Of particular note is Fireworks ability to generate wonderful interactive PDF files for easy distribution, demo and review.

Pros – Tons of features and functionality to go well beyond simple wireframing. Common Adobe UI makes learning curve very short for those who are familiar with other products in the Adobe universe. It also comes with a really great library of UI controls and other elements for quick and easy use with your projects. It’s possible to add a fair degree of interactivity to these elements and your wireframes. It also has plenty of export options and Web optimization capabilities.
Cons – If you already have other Adobe products such as PhotoShop or Illustrator, it may not be worth it to shell out more money for this application unless you are working heavily in Web and Interactive media.

http://www.adobe.com/products/fireworks/?promoid=121DJGSR_P_US_FP2_FW_CS4_MN&tt=P_US_FP2_FW_CS4_MN

Omnigraffle – This Mac only software application has a pretty dedicated following. It has plenty of tools and features to make creating great looking wireframes, layouts and diagrams a snap. It has solid import and export options too. At USD $99 for Standard and $199 for Professional editions, it’s pretty affordable too. Its parent company Omni Group also offers several other useful applications that Web Designers and UX Professionals may find useful.

Pros – Everything you need to quickly create very nice wireframes and diagrams. Affordable.
Cons – Mac only so Windows users are shut out.

http://www.omnigroup.com/applications/omnigraffle/

Axure RP Pro – This is a very high-end and capable suite for creating wireframes, prototypes and specs for Web and application development. The software comes with piles of built-in components, controls and other elements to assist in making rapid progress building your project. These are all versatile and easily customizable. It’s also easy to make templates and masters for better control over global changes. Axure makes it pretty simple to create working prototypes from wireframes that can be viewed a standard Web Browser, which is very nice for conveying functionality to clients and developers. One other thing that Axure does pretty well is its ability to create specifications documentation and then export as MS Word. The company has a pretty slick website with a nice Flash demo tour.

Pros – Easy to use dedicated program for creating wireframes and simple prototypes. Decent collaboration functionality.
Cons – In contrast to Omnigraffle, Axure RP Pro is a Windows only application and also requires you have MS Office Word installed. It’s quite pricey at USD $599 for a single user license.

http://www.axure.com/default.aspx

iRise – This product positions itself directly against competitor Axure RP by describing itself as Enterprise Grade solution. At nearly USD $7,000 it had better be. It is possible to download a 30-day trial version in exchange for an email address and a little personal information. iRise likes to refer to its solution artifacts as a working simulation or visual preview rather than a simple wireframe and/or prototype. Their website is slick and mildly aggressive in its approach to describing and marketing its product. I think their use of the White Board metaphor for early stage ideation and storyboarding is very apropos although certainly not unique. It also seems to have a decent approach to distribution, sharing, collaboration and review processes. One area that the  iRise working simulation may be especially advantageous for is in Usability Testing during all stages of an iterative process since it could more easily approximate a more finished prototype. The company also takes a purposeful approach to requirements documentation and specifications for a less ambiguous blueprint that business stakeholders, IT and Dev can buy into. In many respects, iRise does seem to take a more holistic stand with its product suite by explicitly addressing QA, Development, Program Management and other stakeholder needs as an integral part of its solution architecture. Full disclosure: I don’t have personal experience with this particular product so some of my conclusions and opinions are second hand or conjectural.

Pros – Takes wireframing and moves it far into the realm of prototyping and interactive visual simulation. More realistic representations have benefits in Usability and UX Testing.
Cons – Windows only application. Pricing starts at $6,995 for iRise standalone Professional Edition so you better have deep pockets and a real need.

http://www.irise.com/

Summary

As I mentioned previously, it is possible to use just about any software application to craft some kind of wireframe or layout scenario, so please forgive me if I haven’t included your favorite. I know lots of people who use Dreamweaver, Flash, InDesign, PhotoShop, PowerPoint, Apple Keynote, ConceptDraw MindMap and others to generate these kinds of solutions and artifacts. That said, if you’d like to share some of your favorite solutions or have an opinion, please feel free to comment.

One of the recurring issues I seem to encounter just about every time we’re creating wireframes for a new client or internal stakeholder is determining how much detail to include. In these situations, I’ve always had to fight the urge to put in too much detail and/or polish in order to make a better impression. In the past this tendency has bitten me more often that I’d care to recount, so now I go out of my way to avoid it. Why is the urge to deliver more finished artifacts early in the design cycle generally a bad idea?

The reason is that most people typically have a very strong inclination to get caught up in the details, including design look and feel rather than concentrating on things like functionality, workflow, information architecture, usability and placement. Virtually every time I’ve gone to the trouble to throw in a little color or some styling, the conversation invariably turns to discussions about irrelevant stuff like font choices, drop shadows, reflections, and round corners versus square etc. It seems that once the conversation has fixated on this kind of topic, the really relevant material is lost. It just seems a fact of human nature and believe me, it doesn’t just stop at wireframes and diagrams; it permeates so many other client/designer interactions as well.

So what is the solution? The easy answer is to resist the temptation to make early conceptual work slick or polished and go with some variation on the old “napkin technique”. By that I mean showing initial ideas in a state that looks like something you might have drawn on a table napkin during a lunch discussion. Make the early drafts purposefully rough and make sure you warn the stakeholder what you are doing. That way they won’t feel nervous about the quality of the finished design they’ll be getting and can concentrate on more salient items. It’s mostly a matter of managing expectations effectively.

Let me also clarify here, that I am not talking about designs for RFPs or other mechanisms intended to sell a prospective client, stakeholder or agency on an concept or campaign. There are times like these where it is in everyone’s best interest to produce something beautiful and more polished. If your Account Team is trying to close business, then only supplying them with rough wireframes and diagrams is virtually guaranteed to ensure failure. In these cases you need to provide examples where people can more easily envision what the final product might be like. This is especially critical with new relationships where the customer may be more literal in their interpretation of your design capabilities. Make them feel more comfortable that any final product is going to be a great user experience. Don’t make their imaginations work overtime in these circumstances. In these cases I would also make clear that the final design and functionality are going to evolve and change. Managing expectations is important.

In circumstances where you are creating wireframes and diagrams that have more practical function as in during the actual Software Development Lifecycle (SDLC), then producing wonderfully beautiful and polished artwork early is likely going to bite you. For these cases, you’ll make faster progress and better convey functionality through much simpler and cruder imagery. There are a few pretty easy methods and tools for accomplishing this including scanning sketches, photographing whiteboard diagrams and software like Balsamiq etc. I will cover some software tools for Wireframing in another post, but it’s possible to make rough low fidelity wireframes and diagrams in virtually any program you’re most comfortable with.

Lately, I’ve heard a few people in the design community talking about how user interface (UI) should now be considered the brand rather than some of the more traditional descriptions and metrics employed in its definition. The primary reason being that the interface sits between the audience and the content and allows this experience (or not) to take place. This is really the location where the audience or customer experiences the brand.  As an example, I recently saw an interview clip of Dale Herigstad, Chief Creative Officer at Schematic and a really superlative creative visionary whom I admire tremendously, in which he posits this exact thing. In fact, this is where they seem to have positioned their company strategically in order to do business.

I think there is a lot of truth to this, but I would also expand it out to include the complete user experience (UX), since I don’t believe any one individual aspect of the online interaction such as the user interface (UI), usability or accessibility fully describe it. I’m pretty confident this is what Dale was alluding to in the clip I saw, but I’ve also heard others take it more literally and I think this would be a short-sighted approach.

Let me explain briefly. Usability is primarily concerned with how well (efficiently, effectively quickly etc.) your intended users can accomplish what they are trying to do during their interactions with your website or other online application. In this respect, it is focused more on task-based operational or transactional activities than broader goal-based pursuits. That is fine, but of course doesn’t tell the whole story. Likewise UI can be looked at as the primary means of interaction thereby becoming the most visible artifact users encounter when dealing with your site and consequently even your company. I think this is probably where the idea of considering the interface as the brand really took hold.

What about those cases where the interface really enables to users to complete tasks quickly, easily and efficiently, but where the overall experience is dreadfully boring or unattractive? For example, the Spartan, utilitarian approach that Google or Craigslist take for their interface work beautifully for their business model, but would the same solution work on a social networking site such as MySpace, Facebook or Bebo? It’s pretty doubtful. Even within these latter 3 websites, there are different degrees of customization and design available to the user that appeal uniquely to their individual audiences.

As another example, when I was Director of Creative and User Experience at CarDomain Network, we had to think very carefully about the UX issues beyond simply the interface. CarDomain’s primary audience is young males 18-34 and if we launched the site say with a pink color scheme, but exactly the same interface features and functionality, we would have severely compromised their overall experience. This ultimately would have disastrously compromised traffic, revenue and site viability. These and many other factors determining the overall user experience are what really defined the brand, not just the UI.

Even though Web 2.0 and other recent changes have really forced a paradigm shift in how business thinks of brands and branding, by considering User Experience (UX) as inextricably tied with the brand, I think you come much closer to branding as understood in the more traditional sense. UX is concerned with the positive and negative effects as well as the attitudes they generate with the audience interacting with your site, service or product offering. I also believe this is a more accurate description, better able to suggest ways in which brand opinions may be improved or influenced through a multiplicity of actions. Considerations such as the interface and usability are simply component parts of the broader concept of user experience. In his book “The Brand Gap” Marty Neumeier defines a brand as a person’s gut feeling about a product, service or company. This seems a much closer metaphor with user experience than it does with simply the interface. The big difference I believe is that in the old model, companies “pushed” marketing to the customer in a sort of one way monologue. With today’s media savvy audience, that approach doesn’t fly so organizations must provide vehicles that fully engage users and promote healthy discussion or dialogue.

Having said all that, I think there is a real business opportunity for companies like Schematic that want to specialize in just the interface for example. Having that kind of focus could be a very profitable business model for designers and others. Aside from Schematic, usability guru Norman Nielsen is ample proof of that idea. At the same time, as much as I admire Nielsen and have learned from him, my personal opinion is that he is far too ascetic in his thinking and recommendations. I’m certainly not alone in my opinion here and there are endless amounts of discussion over this matter.

The point I’m making here is that you could take Nielsen’s advice and deploy an incredibly usable site, but ironically still not end up with something anyone wants to use because it is simply unappealing or unattractive to them. I do think that a lot of marketers, brand managers and other business professionals would do well to consider some of these ideas when they are crafting brand strategy. The user interface is probably the most easily understood by most people because of its visibility, accessibility and function, but it does not work in a vacuum. It needs context. I think we need to look beyond it and consider user experience as perhaps the primary measure of brand.

One quick and easy metric I really like as part of the larger user experience toolbox is the Net Promoter Score or NPS. Originally established as a tool for determining customer loyalty, it’s also a quick and easy way to gauge what users think about your website or online application. It’s something that can and probably should be done before beginning work on an existing site as well as part of the regular (and broader) program of site analysis and performance.

NPS was developed and trademarked by Frederick F. Reichheld, Bain & Company, and Satmetrix. He first introduced it in an article for The Harvard Business Review in 2003. The idea is that its simplicity allows ordinary employees easy access and understanding as well as providing them the motivation to do something about it.

It works on a scale of zero to ten and divides users into three categories: Promoters, Passives and Detractors. Promoters live in the 9-10 range and signify loyal enthusiasts who will actively work to promote your site. Passives exist in the 7-8 range and represent people who are satisfied, but generally unenthusiastic. These users are particularly vulnerable to alternative competitive offerings. Detractors occupy the largest range from 0-6 and signify dissatisfied users who are likely to actively damage your brand through negative word-of-mouth or other communication. It’s worth noting here that 5 on the scale is still considered a “neutral” position even though 6 is included in the Detractors category.

Calculating your site’s NPS is relatively simple and posits this simple question to users: “How likely are you to recommend this site to a friend or colleague”? Once you have all your sample data in hand, subtract the percentage of Detractors (0-6) from the percentage of Promoters (9-10) to get your score. A score of 75% or above is generally considered extremely high.

Of course just obtaining results from this one query doesn’t solve any problems and follow-up questions to obtain more detail are crucial to understanding why users hold the opinions they do. You also have to act on it and make changes to help improve the overall user experience. NPS is certainly not without its own detractors and is surely limited in its predictive capabilities, but overall I have still found it to be a useful “sniff test” for determining users feelings about a site.

Here are some links you might find useful:

• http://en.wikipedia.org/wiki/Net_Promoter
• http://www.netpromoter.com/netpromoter_community/index.jspa
• http://harvardbusiness.org/product/one-number-you-need-to-grow/an/R0312C-PDF-ENG