How (and why) do you use Balsamiq Mockups?

I believe that good design is hard to do. I love the famous quote by T.S Eliot:

"If I had more time, I would have written a shorter letter"

I think the same applies for UI design. In order to do it right, it takes time, discipline, and many attempts to get it right.

Most of us are very technical people, we sometimes go right into implementation and choose to react to ideas and changes as they come. I call this "Christmas Tree Design", where your purpose is to fit all the decorations (features) on the tree. This is not good design. Only experience and discipline will teach you that sometime less it more.

I've seen it happen so many times before. If you start with a high fidelity prototype, you are mentally less apt to change it when new ideas and challenges are realized.

This is why I love paper prototyping and low fidelity design tools like Balsamiq Mockups.

About a year ago, my team embarked on an aggressive new product development project. Our new product would be founded on several key initiatives with the number one goal of being easy to use.

But how could we ensure we would create a usable product? Sure we had good ideas, but we needed to ensure that our ideas would work with customers.

We decided our best chance was usability testing. We had mapped out the entire user experience and all the screens of our product. We prototyped our product UI designs on plain paper. Then we took this to a company trade show and sat customers down for a usability test of our new product ideas.

We didn't have any software code written yet, we didn't even have a product name or marketing plan. But we knew we wanted to reduce the UI refactoring time and to hit the market with a very easy to use product design.

We had about 20 customers sit with us one-to-one with our paper prototypes. We asked them to use a pen as their mouse pointer, and we gave them several tasks to perform. We asked them to think aloud, and each time they clicked the mouse, we would place a new UI screen on top of their desk. Once they got the hang of it, they quickly became used to our user model.

We started to notice some patterns in some of the users, and realized we need to change some of the UI screens. Because we were using paper, we quickly created alternate screens and scenarios to test more users with. This became an iterative process and by the end we had a very usable and fully tested UI design and workflow. All without writing any code!



We did not have Balsamiq Mockups at the time that we did all of this (I wish we did!). We had to resort to Photoshop, and dreaded PowerPoint. These tools did the job, but took countless hours to use. If I only had Balsamiq back then.

The product was done on time and on budget, and not to anyone's surprise was a huge hit. We continue to hear great things from our customers on how much they like and appreciate the UI and the ease of use.

To learn more about Paper Prototyping check out this website.

Last week, a brand new project idea came to me from an important sponsor. I listened to his ideas, and we brainstormed on a whiteboard. After or meeting, I went back to my desk and used Balsamiq to Mockup the entire project in only a few hours. In doing so I found some usability design flaws in the original idea. I was able easily and painlessly come up with alternate strategies. This is the essence of Balsamiq - if its easy to change, then let's try it.

Just like before, I printed each page of my design on plain paper. I then took my designs and showed them to the sponsor. It was very exciting to see the reaction when he saw the ideas take shape. It was also very clear to see the workflow and process problems I found earlier. We discussed the details and I got some invaluable feedback. I was able to quickly iterate on the feedback (right in front of him) and in the process a few new ideas where born. We did this back and fourth until we reached a maturity state.



After we finished, I gave the mockups to our HTML CSS coding guru. After getting them back within a few hours I was coding the backend logic. In only a few days I was done with the whole thing.

In a very short time, I went from the birth of an idea, to final product delivery with a very good UI design and workflow... Oh - I almost forgot to mention -- I enjoyed every minute of it! What are you waiting for?

Bump to the top.

C'mon folks, let's hear how Balsamiq has changed the way you design. This post is intended to say thanks, and to share with others how and why you are using Balsamiq.

I would like to share but I discovered Balsamiq just recently. Maybe later I will share my story :-)

My way of designing has not changed because this is the first project I've designed for. I've watched interface designers on previous projects work with other tools, with stacks of templates and many hours of paid time.

I was nervous about getting into the field of mockups because of the learning curve with those tools. I knew that I would have to immerse myself eventually and was sad I'd lose so much time designing the application to learning the tools. Now I don't have to. I was immediately productive. That is the power of Balsamiq in my opinion.

My good friend told me to check out Balsamiq, but not for this reason. He is an interface designer, and his excitement for Balsamiq was the 'unfinished' look of the mockups. He couldn't stress enough about how important it is for him to be able to share his work with colleagues, and reduce the 'attachment' to them in iterative development. For this reason, I've always found the Comic Sans war to have completely missed the point here. If there is a good use for that font, this is it!

He chastises me for putting color into my mockups.

Anyway, after ~200 mockups created with Balsamiq, I am very satisfied. Not to mention, it's been an entertaining ride, what with getsatisfaction, the blog, and all.

--pete