Introduction

When Bob approached me with the idea of writing a book of interviews about Mockups, I was hesitant.

We really appreciate it when other people say nice things about the tool we so lovingly build, but we're naturally shy about doing so ourselves.

Being humble and genuine are values that are at the core of our company since the beginning, so I was afraid that publishing a set of interviews would come across as too "marketing-y", too pushy.

Then I thought, why not turn this into a learning experience, for us and for our customers?

We are told by many that Mockups is useful to them, but in the vast majority of cases we don't know much beyond that.

We were curious to dig deeper, so we picked nine people, with varying backgrounds and job titles, and decided to interview each of them over the Skype.

I made sure to stress to Bob that my goal was to find out how Mockups fit in their workflow, how it helped them but even more importantly how it did not help them, or what parts of it they wish we could do better, or do more of.

The results were really interesting, so we're publishing them in this free ebook on our website for everyone to see.

If you are a developer, product designer, product manager, UX consultant, venture capitalist, incubator, creative professional or a startup founder, you'll be able to see how others like you use Mockups for their job.

We'd like to thank Bob Walsh for interviewing everyone and editing this book, and of course our wonderful interviewees Ryan Carson, Robert Frye, John Clark, Adam Wride, Mark Smith, Jaleh Razei, Theresa Neil, Hadar Wissotzky, James King and our own Michael Angeles.

Thank you all so much for sharing your experience with our little tool with us and our community.

Peldi for the Balsamiq Team

Viewing Online

Chapters may include links to online content. Blue underlined text indicates a link. Click those links to view that resource online.

View this ebook online: at http://www.balsamiq.com/products/mockups/interviews/

Ryan Carson - Getting to the Realm of the Real.

Ryan Carson is the founder of Treehouse, an online learning service for web designers, developers and iOS.

Interviewer: Let me get started by asking, so how do you make a living?

Ryan: Through our new startup, Treehouse. I just sold our events company, so I can focus 100% on it. We use Balsamiq a lot for Treehouse for wireframing new features.

Interviewer: Tell me more about Treehouse.

Ryan: Sure. We felt there wasn't a good solution to learning quickly. If you want to learn web design and web development you can read a lot of books which is great. You can do a quick Google and you'll probably end up on Stack Overflow or something like that.

But a lot of people want to be taught. It's expensive to get taught in person. We just thought, "You know what? We have a great community. We are passionate about web design. There's a big need here. Why don't we try to see if it works?"

An interesting story

Ryan: I've got an interesting story about how I used Balsamiq to start the project, if you want to hear that?

Interviewer: Let's hear it.

Ryan: I'm a big believer in the "Minimum Viable Product" methodology.

Interviewer: i.e. lean startup?

Ryan: Exactly. What we thought is... We have this idea, let's do a service where people can sign up, they pay us monthly and they get access to our entire video library. How might that look and what is it?

So, I quickly knocked it up in Balsamiq and then I tweeted it. It was literally, "Here's the home page." In my mind, I was trying to clarify what is the marketing message. What is it?

I think it was a simple video page where it showed what the interfaces are going to look like. Then I tweeted out to my followers and said, "You know, we've got an idea for a product and I’d loved to hear what you would pay for it. So, please tweet back at me and let me know, and I'll let you see it”.

I'm fortunate to have a chunk of followers and so I got back a ton of replies right away. I just DM'd them a link. I uploaded a PNG of the wireframe and I just said, "I'm not even going to tell you what it is. You tell me what you think this is and whether not you would pay for it? And how much you would pay per month?"

Interviewer: Talk about minimum viable.

Ryan: Yeah, it wasn't even a product. It was just a PNG. It was amazing. Literally, the overwhelming majority was, "This is awesome. I would pay for this. You bet."

Then, we took the idea from there and we built it in about two months and charged money from day one. It's been a success ever since. The wireframing of that and the rapid prototype cycle was super important to us.

Interviewer: Well, you could've done the same thing in PowerPoint right?

Ryan: No.

Interviewer: No? Tell me why.

Ryan: Well, I'm crap at PowerPoint. It's one of those things where...

Interviewer: You're one of the best-known designers in the Internet. Come on? You're crap at PowerPoint?

Ryan: Also, a funny clarification, I'm not actually a designer. I just hire good designers. I have a computer science degree, so I'm more on the developer side. Carsonified has been lucky to be known as a great design shop, that's just because we've always chosen really great designers to work with.

Interviewer: When this Balsamiq PNG went up, did people ask you what it is that you're trying to show me here? Did they get the idea from what they saw on the screen?

Ryan: Yeah. I think so. It's easy, thankfully because our audience and our customer are all ready web designers and web developers, they all ready understand what a wireframe is. If you say that word, they get it. Whereas, if I think I had traditional customers, they'd be like, "What? What are you talking about?" So, they got that.

I was lucky enough to be able describe the product on a mockup of the home page. What is the catch line? What image do I use? What copy do I use? What example do I give that explains the service? That was part of this exercise. I wanted to go through and say, "If I showed you a home page, would you find it convincing and would you understand what the product is?"

Thankfully, they did. I can't member all the feedback, but in general it was, "Wow, this is great and I think you should do it."

Interviewer: Do you use Balsamiq Mockups in any other ways?

Ryan: We use it all the time just for quick mockups just trying to figure out an interface. We definitely tried to get stuff wireframed and then into HTML very quickly.

I really strongly believe that it's important to not opine too much about an interface. It's important just to get it on the screen and see if it actually makes sense, because you can talk for a half an hour about, "Should we talk about this on the page, and then put that there?" And then as soon as you go, "Oh, the text needs to be bigger. It doesn't seem important, that part of the page. Make it bigger." Then you actually start talking about real stuff.

So we use it quite a bit.

Interviewer: Are you using myBalsamiq as well?

Ryan: No, I am not.

Interviewer: That's the new product they're working on. It's basically Balsamiq online.

Ryan: Oh, wow. Yeah, I'm glad they're doing that. I always felt like it should have been a web app, so it's nice to see it go that way.

Interviewer: The reason Peldi probably didn't do it that way is that when he was basically on his own, he didn't want to bite off more than he could chew. Web apps take some infrastructure to keep going.

Ryan: True.

Interviewer: By the way, what do you develop in, usually?

Ryan: We're a Rails shop, so we're a traditional stack: Rails, MySQL...

Interviewer: I don't think you can quite yet put traditional and Rails in the same sentence.

Ryan: [laughs]

Interviewer: But don't tell DHH that.

Ryan: I live at the bleeding edge, where it feels normal, but I guess you're right. It's not quite normal yet.

But ironically, we're starting to branch out into iOS and these very sorts of closed gardens, just because there's so much fun to be had there. We're teaching iOS now at Think Vitamin. So we'll probably eventually roll out an iOS app and at that point we'll definitely be wireframing it to figure out what that should do.

Is Balsamiq Mockups just a better Powerpoint?

Interviewer: I'm wondering if Balsamiq Mockups is more than just a better PowerPoint?

Let me try and explain what I mean. You were mentioning before that you can spend half an hour, and hour, days, theoretically talking about what should be on the screen in relationship to each other, the elements that are there, and until you get some sort of mockup, you're just not in the realm of the real yet.

One of the problems that people in IT and also in design have is way too much information when it comes time to design a web page. There's this list that goes on forever of things they should and should not do.

I'm looking at Balsamiq, and I'm seeing other people are using it as a way to basically get real in an unreal way so they don't have to explain why a particular shade of red is that shade.

Ryan: Right. That makes sense.

Interviewer: Well, it makes sense to me. It makes sense to you, but how about to other people that you work with?

Ryan: I think, unfortunately, I'm an edge case. My whole world is web designers and web developers. We don't even have real clients that are running on traditional business when they don't eat, breathe, and sleep web. So for me, it all makes sense. Everyone I talk to, it makes sense.

I think things like the iPad are bringing the idea of building applications and websites to the masses, and saying, "This is quite cool and it's quite easy..." And so, probably more people are thinking about it. But yeah, it would be interesting to find out how normal people perceive that.

Interviewer: So what don't you like about Balsamiq? What do you dislike?

Ryan: That it's not a web app. That's really the only thing that's frustrating to me. Just from the beginning, but obviously they're changing that, so I can't wait to try the new product. Is it out right now?

Interviewer: It is in "gamma."

Ryan: Gamma. [laughs]

Interviewer: Yeah, and that means that they have a limited number of actual paying customers, and they're making sure that all the bugs that need to be shaken out are being shaken out. I will definitely mention to Peldi that you would like to join that group of people, because it sounds like exactly what you'd like to do.

Ryan: Oh man, yeah. Big time. I'd like to write about that, talk about that product. The web app space is heating up, so I think it's good. There are products like Mockingbird and HotGloo that have been web from the beginning.

I have so much respect for Peldi. I love his personality and his style, as well. It's always blown my mind that he's been as successful as he has with a traditional software model. I understand now. He just wanted to bite off what he could chew, but recurring revenue is just like the lost gold of the jungle. Once you find it as a business, it's just mind-boggling how wonderful it is. So I think both from a user perspective and from a business perspective, they're going to find that a recurring revenue model works really well.

Is having keys to your car useful to driving it?

Interviewer: Let's say that I was lucky enough to sit down next to you as a new, aspiring web developer at one of your conferences, and I noticed that you had some Balsamiq mockups printed out that you were looking at, and I asked you, "Is that really useful to a web designer?" What would you tell them?

Ryan: Oh my gosh, yeah. I would say is having keys to your car useful to driving it? It's pretty much that vital. You can't be a web designer or a web developer without doing mockups. It's absolutely essential, and it's super useful. I can't imagine not using it and why you'd even want to.

Interviewer: Let me pick your brain for just a second, there. You've watched web design change, morph, and evolve. Any advice for people who are graduating college or deciding that this is what they really want to do? Where should they really start, besides Think Vitamin?

Ryan: Besides the product?

Interviewer: Yeah.

Ryan: Well, I would say that the first thing to do is get out there and learn some basic HTML and CSS and JavaScript. And if you're on the design side, you want to learn some basic principles of UX, or user experience.

Get started with those real things, but the most important thing is just to start building. If you are a developer, create your first app, probably in Rails, or a Ruby app with Sinatra. Just get it out there. You can use servers like Heroku. You can deploy your app literally with one command line. It's mind-boggling.

So the development side is pretty straightforward. The design side, I'd say, is more focusing on UX, usability. The web is the medium. Figure that out.

Of course, I do think people should try to learn from a good source, and I think Vitamin membership is the way to go for that. But there are a lot of good free resources as well to get you started.

The best thing to do is get out there and start doing it. Ask people as you have questions, but don't spend too long reading about something or watching a video. Just start building or designing.

Robert Frye - The UX Guy & the Developers

Robert Frye is a UX designer, teacher and entrepreneur. He is presently User Experience Engineer for Schakra, Inc., a Redmond, Washington software development firm.  Previously, Rob co-founded frye/wiles, a creative web agency and taught UX in the Web Design and Interactive Media program at Art Institute of California, Inland Empire.

Interviewer: What do you do?

Robert Frye: I'm a UX engineer. Technically I guess that's my title. What that means is I'm working with a team of developers on a platform that helps people be more productive with social media and communications. I work for a company called Schakra in Redmond, Washington. The project that we're working on is called GoGoStat.

Schakra is not just a startup, it's a software department company, a software consultancy. Thus we do a lot of implementations for large organizations -- you can probably guess a few based on our location -- as well as developing our own products.

The UX guy amongst the developers

Robert: I'm the sole UX designer on a team of developers. So what I'm doing basically is developing the user experience, user interface, branding, all that stuff for a series of web and mobile applications.

Interviewer: How long have you been using Balsamiq Mockups?

Robert: Really since we started this project. That was kind of when Balsamiq first hit the scene. It was about two or three years ago. I think that we were probably one of the early adopters of the product. We just sort of found it.

Actually, one of my bosses found it and thought it was a really neat way to start really interacting with the development team on the UX side. That's a constant challenge. We're an agile team, which means that we're doing continuous delivery of stuff.

To work in that atmosphere with a bunch of people whose specialty is obviously not user experience, it can be really difficult to quickly communicate ideas for continuous delivery, if that makes sense.

Interviewer: It does. But can you give me a for instance or a day in the life of type stuff.

Keeping up with Facebook

Robert: Yeah, sure. What's a good example of this week? We are really using Balsamiq constantly. Let's say, for example, we have a few mobile applications that we're working on. One of them is a product called Parental Guidance which allows parents to monitor their kids on Facebook.

Facebook is constantly making changes to their product, which means we're constantly allowing more things for parents to monitor through this product.

So say, for instance, Facebook releases new information about their wall feed, like we can now check not only what the kids are posting, but what their friends are posting, that kind of thing.

So we would need to revise what our user interface looks like, but that's not a complete revision of the product; it's just a revision of one small section of the product.

The way that we would approach that is we would start with Balsamiq. Actually, we'd sort of define what the requirements that we want to go after are, and then we'd start Balsamiq and quickly whip up a quick, overall sketch with the program of what we want to accomplish.

What's great about using Balsamiq in those processes is it allows us to then take this quick sketch that we spent a couple of minutes on and get buy off from the people who are paying for this stuff.

Interviewer: So it's not just the developers and you. It's the money guys.

Robert: Yeah. So everything ultimately comes down to money. All development costs money, and so if this is money that we want to spend on developing something, we need to get buy off from the product owners.

With Balsamiq, we can do that in a way that is very cost-efficient, I would say. In other words, it doesn't take us long to whip up a mockup of what we want this functionality to be and what we want it to do and quickly get this through the process of saying this is going to work or this is not going to work.

I think that's really been the contribution. That's what sketching a wireframe is all about: minimize the risk and increase the participation of all members on the team.

Interviewer: I'm curious, are you using symbols, which are a form of templates?

Robert: Yes.

Interviewer: So do you have a base template for this product and then you go from there or a set of them? What's the nitty-gritty like?

Robert: I would say we don't have a set process for every project. I think that what we're doing is so fast-paced and the requirements change so quickly.

For some things, we would definitely have a base template that we would continually increment on. Sometimes it's not necessary. Sometimes if we're just designing one screen, we'll just design that screen. It doesn't need to incorporate all of the other functionality of the rest of the application.

As far as the Symbols when we're using Balsamiq to design new products, especially if we're approaching a whole new piece of software that we're developing, then we're definitely using the Symbols feature, the templating features.

Interviewer: How do you explain Balsamiq to other people? If a new dev comes on the team who's not been doing this and they say, "So why are we doing these Balsamiq things rather than just either mocking it up in HTML or using Photoshop or PowerPoint?" What do you tell them?

To see is to understand

Robert: I've never had to explain the rationale behind it, to be honest. I think that people really quickly understand the benefit once they see what we're doing with it.

I think that as the only UX designer on this team, I'm sort of depended upon to set the tone and the methodology that we use. I'm very much in the school of designers who believes in lots of sketching. I would call myself a disciple of Bill Buxton. He wrote a great book called "Sketching User Experiences," which is one of the overriding books in the industry, just one of those things that lays down great methodology. The tone that I try to set is that we try to resolve as many problems as we can in the way that's the most disposable. In other words, we can make lots, and lots, and lots of changes. And because of that, I think that's why we naturally jumped right into Balsamiq because it was a natural fit with that kind of methodology.

Interviewer: After you do up a sketch in Balsamiq and you send it over to dev people, do they alter it? Are they getting their hands into it?

Robert: Yes, absolutely. I'd say everybody on the team is. One of the things about being on an agile team is there's not a whole lot of send it over to somebody. It's like everybody is kind of collaborating on stuff in the moment. But there's definitely input from all members of the team, or all members of the team who are working on a particular feature or particular product at the time.

Interviewer: Do the dev people ever say, "Hey, we want to do this with a dialog box. What do you think?" and they use Balsamiq to show you what they're talking about? Or does it all kind of start with you and then go elsewhere?

Robert: It really depends on the developer. Some developers are doing that on our team right now and some of them are not. I would personally love to have everybody doing that, but we'll get there.

Interviewer: Let's say hypothetical big company buys Balsamiq and requires you to all use their hypothetical presentation software. No more Balsamiq and you've got to use something else. Is that going to make your job easier, harder, not really going to make a change?

Robert: It would definitely make things much more difficult. Like I said, at this point, we have Balsamiq really integrated into the core level of product design and the ability to have so many Symbols and controls and all that stuff available at a moment's notice really just adds such a huge amount of efficiency to what I'm doing. I think not having the product would be detrimental. We would just incur so much additional time in what we're doing.

Honestly, probably if there was no Balsamiq, if it disappeared off the face of the earth tomorrow, I would probably go back to sketching by hand or on whiteboards, which is still something that we do quite a lot.

Interviewer: Just because the low fidelity works for you?

Robert: Yeah, absolutely. I'm a big believer in low fidelity planning, I would say.

Interviewer: You mentioned the money guys who really sort of ended up being more like the product managers. Let's say that there had to be a presentation to some real money guys: VCs. You always want to try and get your best show together for that. Would your company be comfortable showing mockups to them, Balsamiq mockups, or will they try and get somebody a little more high fidelity?

Robert: Yeah. I personally would love to be doing work directly with the big stakeholders in Balsamiq. I haven't honestly found a way to push that through management yet. [laughs] Typically, the way that we would approach that is we would use Balsamiq as the preamble to what we're going to present, but then present something in a little bit higher fidelity.

I think that probably speaks more to lack of creativity on the part of some of the people. Not all of the people, but some of the people we present to. Sometimes you need to spell it out a little bit more.

I think that we're kind of in this stage of infancy and the idea of low fidelity mockups and interactive design, it's unfortunately not something that's understood by all levels of all people throughout the process yet. I think we're definitely making a lot of progress in that direction and it'll be great when we get there.

Collaboration = Disposable + Speed

Interviewer: As a UI development expert, what do you like the most about Balsamiq and what do you most dislike?

Robert: I think what I like most about it, without a doubt, is the speed with which I can come up with ideas and iterate ideas and change things, especially with the new templating stuff like that. It's just kind of even faster.

For me, that speed also conveys this idea of disposability which is really important for low fidelity. If something's disposable, you can get collaboration from the team. If it's not disposable, people won't really collaborate because they think that you're done. That is extremely valuable.

As far as what I dislike about it, I don't know, I think there's probably little things that could be tweaked. As a company, Balsamiq is great about lots and lots and lots of releases, which I love. I would love more and more and more controls at my fingertips.

I don't know. I'm sorry. I hadn't really thought about that question too much.

Interviewer: Let's say that you met another UX development expert at a conference and you were talking shop and they had never heard of Balsamiq. Would you recommend it to them?

Robert: Yeah. I would actually be a little suspect these days of a UX guy who hasn't heard of Balsamiq. [laughs] I would absolutely. I think not only am I at the point where I'm recommending to the UX people but also to pretty much anybody I can get to start using the product.

One of the things that's great about Balsamiq is that it's accessible not just to people like me, but it's accessible to people like product managers and developers. Anybody can sit down with it and use it to convey ideas quickly.

I guess I would say if I had to explain why you need to be doing sketches to a UX person, that's probably not a real UX person. If I had to explain why you need to be using Balsamiq, I'd say it's the best, the fastest, most efficient way to be doing sketching for interactive design.

Interviewer: By the way, how did you get into this field? Did you start over in the development side or come up through graphics?

Robert: I came up through graphic design. I have a degree in graphic design, about 10-12 years ago now. It then went into web design which then went into interactive and mobile application design. Just sort of a continual, gradual process. I think that it's something I just migrated into. I've always had an interest in interaction. It was kind of a natural migration on my career.

Interviewer: Any favorite tip, or watch out for this or anything else that comes to mind?

Robert: I do love Mockups To Go. That's maintained sort of on the side by Balsamiq. I think if I had to give somebody a tip, it's make full use of that because it will save you lots of time.

Since we do stuff that integrates with Facebook and there are Facebook templates on there that means I can mock up an entire process from start to finish even if part of that process involves Facebook’s software.

John Clark - Doing it in the Enterprise

John Clark (@webfeedback) is a Scottish freelance software developer focusing mainly on enterprise-level work for banks and other financial institutions. John is also the founder of Kupima, a video website feedback service.

Interviewer: I think maybe the best place to start is tell me what you do?

John Clark: I do a number of things. The main thing I'm working on at the moment is creating the first product for my company. The background to my company is it was set up so I could do freelance work, or a jobbing coder if you like, working for banks.

But a few years ago, I became a dad for the first time and decided that a change of lifestyle would be a good thing. I was always looking for the opportunity to work closer to home and be my own boss, and that happened around about a year ago. I came up with the concept for doing a web-based service for user feedback. And, to be perfectly honest, it's quite similar in its goals to something like UserTesting.com, which I'm sure you're familiar with.

Interviewer: So you're going for a user experience app?

John: Basically, yes. I saw something like UserTesting and thought, "That's quite good. It's a good idea that delivers a lot of value," but I felt that there were things it didn't do. I don't like to knock a competitor, but I had my own view of how it could work. They've proven the market, clearly. They've been going a few years now. So rather than taking on a very risky and completely new type of application, I thought, "Well, let's do something in an established field and try and do it in a way that presents a nice alternative."

That idea sort of bumbled around a little bit, and I started working on some screen mocks, just layouts and things based upon websites that I'd seen and I quite liked the look of. I discovered Balsamiq around about just a little over a year ago.

One of my interests has always been sort of software prototyping. In fact, I've got a blog about software prototyping. When Balsamiq came up, I just fell in love with the concept. Since that day I've used it for pretty much everything that I'm designing and developing. And I've become, I suppose you could say, the de facto U.K. sales rep for Balsamiq, forever singing its praises. Because, to me, it delivers great value, great benefits. It works very well.

Interviewer: Do you use Balsamiq Mockups for all your projects or just your project rather than the banks'?

John: Well, the problem with banks, by and large, is that you can't bring your own equipment into the bank, so there's always a resistance to doing anything in any unusual way. You have your mandated standard software builds on the bank PC. You can request new software, but it's a torturous process. It can be long and drawn-out. And in fact, for a $79 bit of software, you'll probably spend the same if not more in wasted time chasing up purchasing and so on.

Interviewer: Okay.

John: I used it, but what I actually did was, having got the local administrator rights on the machine, I just downloaded the trial. I realized that I had my own license, of course, but I didn't want to have the license used in two places. Obviously, the bank can well-afford to buy it. So I had my seven-day window, with which to do what I needed to do, generate PDFs that can be printed. And of course, I found the hyperlink support in Balsamiq, actually it works well in PDFs. You can have an interactive PDF. I was able to put this in front of a few people, and they could see a lot of value in this.

I know a couple of developers there went on and bought their own personal licenses. So a little outgrowth of sales in Edinburgh, just as a result of actually using it in different environments. But as far as using it in all my projects, well, I use the tools which are best suited to the job, and I used to use a tool called Axure. It's a more fully featured, rich prototyping tool.

I was working at Royal Bank of Scotland as part of a tactical design team. Basically, we were working on a big prototype for an enormous banking redesign project, which was since canned. Obviously, they had [chuckles] bigger problems than to be taking on huge projects. But there were four or five of us working basically full-time for three months just on the prototype, so you can imagine the scale of the thing, the ambition.

I found a lot of value in Axure. But the problem I found with it was that, because it's such a rich and capable prototyping tool, there was a temptation amongst senior business stakeholders to look at these prototypes and think, "This is great, but can you move it three millimeters to the right? They were far more concerned about, "This thing doesn't align with that thing." So I found that in a way the value of Axure was being diluted by the fact that it basically does too much.

The thing that attracts me to something like Balsamiq is that it never ever attempts to look like the real thing. I know it could. It is possible to create widgets and add-ons that could do that, but the beauty is because it doesn't, because it tries to look like a sketch, people treat it as a sketch. Because of these things, you don't have to worry about the alignment. It frees you up from some of the visuals to concentrate more on what you're doing rather than how it looks.

Interviewer: You mean the functionality?

John: Absolutely. And I found is, the speed that you can turn things around, it became an interactive process between a developer, like myself, and, say, a business stakeholder. In the banks, one of the things I was quite pleased with was that more often than not they wouldn't put obstacles between the developer and the business person. They were quite prepared to let the two meet. And once you did that, they realized that by cutting out all the middlemen and using a tool which is very, I call it, responsive, is like a car having great handling. You turn the steering wheel and you get, in that instant you get action. Well, a good prototyping tool like Balsamiq has a terrific responsiveness to it.

And so, if a business stakeholder says, "Well, actually, we really want to have this information captured on that screen," I can do it there and then. It can take a couple of minutes rather than having to do the round trip of going through a project manager who then schedules the work and it grows arms and legs.

So I felt that the business was getting much more value and were much happier with the way things were going. And, of course, you can claw back a lot of time, basically, by cutting out the middleman and working directly with the business in front of a responsive tool like Balsamiq. And that for me is hugely valuable - now that I’m a freelance developer.

Widows, Jack Manager and Excel

Interviewer: So where have you used Balsamiq?

John: Where I introduced it, recently, was at a Scottish investment bank that’s a subsidiary of a much larger bank.

The scenario there was that they had a business analyst who was basically creating mockups for a fairly large system that was being built in Enterprise Architect and Microsoft Excel. And she'd been spending ages doing this.

Whilst the data side of things - the actual entity relationships and so forth - were being modeled quite well, to make any changes to her designs was a huge effort for her. And because the tools were not at all suited for the job of specifying an interface and evaluating an interface, they really needed something considerably more responsive, which Balsamiq is.

I saw it, and at this point, I wasn't even working on that project. I was this nosy guy working on a completely different project who just had to say, "By the way guys, have you ever seen this?" And obviously there's a little bit of friction there, because somebody had spent a lot of time building things in Excel, which is the wrong tool to be using.

Interviewer: What happened next? Did they adopt it?

John: In parts - the problem was more political than technical, as you can imagine, because Jack Manager somewhere had authorized taking this person on to do Enterprise Architect, to do all of that. And this guy, who wasn't even part of the project, had basically said, "What you're doing is silly. Try this."

So there was a bit of friction there. And sometimes us geeks, we're maybe not the most politically aware animals. I think, for my part, I tried to be quite tactful about it. I didn't force the issue. It was almost like, "There is this other thing. Have a little look at it."

So I actually took a couple of the screens that they were developing. And in my own time, made Balsamiq versions, and then saved them as a PDF and emailed it to people in the team and said, "What about this? Would this kind of thing work?" And they were impressed.

Now the thing is, I left before that project finished, so I don't know how far they advanced with it. But the real difficulty in any bank is the governance over what software can and can't be used. So there was a tremendous amount of resistance to doing things with, let's put it bluntly, non-Microsoft-based software. So if it isn't Microsoft, you have a hard sell to get that in.

Now, the price of Balsamiq means that it can fly under the radar, price-wise. But there's always this thing, "Well, what is this third-party software?" And then, of course, there's the problem of the technology platform itself. Internet Explorer 6 is still used throughout.

The sad truth is that Balsamiq may be too cheap to be taken seriously by a bank like that. So in a way I think a more Enterprisy-priced version, even if it was the same thing, might actually do better, crazy though that sounds.

What do Developers get?

Interviewer: Well, you are coming at this as a developer. JAVA and .NET are not graphic design languages. They're hardcore development languages. As a developer, how do you feel about Balsamiq? Do you find that it's easier to express your interfaces with Balsamiq than trying to explain it to people or use PowerPoint or what have you?

John: Yes. [laughs] To be very, very brief. I think it makes it much easier because when you're trying to design with a heavyweight tool, such as .NET, you find that the tool leads the design. Because you might want to do something in one way, but you find that it's just going to be an awful lot of heartache to do so. So you tend to compromise your design based upon what's reasonably easy to do. So for example, in .NET, you have a number of supplied widgets.

Interviewer: Controls.

John: Yeah, controls, some of which you'll be very familiar with. And the tendency is, because you're familiar with these things, you will use them. It's the old saying that, "When you have a hammer, every problem looks like a nail."

Again, I am a developer. That is my background, but I've done design work in the past. I'm actually pretty lousy at the graphical design, but I can work with sort of building blocks of design. And I find the same is true of something like Balsamiq. I've got a fairly good grounding in user experience and usability from having been a web developer for a number of years with an interest in these things, but I've never aimed to specialize in it.

I found myself almost specializing in a kind of technical business analysis role when I was working with tools like Balsamiq, which was a completely new place for me.

Interviewer: Let me ask you, to be fair here, what don't you like about the Balsamiq?

John: It's a tricky one, because I've never really viewed it with a very critical eye. I would like it perhaps to work a little bit better as a team tool. Now, it's just myself at the moment so it doesn't really matter.

But I've often felt that if it could have a few more -- and I hate using this phrase but -- enterprising features so that two people could work on a design at the same time, and it may well already have this. The fact that it doesn't natively integrate into version control systems is a little bit of a drawback.

The other thing that I would love it to do, and I believe this is in the pipeline, is I'd love to see a non-Adobe AIR version, something that can run on my iPad. Because, like many of us, I bought an iPad because I like the idea, but there are times when I feel that I could do more with it "if, only."

Interviewer: Where would you like to see it do or not do? Or what would work for you in the future?

John: Well, one of the things I see happening quite a lot is they're forever adding new themes and widgets to actually use with Balsamiq. And I think it would be quite nice if they could be grabbed directly from within the app, so you can almost dive into widget-style apps, if you will, or something like that. That would be a big win for me.

[Note: we are working on making the MockupsToGo Symbol libraries accessible from within the Mockups editor.]

Adam Wride & Mark L. Smith - Building DigMyData

Adam Wride and Mark L. Smith are cofounders of DigMyData.com - an innovative web application that pulls in data from a multitude of sources (Google Analytics, RSS, even your email) to give you a unified view of what’s happening in your business.

Interviewer: So let's start with who are you guys?

Mark: We are creators of software as a service products. And we do that both for our own startup, but then we also do that for other people as well. All of that dirty, paying our mortgage business.

Interviewer: How long have you been using Balsamiq?

Mark: Oh, my gosh. I think...

Adam: The summer of 2008. It wasn't as it came out, but within weeks.

Mark: Pretty close. I think we were like one of the first 10 people to give him money.

Interviewer: Let's start with the day job stuff. Are you using it there?

Live and Die in JIRA

Mark: Yes. We live by it. For everything we do, we live and we die by JIRA. And then we've got Balsamiq Mockup, it's a very big part of what we do inside of JIRA.

Adam: And that's actually how we found Peldi; Mark was looking around for plugins on JIRA. And even though Peldi didn't come out with the JIRA plugin right away, that's what caught our attention initially. And so we actually worked with Peldi for a couple months helping him integrate, helping him with some requirements, and then some bug testing. And I know we were the first to have the plugin on our JIRA instance.

Interviewer: I hate express my ignorance, but what's JIRA?

Mark: JIRA is from a company called Atlassian. And it's one of the big bug trackers. They are huge in that space and just have really caught fire the last couple of years for sure. If you talk to Peldi, he'll tell you that they do JIRA as an issue tracker. They do another product called Confluence which is a wiki. And the reason he's called Balsamiq, is that it's like balsamic vinegar, is that it goes with something.

His initial marketing strategy was just more of a "Oh. I'll do add-ons for stuff like Atlassian." And in fact I think his first thing was Balsamiq Mockups inside of Confluence.

Interviewer: How do you use a mockup tool inside of a bug tracker?

Mark: You know how it is especially with these modern bug trackers; you can use them to do a lot of stuff. It's not just track bugs. For us, it's really does drive our entire development process. Both new feature and bug fixing process. You create a ticket, "Hey this is a new feature, let me go ahead and put a mockup in here and show you what it is I'm talking about."

"Here's this dialog over here, and it looks like this right now. And I want it to look like this, like here." And so we use it for that. Mockups is just so handy we use it even for conceptual stuff. There's a fairly heady algorithmic kind of thing I'm negotiating with my developers right now, and we're using it as a flowchart tool just to be able to say, "Okay, imagine you've got this big circle here and it's a process, and then it's got a line that goes over to this other square box over here and that's a server." So, it's just a flowcharting tool, but it's just so accessible. Anyone who uses Mockups knows this, but the fact that it looks hand drawn helps a lot.

There's a whole movement out there. There's a great series of books called, "Back of the Napkin." In fact, looking at it on my shelf, it's Dan Roam. There they are. I have them both. His whole thing is that, "You've got to get people to do things on whiteboards because if you have them do it hand drawn, then they don't get caught up in details." They can think concepts and not have to think details. That's very, very much true. The fact that that looks hand drawn just helps so much. It just automatically gets people past all that.

Then, for us, depending on what the feature is, once we all agree on the mockup, we'll send the JIRA ticket off to the designer who will actually go into Photoshop and make it look pretty.

Interviewer: Adam, do you work with Mark on your day job or is that a separate deal for you?

Adam: No, that's how we met, in fact.

Mark: Well, we met because of a different startup. This is kind of a horrible story. There was a guy that I'd worked with at a startup previously, and then, he'd gone off to start his own startup, got kind of stuck on it, pulled me in to help him. We tried to come to terms on what... I helped him for a while just gratis, and then we tried to come to terms on what it would like if I helped him a little bit more; we never could. But Adam was working for that guy at the time, and I really liked Adam.

Mark: So, I'm like, "Hey Adam!"

Adam: It was time to go.

Mark: Yeah. So I pulled him in to this other project, big project that I'd been working on, and then, he and I got to talking about stuff and went off and started DigMyData.

Interviewer: Well, going back for a second to Balsamiq, when you work with it, is it only in-house or do you ever show it to customers, clients, money people, people walking down the street? For your day job.

Mark: The relationship here on the day job is kind of unique. We're consultants to a small boutique that's in a building and operating this giant software as a service for a publicly traded firm with a billion dollars a year in revenue. One of the things that I've done for them is go around to their various divisions and kind of evangelize, "Hey, there's this software as a service, and we're all one big happy family here. You ought to leverage what we've done here."

But one of the things that we do is we show them our process, which includes JIRA and Balsamiq and even getting down to the way that we do unit testing and all that stuff. Without a question, it's the JIRA and Balsamiq Mockups that really gets people excited.

I've even done things just sitting in a room with people, some problem that they're trying to work on, we just get it all done on the whiteboard. I take pictures of it, send it to one of my guys to do in Mockups, and they get it done in an hour, and then come back with these cool looking Balsamiq mockups, and that just floors people. They just think that's the coolest thing ever.

Adam: And Bob, since you're not familiar with JIRA, you're probably wondering what's the big deal? The big deal is that when you make the edits in Mockups, it automatically gets saved inside that ticket. It creates a screenshot so that when you pass the ticket around, others can see it easily, and then they can go in and make the changes themselves. I know that doesn't sound like a huge revolution, but when you're passing around files and you can reduce it to just a simple operation, it changes everything.

Interviewer: Let's say you're thinking about redesigning a dialog box and you mock it up, add it to the ticket, pass it to the next person, and when that person says, "No, we don't need that third button there," can they just delete it? Is it live?

Adam: Yeah, they can go and edit the mockup, add the sticky note or make the changes themselves or propose. When I propose things off and come up with three or four different options and then we'll say, "Okay, number two is the best, and then delete the other three and you go with it."

Interviewer: When you say propose are you using functionality in Balsamiq for that or you're just saying, "This is my choice number one, then two, three."

Adam: Yeah. So I'll come up with, within the same physical mockup, three or four different options, label them as one, two, three, four and describe what's different about them, the pros and cons, and then push it out there to get feedback.

Mark: JIRA is really good about versioning stuff. So you don't feel scared about going in and changing a bunch of stuff. It's easy to go back to older versions.

Interviewer: Well, let me ask you, Adam. When you come up for those four different alternatives, how do you do it? Do you just build for it once or build one and copy-paste and change? What works for you there?

Adam: Yeah, I mean there's not a lot of variation usually, maybe order and changes in order, trying to show how to sort things or different buttons or using different components but standard components.

Building DigMyData

Interviewer: Let's talk about DigMyData for a moment. I guess you're using it there as well?

Adam: All day long.

Mark: We are and we are using a mix of Balsamiq instead of JIRA and then also myBalsamiq which is the new hosted product.

Interviewer: Is that more historical or is there one better for something than the other? How is that working out?

Mark: You know it's a mix right? It's one of those things where myBalsamiq is nice because it has some built-in things where it's like I propose a mock-up and then Adam comes along and says, "Huh, yeah maybe not so much. Let me propose an alternative." And then you can see both of them side by side and get a little bit of an indication of what to change. Also, myBalsamiq makes it easier to share. It's got this notion of assets.

There's things that you use all the time like logos and maybe a particular dialog box that's mocked up. It makes it easier to save that. Inside the JIRA plug-in, he doesn't have that notion.

So I guess the way it's kind of worked out is that for the easy quick stuff, we're keeping that in Balsamiq Mockups for JIRA. But when it's one of those, "Hey, man I'm proposing a total refactor of this UI", we're doing that over in myBalsamiq because we're just really doing a lot of back and forth.

Interviewer: Now, how big is DigMyData? Is it just the two of you or you have other people involved?

Mark: It is the two of us. We've got two full-time developers and then I've got an admin that works for me. And then there is a guy that does developing. Because I also do a little bit of Internet marketing stuff like that. So I've got a guy that does legwork for our stuff and stuff like that.

Interviewer: Okay.

Mark: Probably both of them together is like a quarter FTE or something.

Interviewer: Do you hand off mockups to your actual developers? Is that sufficient?

Adam: We're going straight to the developers with all this. The good thing about JIRA is just that it all becomes a queue driven system. So, tickets have priority, and tickets can have dependencies so they know what to work on next with some freedom, "Hey, these three are equal, pick one."

And then there's mockups in there, and they look at something and say, "Yeah, I have no idea what you're talking about," they can send it back us and say that or if they come along, "Hey guys, that's great, but I have a better idea," they can suggest something like that, too.

Interviewer: Let me ask you what you like and dislike about Balsamiq at this point.

Mark: Oh, I'll take the dislike. I'm going to steal this from Adam. It's time for “big boy arrows”.

Interviewer: What do you mean?

Mark: The arrow control, which as you can imagine we use a lot. The arrow is Balsamiq mockups is a rectangle that has an arrow on it, and the rest of the area is transparent. So if you want a straight arrow, well then, you just make the box really narrow. It's a funky experience with the arrows, which I can understand why he's done it that way, but it's time for big boy arrows.

Interviewer: So, what do you like? It sounds like speed might be one of those things that you're getting use out of.

Adam: Yeah. It's obviously helped our process. If it could be a little faster in the application, not to take another dislike, but a little speedier in Adobe AIR. I know there's some issues that Balsamiq may or may not have any control over.

The likes are, this was one of those products that you didn't know you wanted it until you saw it. I had been living in PowerPoint and Visio before that, and Mockups became my second home as soon as we found it.

Interviewer: If you sat down at some meet-up or startup event with other people building a startup, would you recommend Balsamiq to them and if you did decide to recommend it, how would you communicate the value that you guys are experiencing when they've not seen it?

Mark: Like Adam was saying, the thing about Mockups is that you may not have realized but as soon as you actually see it, you go, "Oh, duh! I get it." When I've gone around and I've actually sold a few licenses this way like inside this client that we're building this giant task for ... it's just so easy just to say, "Okay guys, watch this. I'm going to do a dialog."

So, pull out the dialog here, and we'll do a button, and then we'll do a text box, and then we'll do a label. And, you point out things, it's like, "Hey look! You know how if you did this in Visio, you would just futz with trying to get everything to line up? Here, you don't do that. It all looks hand drawn. You don't care." It gives it character if it's not lined up. In fact, because it all looks hand drawn, it's really hard to tell if things are exactly lined up or not.

It's just so rapid. So it's so easy just to go in there and just mock something up real quick that in like, three minutes, you see it, and if you care about that kind of thing, then you just get it.

Jaleh Razaei - A Word in the Ear of your Product Manager

Jaleh Razael cofounded Snailbox, has been a product manager at VMware and WhaleShark, and is presently working on her MBA at Stanford University.

Interviewer: Let me ask you, how did you end up being, "obsessed" by Balsamiq Mockups?

Jaleh: For my background I have done a bit of work with design, but I've never had training as a designer, I've always worked on the business side, and I wanted to transition into product management. This summer, this was my first product management position. And given that it's a consumer Internet company and I'm basically product manager of mobile, I wanted to start building out the UI, what the mobile product looks like.

Initially, I was working off of a Product Requirements Document, and writing down what I want, what my objectives are for each of these different mobile pages. I just felt that wasn't enough, that even though you can kind of imagine what you want the UI to look like, it's just not enough to write it down and then send that over to a designer.

I wanted a tool that helped me be able to sketch things out and really think through my own ideas before handing it over to a designer.

Interviewer: Okay.

Jaleh: And so I downloaded Balsamiq. My concern with a lot of these tools is that when you start using it, it really is hard to use and it takes forever, and being a product manager, I don't have a lot of time. I just want to be able to very quickly sketch things, but I still do want a powerful tool that's easy to use.

With Balsamiq, there's a lot of rich functionality, but they have figured out how to package it in a way that's very simple and kind of minimal. It's just really easy to use. I felt like I was an expert at it in 30 minutes. I worked with somebody else and I was able to explain every part of the tool to him. I hardly had been using it for that long.

Interviewer: Tell me a little bit more about your role at WhaleShark.

Jaleh: It's basically a coupons and deals company. We own a bunch of coupons and deals sites, and WhaleShark is the holding company name. It's a fairly young company. It's still very much a startup, but the model has been through acquisition of several different sites.

What do they get out of it?

Interviewer: As you communicate to your designers as the mobile product manager, I get that you're excited. I get that it's helping you. What do they think, since they're the ones who have to take what you've got and make it into actual code?

Jaleh: I would probably say my designer is the happiest about the tool for several reasons. For one, a lot of times you don't get a lot of time from the designers, because they're working on a lot of different projects. You want to communicate as efficiently with them as possible.

What happens with a lot of designers is the product manager will go to them and say, "Oh, here's some requirements that I have, and here is sort of high level what I'm thinking about." And then it's the designer's job to go through and think through the entire process, the entire usability, and think about what would a user do, what are all the different steps? That's extremely time consuming. Good designers are able to do that, but you don't necessarily need a ton of design background to be able to do that. I think a product manager should do that. And so by using something like Balsamiq, I was able to at least architect the overall process that I wanted the user to follow.

And then when it got to my designer, he was able to work with me on the parts that were really problematic, the parts that I really couldn't figure out and that I needed a design expert to really think through. And then he was able to be great at the colors and how to draw the eye, you know, for this part and not that part of the UI. That's something where you definitely need a designer for. He was able to focus his time on figuring those things out that I really couldn't do as a product manager.

My designer liked it a lot. To be honest with you, I think he would have had to spend at least three or four times more time on this project than he has because I came to him with all of the designs already ready to go. In Balsamiq Mockups I had already worked through a lot of the issues that I wouldn't have been able to identify unless I had the actual mockup. It just made his job a lot easier, and he was still able to add value where they wanted.

Interviewer: When it came time to hand him the mockups, it sounds to me like there was a fair amount of collaborative work being done on the same mockups before that happened. Am I right in thinking that things went back and forth where you worked on these together?

Jaleh: Initially, I worked on the mockups myself, and so initially it was a way for me to really think through the different user interactions and the different kind of functionality that I wanted the user to be able to access. Once I had worked through that for myself, then I showed him the mockups that I had. And then from that point on, there's been a ton of collaboration back and forth. So, yes, there was definitely a lot of collaboration. Then he would basically look at my Balsamiq mockup and then he would start working, putting things into Adobe Photoshop when it was at a more complete stage.

Interviewer: Well, every tool has got its issues and defects and things that some people don't like and other people really don't like. What about Balsamiq? I mean, if you could wave a magic wand, what would you change about it?

Jaleh: To be honest, whenever there is something that the functionality doesn't exist, I've noticed that, I think it's Peldi, the CEO, notices when people post on communities "I want this functionality. It's not there." And literally within hours he adds it. [chuckles] So that's been really nice. That was very impressive.

Balsamiq does a really great job of allowing you to do the very first stage of design, where you're really architecting the experience as opposed to figuring out all the little details.

But then for the next step you need a tool that gives you more granularity, such as for example, Adobe Photoshop, I do get to a stage where I'm like, "Okay, I have put all the things that I want to put on this page," but I just don't know what this is going to look like in an iPhone. Is it going to look cluttered? Am I going to be able to make this control out? It gets to a point where you just have to have black and white, and the kind of a UI that Balsamiq has is not sufficient.

With that said, I don't think that's a goal of Balsamiq. I think they want to be the tool for the first stage of design. I would love it if they made another product that was very similar to Photoshop but simplified the way that the existing tool is very simple.

Interviewer: I think there isn't a designer out there in the world who would not like the ability to just move a slider between low fidelity and then crank it up to high fidelity when it comes to doing layouts. It's just something we hope for in the future, but I think right now they're more focused on their newest product, myBalsamiq, which is the online version. Have you given that a try?

Don’t write. Visually communicate.

Jaleh: Yeah. Actually, the person that I pointed to Balsamiq, the other product manager here, he ended up using myBalsamiq also, and he really liked it. He just sent me an invite for that. And so I went on there and checked it out. It seems like a really great idea. It allows us to collaborate; multiple people can make edits. And there's some sort of version control on there, which is good. I like that a lot.

Here, we're a small team. My designer sits a few seats away from me, so I can just go over and show him stuff. But for my own company that I started, I never worked with anyone that was local. They were always located in a different part of the world than I was. Something like this would be extremely helpful in those situations because they would be able to log in and just show me what they have at a very, very early stage.

That's what I really like about Balsamiq, is it allows you to be much more detailed at a very early stage in your thinking. Instead of handing somebody text and requirements, you're actually representing that in a more well thought-out form, and in a visual form. They're able to take that and give you much better feedback on it.

You're able to collaborate much earlier as opposed to communicating just words and paragraphs and sentences. And then they go and spend a whole bunch of time building something out, and then you look at it and you're like, "Oh, this is fundamentally wrong."

With Balsamiq, you don't have that problem. You're able to think through things. Because you're able to see it visually much sooner and much more quickly, you can work through those architectural issues with design which I feel like is the most important part of design anyway.

Interviewer: What do you think you'll be working on next, as far as Balsamiq? I realize that you're product manager for one specific product, but have you found any other uses for it?

Jaleh: Well, I guess I'd like to get to a point where it's as fast for me to use Balsamiq as it is for me to use Word or PowerPoint. Even though it's a very easy to use tool, just being able to go from a thought to visually sketching that is still something that I'd like practice and become really efficient at. I think that would be a good thing for me to do. That's one of my goals. I feel with Balsamiq, with all of the keyboard shortcuts that they have, it's super easy to do. I just have to put in the time and force myself to use the shortcuts.

You can become extremely fast at just cranking out these little mockups. Shortcuts are one of those things where you have to force yourself to learn it. Put in the time. Right now, I have a printout of all the shortcuts. It's on my desk, but it's not going to be that high priority for me to go and learn that, even though I'd like to.

I'm an entrepreneur, and there's a lot of times when I've needed websites. From now on, I am never sending somebody requirements in an email. I am always going to sketch out and just visually communicate.

A word in the ear of your Product Manager.

Interviewer: Any advice that you'd give to some other product manager out there who's working for a startup or a relatively young company and they're trying to bridge that gap between what's in their head and what the developer or developers need with Balsamiq? Any suggestions about how to just get started with it?

Jaleh: To be honest, it's just so easy that I would say, "Go download it and start..." Don't be afraid to be the first person who sketches something out. Just don't be afraid to go from a product requirements document to having mockups. It's okay if the mockups are rough. You don't have to spend a ton of time making really pretty mockups. Just start on translating your thoughts into visual form because ultimately that's what the users are going to receive.

A lot of product managers may feel like their job is to say, "My goal for this page is for the user to do X, Y, Z." and then that's it. And then they hand it over to the designer.

But I feel that's a little bit too early to hand it off. It takes a ton of time for the designer to go and work through that. It would be a lot better if the product managers spent that time on their own and was able to clean up their own spots before handing it over to a designer.

There's a lot of constraints. Did you want for you to be able to do certain things in certain ways? A lot of these things will clash with one another. And it is only until you actually map it out visually that you're able to see these clashes. At that point you're like, "Oh, okay. These things clash. So then now I need to prioritize. I need to not do one." That's the job of the product manager, to prioritize: If you can't have all, what is most important to you?

At that point you're able to, as a product manager, see, "Okay, well I need to prioritize this higher. I'm willing to take this over that." These things are not something we should be doing one month into your project, going back and forth with your designer, spending all this time trying to come up with beautiful designs for the UI. This is early thinking that the product manager should do on their own.

It just helps with prioritization. It helps communicate more clearly what you're trying to say, what you want. It's just a really great tool to add to your toolbox of a product manager.

Theresa Neil - Getting a Vocabulary on the Screen

Theresa Neil runs a very successful user experience consultancy, is the author of “Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More” (O’Reilly, Dec. 2011) and “Designing Web Interfaces: Principles and Patterns for Rich Interactions” (with Bill Scott, O’Reilly, Jan. 2009).

Interviewer: Tell me what you do for a living.

Theresa: I am a user experience consultant. I've been in the industry about 10 years, and this is the end of my sixth year of running my own consultancy.

Interviewer: What does a user experience consultant do?

Theresa: I am contacted by companies when they are going to do a design or a redesign of a product. So it's a little bit different than being a website designer in the fact that these companies have typically have large scale productivity tools or enterprise applications. It could be desktop, web, mobile, touch-screen kiosk, or it could be all, and usually they have some type of legacy application - maybe it was in Java or Visual Basic or HTML - and they're looking for a richer experience.

Interviewer: How long have you been using Balsamiq Mockups?

Theresa: Since 2009. I know the first project I used it on was Zenoss. They have enterprise systems management software. It's really big, really complex and has 160 screens. It took me a while to evaluate their product.

It's for really technical people, so I'm not a super technical person myself. I mean, I'm a designer. I have some background in programming, as a Java programmer, and I've coded AJAX, but I'm not super technical.

So it was kind of hard to get my head around, but once I started working on the designs I used Balsamiq. Usually it takes me about an hour to wireframe a screen, to look at it, figure out what I'm going to do, and get it all laid out. With Balsamiq, it took me about 15 minutes, maybe 20. It's like, "Whoa! This is amazing!" That's a huge time savings to do the very initial pass at the design.

And so I sat there and I thought about it for a while. Because I charge by the hour, and I'm thinking, "Wait a second. If now I can do all of my work in a quarter or a third of the time, I'm going to lose all of that money." And then I thought, "That's okay, because it means I'll get a design out there faster for us to test and see if it's right. I'm not going to lose any money. I'm actually going to have more time down the road to make it better."

Interviewer: So less time spent just trying to get a vocabulary on the screen, but more time to improve what you've got there?

Theresa: Exactly, exactly. So then I actually changed up our process that we use for working with companies, I think this was about August of 2009, in fact.

Interviewer: Okay.

Theresa: We used to do a lot of work in the wireframe stage. We'd gather some requirements up front. Talk to the business owners, about their business strategy. Talk about their users, about their end objectives. Put together some storyboards. Put together an application map or a screen list, and then I start designing the screens and wireframes. And then we would hand the wireframes, once they got all polished up, over to the developers.

After this conference that I spoke at in August of '09, I was really inspired by this guy who was speaking about prototyping. And at the same time, I also started using Balsamiq, which changed our process entirely. So now we just do some wireframing, and we can do it faster with Balsamiq. And then we can immediately go into prototyping. So instead of handing off flat, two-dimensional requirements to developers, we instead hand over prototypes.

It actually improved our product substantially, because when we're actually coding the prototype, we can figure out the technical constraints, we can work through any interaction issues. By saving all that time wireframing, we had this whole huge chunk of time to do prototyping. It's been an interesting evolution of a process.

Interviewer: When you do the prototyping, what do you typically use to do that? Just HTML, or what?

Theresa: It's anything. It just depends. Sometimes we use Flash. Sometimes it's HTML and jQuery. Sometimes it's Fireworks. Sometimes it's PowerPoint. I've got about eight people that work with me, and some have a programming background, some don't, and it's whatever they can do fastest, that they're most comfortable with. It varies.

Interviewer: So what have your clients thought of this different approach?

Theresa: Oh, they love it. The prototyping has gone over really well, because what we do is we write some stories early on, like an illustrative story. So it'll be like, "Oh, Ashley the administrator needs to pay 48 invoices at the end of the month, and so she logs in to do this." And at the end of the flow, she's all happy and smiling. So kind of like happy-path stories.

Interviewer: I like happy-path stories. As a software developer, that's a whole lot better than some of the definitions I've heard.

Theresa: Personally, when we start working with clients, I can't stand getting an Excel spreadsheet of use cases, because basically they've outlined every feature they've ever thought of that this product should have, which has nothing to do with building a good experience.

The experience is: “Ashley is like me. She has a three-month-old at home. She hasn't been sleeping well. She's had two cups of coffee. She's got to get this done so she can leave quickly. How can we give her some software to allow her to pay 48 invoices as fast and error-free as possible?” That's the story. That's how we can give them a good product.

So we write those stories, and then when we do our prototype, the prototype is usually a scripted prototype and it follows those stories. Clients really like that, because they can demo them back to stakeholders, or potential clients, or users for user validation, or to their developers.

Interviewer: Just to clarify, when you're saying prototyping, do you mean wireframing there, or you're talking about what happens after wireframing?

Theresa: Sometimes we prototype just with the wireframes, which is low-fidelity prototyping. Sometimes we do it once we've gotten into the high-fidelity. It just depends.

Interviewer: Does your entire team use Balsamiq, or is it just basically you?

Theresa: My whole team doesn't use Balsamiq all the time. We also use, well...

Interviewer: PowerPoint, I think you mentioned.

Theresa: Yeah, we use all types of stuff. So I would say we use OmniGraffle, probably, most. If you broke down hours we spend designing, it's probably most in OmniGraffle. We use Fireworks sometimes. Well, we use Fireworks a lot of the time. It depends how the project flows.

Take an example. We're actually doing a project for a company in Italy right now, and it's for the medical industry. To come up with the early concepts, I didn't want to do detailed wireframes in OmniGraffle, because the comments they were giving me are, well, they were in Italian, so they're a little hard for me to understand, and I don't want to spend a lot of time drawing something that's totally wrong.

So we're using myBalsamiq right now, and I've put together the screens, as I understand them, in Balsamiq. If they say those are right, I'm going down the right path, we'll actually switch over to Fireworks or Illustrator and move straight into high-fidelity, because we already know what their visual-design language looks like; it's like our third or fourth project with them. And then they're going to take those Fireworks or Illustrator files and use them to code Adobe Flex. So, that one's kind of a different workflow. We're going to go from Balsamiq straight into high-fidelity. That'll then be used with Flash Catalyst, or they'll just pull the attributes and use it to code Flex. That's one example.

Explaining Balsamiq to the Client

Interviewer: How do you explain using Balsamiq to a client? Because they may be expecting you to do it either high fidelity right off, or maybe something that they're more familiar with, like PowerPoint.

Theresa: Most of these engagements are pretty big, so companies will have to sink a lot of money into it. So there's a lot of talking upfront. Most of our clients, fortunately, are referrals, so they have a lot of confidence in us to begin with. We don't have to really sell them on anything.

But we do have a UX process deck that I go through, and it has our process broken down. It's like six steps. And for each step, it has clearly inserted pictures of what the deliverables at each stage are, so they can see it.

And we show them examples from other clients: "This is what the low-fidelity wireframes look like. And we will not touch your high-fidelity visual design until we have nailed down your information architecture, until we have nailed down your screen layouts and what goes where." So they're aware of the process and the deliverables before the project starts.

And, a lot of our clients are familiar with Balsamiq nowadays. I have gotten an inordinate amount of emails from people requesting work who actually send me Balsamiq mockups, for me to look at, to scope their projects.

Interviewer: Well now, how do you feel about that as a UX developer, if you will, that the users start grabbing the controls of the screen?

Theresa: It's great. Because, I mean, you would think it would be like, "I don't want the client to design it for me." But all they're trying to do is communicate their requirements. As far as I can tell, most of these people do a much better job communicating it visually than they do in writing, or verbally.

It takes me hours to pick somebody's brain to try to figure out what they're trying to do on a screen. But if they can just put all the elements on the page for me, I can say, "Oh, you're trying to do this. Okay, no problem," and then I can rearrange everything. Or I can say, "Oh, you're trying to do this. Well, that doesn't really go onto one screen. That really needs to be over a series of screens."

All it is is a tool for communicating requirements. They're not really trying to do my job for me. They're just trying to get us further along in the process. It's a huge help. Before Balsamiq, people would just send us PowerPoints that they had done, where they tried to lay out screens. I prefer getting the Balsamiq mockups, because Balsamiq helps non-designers keep it simpler.

Interviewer: Does Balsamiq help you eliminate the "somehow" factor? What I'm talking about there is, as a developer, I've gotten projects in the past where the requirement starts with, "Somehow, the program is able to display the 141 controls on a dialog box that we want to show." Does it help get a little more realistic about what can and cannot be on the screen at once?

Theresa: I don't know. Some people, they just think that way. We still get that request from clients. They're like, "Well, I know that there's going to be like 1,800 rows in a table. Can you just show them all?" Well, no. "Well, why not?" Well, nobody actually wants to see 1,800 rows of data, and there's not enough space. "Well, could you make the font smaller?" No. That's not the problem. I don't know if there's any tool that can help people that maybe don't think in that disciplined of a way.

Interviewer: Right. It sounds like Balsamiq is definitely helping you do what you do better. What don't you like about Balsamiq?

Theresa: I mentioned we do a lot of complex applications. We've had another systems management application that we were defining recently. It's for managing Hadoop. There's a lot of monitoring and looking at events and looking at systems. It's for very technical people. It shouldn't be a complex assignment, but it is a complex application.

You really need all the real estate you can get out of the page. If I was designing a website and I was complaining about not having a couple extra pixels because Balsamiq's kind of chunky, that would probably indicate that I'm not a very good designer, because you really shouldn't cram that much stuff on there. But then when you're looking at tables and tables of data being able to draw the design to scale is pretty important. So if I put a table on the page I might really only be able to show with Balsamiq five columns. But if I did it in OmniGraffle, which would be more accurate, I can show the seven columns that they really need. That does make a difference when you get to the more detailed level.

Now, at the level that we usually use Balsamiq, when we're doing the design strategy, it doesn't matter because you're just saying, "Hey, there's a table of events here. We'll work on which columns they are later."

It's not really a big deal, but in some cases we can't take Balsamiq mockups and keep going deeper with them, because we have to get a better feel for what's actually going to fit on the page. Can I fit five columns or do I have space for seven?

Interviewer: Yeah, I think that's a fair criticism. It is a low fidelity, kind of chunky.

Theresa: Right. It's not that I dislike the chunky drawings. I actually think that works well. We've used Balsamiq Mockups for lots of user testing, and nobody has a problem with it. They're not like, "Oh my God, what happened?" They're like, "Oh."

A lot of people say something like, "Oh, did you let a kindergartener draw this" or "Time to get out the crayons." But they're just joking. They can totally look at it and we get the same feedback we would otherwise. It doesn't detract from the deliverable.

Nailing the strategy

Interviewer: One or two more questions, if you wouldn't mind. If you were going to sit down with somebody who was interested in Balsamiq at a technical conference, and they asked, “What's the advantage for a UX business?" How would you explain it?

Theresa: You can nail down a strategy so much faster. You can get past that very initial design strategy phase really quick. And like I said, It's not like we're losing any money. It's just that we get to spend more time on the process further down the road. We could maybe do more visual design iterations or in our case, we do the interactive prototypes now, which is a lot more valuable than just a deck of wireframes. You’ll come up with a better product.

Interviewer: How are you liking myBalsamiq? You mentioned that you're using that now, versus just the desktop version.

Theresa: Oh, well, I love myBalsamiq as a project tool. I mean, it's just great to keep everything together. It's great for collaboration. In fact, I'm getting emails in right now from our clients in Italy. They're working. Basically, I posted a bunch of files for them overnight, and they got up this morning and they're reviewing them and putting feedback. I love myBalsamiq for that. I don't like using Balsamiq online. I prefer the installed version. It freaking drives me nuts that I don't have hotkeys. I mean, I'm constantly, constantly using hotkeys. I know there's nothing that they can do to fix it. I know it's a constraint of Flex. But for me, I spend all day wire-framing. It slows me down.

Interviewer: You want your power tools. Yeah.

Theresa: Yeah. But it's okay. The other designer and I who are working on this, we'll just work locally, and we import them into myBalsamiq, which works fine.

[Note: Since this interview hotkeys have been implemented in myBalsamiq.]

Hadar Wissotzky - Visualizing within the Agency

Hadar Wissotzky is the founder of TinyLabs and Streamline Social, an interactive digital agency and cofounder/CTO of Urban Sitter, a community match service for parents and babysitters who connect online through Facebook and their existing networks.

Interviewer: Let's start with, what do you do?

Hadar: That's a good question. I'm a technologist. I come from a technology background. I've been, essentially, playing that role for the past 17 years. From a developer, through a senior developer, architect and, for the past numerous years, "C" level in various companies. I've been a stakeholder in various ventures for the past 17 years, for that matter.

What I do currently is a couple of things. I work with start-ups. I lead an incubator Tiny Labs., which I started about three years ago as well as a professional service company. We develop our own products, as well as others’. We work with agencies. We work with start-ups. We work with whomever requires our services.

That really falls under the professional service company. But still the model itself comes from the incubator. Then we take our own ideas and incubate them.

Lastly, sometimes we have some sort of an external idea that comes to us. Sometimes it comes with money, sometimes it doesn't. But we go ahead and help bring it to fruition. Now our incubator is somewhat different - our model is closer to the academic model, if you wish. We are a private academic incubator, or we're trying to bring that type of model into the private world. Where we don't only provide you with funds, but we provide you with everything you need, all the support, to take an idea from an inception state to fruition.

By that, I mean from looking at the idea, helping with a business strategy, and business model. As well, evaluating what's the best course of action and value that the product itself will provide. Then we continue to build it. We have individuals that can sit behind keyboards here and build the actual products. We then get it to phase one. And so on and so forth.

Interviewer: Very cool. So really you've got a multitude of things going on. On one hand, you're a service provider with other people. And that's through Streamlined Social.

Hadar: That is correct.

Interviewer: On other hand, you are an incubator founder, I guess might be the right phrase.

Hadar: That is correct.

Interviewer: And there are places in between those two points that you play in, too.

Hadar: Yeah. I am, as well, an angel investor in companies that are not related to either companies. I help mentor startups which come to us and somehow I got involved with. So doing that as well.

Interviewer: Maybe the place to start, as far as Balsamiq, is where do you use it? What do you do with it?

Hadar: We are using Balsamiq both in our incubator, as well as when we work with agencies.

The Interactive Creative Agency

Interviewer: Give me a for instance, maybe the last time you put your hands on the product at Streamlined Social. Or last time you put your hands on Balsamiq. What did you use it for?

Hadar: I've used it this morning. We're currently working on a project for a services company. Most of the companies that we're engaged with are SaaS based. What we're doing this morning is socially enabled. So there's a connection between Facebook and the actual service. We had a conversation this morning where we designed the flow, as well as the initial structure, the blueprint for the recommendation flow.

Interviewer: So on the flow, are you using Balsamiq for that and basically using it as a story book type of tool?

Hadar: We use it in various ways. We're not using it exclusively. We're using it as a means of communication, a means of sharing ideas, throwing ideas on a whiteboard, essentially. I would add one more thing that may interest you or may not. We are a completely virtual company.

We don't have an office. We abandoned that a year and a half ago, because no one wanted to come to the office anymore.

So our entire organization, although it's here in the US, is virtual. We don't work with offshore. It's 100% virtual. We have people here in the city, people in San Jose, people in LA, people in New York and in Buffalo, NY. We're evenly spread. For us, a tool like that... we have a stack of tools that allows us to act as if we shared a whiteboard. As well as a communication aid.

Interviewer: Maybe I should just ask quickly, what other tools in your tool train surround Balsamiq?

Hadar: OmniGraffle is one. OmniGraffle or Visio. It depends on what new flavor of technology do you use. But, for the most part, OmniGraffle. We use Adobe Creative Suite, at a later stage, after Balsamiq. I start with the lower end, with OmniGraffle and Balsamiq. Then we will move forward to more substantial, concrete applications such as Illustrator and Photoshop.

Interviewer: Let me ask, why not use Keynote or PowerPoint for what you're doing in Balsamiq?

Hadar: Balsamiq is just simpler. It's easy and it's agnostic. What we like about Balsamiq is you very quickly can throw things together in a collaborative fashion on a piece of paper and in a very agnostic way. You don't have to influence it with design.

The minute you start to work with Keynote or when you start to work with even colors... You're starting to bring in hints of design. That, normally leads to a digression in the discussion.

Interviewer: And you start talking about pixels and column widths, which are good conversations to have, but they should be downstream.

The Blueprint and Workflow

Hadar: Exactly. Branding is great, but it has to be after you've established two key elements. One is workflow, second is what we call "the blueprint" or "the wireframes."

Interviewer: I've heard all these terms used for that stage of creating software. Where you're not in a functional prototype yet, but you have nailed down scope and functionality so that it can progress.

Hadar: Right. It depends which client we work with. If we work with one of the startups, we normally will not gravitate towards Keynote. It requires a bit more investment, based on the amount of pixels you have to invest in it and so on. I'll give you an example. We worked on All of Science mobile front-end, front and back.

The best way we found to relay to the client, to the agency that we work with, what the vision is going to be, was using two elements. One was Keynote, because we were able to animate and click and really describe the interaction. It saved a lot of time in a communication thrash of passing emails along. And the other was just snap shots and so on.

The Project Manager and Balsamiq

Interviewer: Do you find yourself often in the role of the project manager with these?

Hadar: Yes.

Interviewer: Does Balsamiq help?

Hadar: Yes. We'll find that we are working either with GoToMeeting or Skype collaboration open. And we can very quickly use it as a whiteboard, as an active whiteboard, where we can move things around. We can present ideas or sit together and build a mockup quickly.

We find that out product managers, as well, not just project managers, use that to enhance on the modular designs at later iterations. So after you have the branding and you have the basic design, they normally tend to cut and paste from the PSD. And then build on top of that using Balsamiq.

I would say one thing. The tools themselves are just tools. It all depends how you use them and what knowledge you have to use them. It's very hard to quantify and say, "This tool specifically is directly responsible to the success of a project." If you don't have the knowledge of how to use that tool most effectively, then it will not work.

Last year, we had an attempt of giving the tool to startup founders or to visionaries. And let them play with it and create what they think is their vision. We found that there are some core elements that are missing for visionaries. Especially those who are unexperienced ones. The one problem what we found really boiled down to this one thing: they don't know what questions to ask about themselves and about their idea. And what value. What's the core nugget, a value that this service of theirs will present to the world?

Interviewer: And you have to have that down before you can express it in any sort of visual manner.

Hadar: That is correct. You cannot decompartmentalize something until you understand what questions you're going to ask. And that's the hardest thing to do is to ask the right questions.

Interviewer: Let me stay with the incubator here for a moment. At one point you gave this out to some of the startups in your incubator last year, to give them a tool that they could use to envision their software. I get the point that before you can do that, you really have to have some clear idea of what the value is of your software. And how it will be developed and interacted with and delivered. But did people have a tough time dealing with Balsamiq or were they happy with that part of things?

Hadar: The software was not an issue. The software is pretty straightforward as a software. It's just helping create some sort of a puzzle, put a puzzle together. As far as that, if you're asking from a usability standpoint, no. People were pretty happy.

Interviewer: On that note, what do you like about Balsamiq and what do you dislike? What would you like to see them fix, change, add?

Hadar: I personally like how agnostic it is. The ability to take things quickly and throw them on a piece of paper. The linkage, the map should be improved. Because you can end up having so many pages. It's so much detail. So linking them together and then having a holistic view, a 10-30 feet holistic view of the entire IA will be helpful. As well as allowing people to introduce their own agnostic components.

Interviewer: If you were sitting in, let's say, a meetup of some sort and a startup founder asked you, "Hey, I know you guys used Balsamiq." What would you tell them? Would you recommend it? Where should they get started with it if they're not sure what to do with it?

Hadar: That goes back to my statement. I think that Balsamiq is a great tool to be incorporated as part of a stack. It's similar to asking whether or not you're going to use a pen to write. You need to learn how to write before you can go and use a pen. So it's problematic to say. I would, first of all, ask them, "Okay. What are you looking to do? What are you looking to achieve? Where are you?" Now, if they are in a certain place, would I recommend it? Yes. I would. And I have. We have recommended it to a lot of our agencies and we introduced it to quite a few agencies in the US.

Interviewer: That was actually my second question on that. Let's say that you're sitting in a bar and another founder of a creative agency was next to you. And they were talking about how much frustration they were feeling about getting everyone into the same conceptual space when it came to a distributed team. Would you say, "Start with Balsamiq. That might solve your problem"? Or would you say, "No, it's not strong enough"? How much do you rely on the creative side of your house, on Balsamiq, to get those ideas gelled in your distributed team?

Hadar: I would take it one step further and say that, now, when we work with an external creative, when we interview with external creative teams, we ask them to use Balsamiq in order to communicate with us.

Interviewer: So it is a higher bar there.

Hadar: Yes. There is a higher bar. We've placed it as a requirement. And people love it. The minute they're introduced to it, the communication, especially in a disconnected fashion, it's extremely valuable.

Interviewer: Any last words for any start-ups out there who are thinking about, is this the right tool for me? Or how to use it?

Hadar: I would say it's a very, very good tool, as part of a package, to use. I would highly recommend it to anyone who wants to put their vision into paper. I would just add a note to it. Which is, ask the right questions and do your research. Learn not just the tool itself. The tool will be an aid or will aid you in your path. But you won't find salvation from the tool. The tool is innate. If that makes sense.

Interviewer: Got it. It does. Thank you so much.

James King - A Common Startup Language

James King is the founder and director of  Find Invest Grow (FIG), a UK startup incubator. FIG's startups include EyeQuant.com, Wazoku.com, ProveMyConcept.com and MealsFromScratch.co.uk - all of whom used Balsamiq to capture their initial website concepts.

Interviewer: James, can you give me a little background about who you are and what you do?

James: Certainly. My name is James King. I run a company in the UK called "Find Invest Grow", or as we like to call it, "FIG". We help undergraduates and graduates in the past five years start their own businesses. That's everything from building a business plan, engaging advisers, to raising investment and helping them get to market.

Interviewer: Are these companies only tech?

James: No, it's a wide variety of companies. We have companies in the fitness industry. We have companies that are clothing companies. We have drug delivery companies, and of course, we do have a lot of tech companies.

Interviewer: How are you using Balsamiq Mockups?

James: We use it as part of the process when we're working with each startup. Regardless if they are a tech startup, they invariably need some sort of website. We help them, we encourage them to use it as a way to visualize what they want to deliver. For a clothing company, it might be just simply to use it as a briefing for web designs. It really gets them to throw some simple ideas out there and helps them avoid wasting time by giving a fluffy idea to a web developer.

But obviously with tech startups, it's an absolute blessing. We've got a really simple tool to get them to say, "This is roughly what we think it would look like." To take it to an investor who might say, "Well okay, but how about changing it like this?" It's all about managing expectations, really.

Expectations and Communication

Interviewer: So, it's expectations and it's also communication.

James: Absolutely. As well as someone can sketch something out, you get the grainy scans or the phone pictures that they sent across, it's never quite what you've imagine. The contrast is never quite right. We've got our mockups so that anybody can use them. It's really easy for them to send across their vision, while it's not a polished article, that actually adds to the value because it makes it very easy to iterate from.

Interviewer: Let's say they're going to start a chain of fitness clubs, and they are not IT people. They use computers but they're not in love with it the way we are. What do they think of Balsamiq? Are they comfortable with it?

James: Yes, it's just simple. That's the best thing about this. "Look, keep it simple." And if they go, "I want some gadget that will do this or the other" or they have no usenderstanding of tech, this gives them some sort of grounding.

Interviewer: It sounds like you're taking out the "somehow".

James: That's a great way of putting it. It means they don't give unrealistic briefs and when a web designer turns around and says, "Well, I can do that,” or "I can actually add in some extra features,” then then the entrepreneurs know what they are getting with a quote. That's a big thing because all too often people will think, "I made this very detailed brief and they've come back with this website that's nothing of what I thought", or "They want to charge me for X, Y and Z."

It's much better for the non-tech to communicate with the tech. I guess is also the same in the investor environment, when the non-tech can show this sketch to - maybe the investor is a non-tech or maybe they are a tech - and they can immediately visualize the entrepreneurs' concepts to see if they match their own thoughts.

Interviewer: It almost sounds like trying to forge a common language between the investors and the IT people and the startup people, so that they can all at least talk the same language, which they don't normally.

James: That's exactly what it is.

There is also the element of engaging early CTOs. If you're a web developer and you just want to crack on with it, that's fine. But maybe you are saying, "Well, actually I need somebody else to join with me", or "Well, I need a Managing Director to go and raise finances or do I just crack on with it. What can I make to engage co-founders?" We’ve seen two tech co-founders sit in a room, use Balsamiq to bounce ideas off one another, and then get a couple of ideas. It's a lot quicker than hashing something out or going so far down the path and then going, "Oh no, I didn't mean that."

3,000 Startups

Interviewer: How many startups have gone through Find Invest Grow? How many had been required to use Balsamiq?

James: In the last year, just over 3,000.

Interviewer: Wow, I was thinking more like 30, 50?

James: We're probably one of the largest incubators in the world that no one's heard of. And starting September this year, we're running a business plan competition across 88 universities in the UK, which is backed by the RBS Group and LinkedIn. We¹ll be receiving about 5,000 to 10,000 business plan applications through the new website launching in January 2012. [Details at www.theessa.com and www.enterprisingu.com - which also started life as Balsamiq mock-ups]

Interviewer: And, are they all going to be using Balsamiq?

James: Balsamiq will be part of the suite of programs that we say actually, "This is the tool you might find very useful."

Interviewer: So, you don't make it compulsory but it is recommended?

James: Yes. I doubt all of them use it. The Companies we work with we insist on. This year, we worked with about 340 to 350 companies and all those have used Balsamiq. Going forward next year, probably double will try that.

Interviewer: Wow.

James: Also, there's also the caveat that may just involve using Balsamiq during one of our workshop sections, we have one of our directors sit down with the laptop and go, "Do you mean something like this?"

Interviewer: Think of the classic crime show on television, where the victim sits there with the police sketch artists and we get the picture... Amazing how it looks exactly like that bad guy.

James: That's a lot of our guys' experience. Now, for the non-tech that that can often be the end of it.

Interviewer: I have to ask you, when you talk to the investors that put money into this stuff, they tend to be shy when it comes to wanting exactly what they want, how they want and when they want it. I would think of most of those guys and women, would be more comfortable with PowerPoint? Keynote? Why not?

James: We take the mockups and we put them into PowerPoint.

Interviewer: So you don't actually sit there and make the presentation from Balsamiq, you do it through PowerPoint?

James: Yes, yes. We export into it.

Investors are looking at the presentation and they know what the entrepreneurs are thinking. They know what they want to achieve and off they go. Now, you are clearly saying to investors "This is what I'm going to do." If the entrepreneur does deliver something that's different, it is fair for an investor start kicking up a fuss.

We've seen investors say, "I don't like that widget" and be really surprised when a product arrives and say "well I didn't know that people were supposed to use the site in that way". Using mock-ups stops that from happening.

This is a quick way to say, "Look, this is pretty much what were going to be doing, something alongthese lines." Then hopefully in a few months time when an investor sees the first product they can say, "Yeah, that's kind of what I expected" with an ideally nice addition of "but better"!

Interviewer: So, you don't get into arguments whether it should be a red line or line there?

James: Yes, Balsamiq really helps that.

Michael Angeles - Tips from the Cutting Edge

Michael Angeles is the “UX Guru” at Balsamiq, a well know figure in the Information Architecture, UX and usability industry, and the man behind Konigi, one of the premiere UX sites on the web.

Interviewer: So tell me., how do you make your living?

Michael: I am the user experience designer at Balsamiq.

Interviewer: And when you say "User experience designer." What do you do?

Michael: I sort of play user advocate for our products. And I handle a range of responsibilities, including dealing with customer support, actually doing interface design for all of our products. And because we are a small company, I also do a lot of the product development and webmaster type activity. And just as well as general visual design work.

Interviewer: Insofar as that you've working for Balsamiq, how long have you been using Balsamiq Mockups?

Michael: Well. I think I had got an email from Peldi when he just started announcing Mockups. So, I guess it was around either early 2009 or at some point in 2008. It's a couple of years now. I just started dipping my feet and toes into it when he first sent me that email.

Interviewer: You've worked with other tools, for instance, Photoshop and Adobe Illustrator and others. How would compare the experience?

Michael: You know, it's a combination of the flexibility of a tool like Fireworks for its components and it's the speed of any of the tools that have some sort of quick add, look up. The first thing that drew me to it was the Quick Add feature, which is kind of like doing quick add in Google Calendar.

Interviewer: Explain what you mean. I'm not sure what that is.

Michael: So. The Quick Add? And we'll take Google Calendar first. Google Calendar had this thing where you just put in, "Meet with Bob tomorrow," into an input. And then it automatically inserted, "Saturday. Meeting with Bob," into your calendar.

Interviewer: Right.

Michael: Because you've entered it as free text. And in Mockups? We have an input that you can just type in like, "Button" and then an auto completion form shows you all the things that match button, press enter, and it inserts the button into the canvas. So, it's not exactly the same behavior, but it's the speed that drove me to the tool the first time. You compare that to actually having to go look into a library of components in a graphics tool and then clicking and dragging to place that on the canvas. It's a split second or several seconds of difference.

Optimized for the Keyboard

Interviewer: So it's kind of one of those places where you can forego using the mouse and just create a bunch of the components that you need for your mockup.

Michael: Exactly, it's really optimized for people who use the keyboard. It works for people who use the mouse but when you become an expert user and you learn how to use all of these efficient tools then it becomes a faster tool.

Interviewer: What other things do you find that once you're an expert with Balsamiq or myBalsamiq, really help?

Michael: Well, the main thing that I've been leaning on most is using Symbols now that we've introduced reusable templates and Symbols Libraries and I'm trying to convert all of the mockups in our community site to go into symbols. I'm using that a lot so that I can create components or entire page templates that are not built into the library.

Interviewer: Give me an example of how you would use a Symbol, let's say a browser page. I get the idea that you're talking about a number of components that are frozen and become one object.

Michael: Right, and it becomes sort of an object that can be reused in multiple instances within a project. So if I'm designing a website for instance and I know that the requirement is that it's 960 pixels wide or it’s a 980 pixels wide by 800 pixel browser that I'm designing for. I can create that as a symbol and then insert all of the elements of the page design into the symbol so I can have the browser, the header for the page, the title of the page and all the navigation and maybe the footer and save that all as one object and that's a symbol.

Once I have that into my symbols library for the project, I can insert it into every page that I'm designing. The home page, product page; whatever. I don't have to redesign it each time, I just drop the instance in.

Interviewer: So let me ask what happens if, lets say you design it in a particular way and then for some reason it's decided that it has to be changed? If you change the symbol, does it change in all the Mockups or do you need to go back and just do that one by one?

Michael: The way it works is that the instances can be overridden so that if you have, for instance, a navigation bar or a menu that has five links in it, you can have one instance where you override the menu bar so that you show the first link in the menu bar selected. On the second page you can override it so that the second link of the menu bar is selected.

It's designed so that you can make changes to the instances that are on the canvases or you can update the original and then the changes made there propagate through all the instances. You have to do a little bit more if you make a change to the original symbol: you have to then go review the change in all the instances if you've overwritten them. But major changes get populated.

Interviewer: So if they decide that they want to go for two horizontal menus instead of one with drop down and sub menus, it would be fairly easy to make that change throughout even a complicated website because you can go into the main instance, change it and then just go through and edit whatever needs to be selected on that particular page at that time.

Michael: Right, that was kind of the whole point of making this, is so that that's all automated for you.

Versioning your Mockups

Interviewer: Any other tips?

Michael: Well, I guess, I don't know if this is a tip so much, but it's something that we do all the time now. We made the web version because we wanted to be able to see and propose changes to designs as sort of like a timeline of changes that are visible. So we use this thing in a mockup called Propose Alternate Version. Which is basically like branching in a version control mechanism.

So what we do when we make mockups now is, we'll make a first version, and instead of editing the first version, we add a comment to that mockup that is proposing a change of the first version.

Interviewer: Okay.

Michael: So the comment is actually a mockup. You're answering with another mockup that's either to be a branch of where you started, or it could be just a subtle change. And then these go through several iterations until we find the right design, and then we pick one, and then that becomes promoted to the main version. So we've ended up with something that's sort of a mashup of wiki, blogs, and version control.

We're using that so we can see how well the decisions were made in one string. So it's easy to go forward and backward, and as in a wiki, you can revert changes. You can see what changes you've made in the past, and if you don't like a direction you've gone, you can go back and revert to an earlier version.

Interviewer: There've been a lot of times when I sort of end up having to do graphics, at least HTML graphics. And I might have a client that says, no, we cannot have those lines be blue. They have to be red. And we go through about four iterations from there. Thick red lines and dash lines and all, and then he says, no, it really has to be blue. Which drives me crazy, because I've just gone around in a loop and we don't know what we've already done. If it's one line, it's pretty simple, but if it's four or five things, it's hard to go back. And if you're not using something like Git or Subversion, it's really hard to go back.

This makes it sound like it's pretty easy. You can go down a particular road, and turn around and come back to the main road if you need to.

Michael: Yeah, exactly. It's similar to doing revisions in wiki articles. It's just a look at the changes, it's a visible thing that you can see in the history, and then you press a button and then you revert. So it's exactly that case, where you want to go back several decisions ago.

Interviewer: Let me ask you, as probably one of the people who knows absolutely the most about this product, what do you like the most about it and what do you dislike the most about it?

Michael: I think what I like the most is the speed and the ability to remove visual design as a distraction when you're designing functionality within interfaces.

I think this started with earlier projects like Denim, which is this sketch prototyping tool that came out of the University of Washington years ago that proposed that you could actually do sketchy interfaces and then turn them into click-through prototypes. Because it gets you closer to just working with something that looks like it's hand-drawn. And just sort of using a hand-drawn look to keep any of those sort of distractions of the final product, I think, is one of the key things that makes it easier for me to sort of focus on the important things.

Interviewer: Now how about the dislike?

Michael: I think it's probably the same thing, as someone who actually then works on final product. Because working in a smaller start up, I have the good fortune of being able to do a lot more than just the specifications. So I do eventually have to work in a high-fidelity tool to make the end product.

But, you know, I guess what I would like is some way to go from the low to middle ground to the higher fidelity version. But I know that we're never going to do that, because we want to focus on making the one thing work well. You know, I think that's the hardest part for me, is that I have to stop using the tool that I like, and then use another tool at some point, but that's just the reality of it.

When the Team Gets It

Interviewer: Well, think about some unit of work that you would be comfortable with describing, like, three days output. Are you able to do your job as the designer, as the UX expert, 10 percent faster, the same speed faster, 10 percent slower? How much do you gain in terms of productivity, if anything?

Michael: I think there's a combination of things that have helped me in terms of productivity, and it's not just working with Balsamiq Mockups, but it's also working with a team that embraces the idea of mockups. In other projects that I've worked on, I think the problem was that we spent too much time on the wireframes and not enough time building. That's kind of been my experience.

Using Mockups now, I feel like I've doubled productivity in terms of not fussing over details of the way things look so much, not fussing over making multiple iterations on something without building it. And I think that's a combination of, the tool has made it possible to do that, but also being in a company that has the mindset of, you know, you use the tool appropriately, and you stop using the tool when it's time to build. I think the combination of those two things has more than doubled my productivity in terms of getting something from idea to a working, functional product.

Interviewer: Lastly, if you were recommending Balsamiq Mockups to other UX developers and they said, why should I use this tool, what would you say?

Michael: It's a hard sell, because I know that a lot of people care so much about the way their work looks, and sometimes the sketchiness has been hard for people to really embrace. But I would say that once you realize that there's an appropriateness for presenting low-fidelity sooner or faster and then discarding it, then you realize that it will help the entire project in terms of making the right decisions at the right time. If you're concerned about those things, and you're interested in working in a sort of rapid, iterative way, then it's a good tool to consider.

Table of Contents

Introduction

Viewing Online

Ryan Carson - Getting to the Realm of the Real.

An interesting story

Is Balsamiq Mockups just a better Powerpoint?

Is having keys to your car useful to driving it?

Robert Frye - The UX Guy & the Developers

The UX guy amongst the developers

Keeping up with Facebook

To see is to understand

Collaboration = Disposable + Speed

John Clark - Doing it in the Enterprise

Widows, Jack Manager and Excel

What do Developers get?

Adam Wride & Mark L. Smith - Building DigMyData

Live and Die in JIRA

Building DigMyData

Jaleh Razaei - A Word in the Ear of your Product Manager

What do they get out of it?

Don’t write. Visually communicate.

A word in the ear of your Product Manager.

Theresa Neil - Getting a Vocabulary on the Screen

Explaining Balsamiq to the Client

Nailing the strategy

Hadar Wissotzky - Visualizing within the Agency

The Interactive Creative Agency

The Blueprint and Workflow

The Project Manager and Balsamiq

James King - A Common Startup Language

Expectations and Communication

3,000 Startups

Michael Angeles - Tips from the Cutting Edge

Optimized for the Keyboard

Versioning your Mockups

When the Team Gets It