User Testing Your Balsamiq Mockups with CanvasFlip

The following is a guest blog post by Vipul Mishra of CanvasFlip.

One of the biggest challenges in building good apps is to get actionable feedback while user testing your mockups or prototypes. Most of the responses from teams or real users are very subjective. Consolidating this feedback to iterate on your designs is a cumbersome task.

To help UX professionals perform user testing on their Balsamiq mockups, we built a utility tool to import Balsamiq mockups seamlessly into the CanvasFlip prototyping studio. helps product managers and UX professionals to capture and consolidate user behaviour in their prototypes just by sharing a web link. CanvasFlip generates user testing insights like interaction heatmaps, conversion funnels, and user session replays which help you to find usability issues during the design stage. Once you have found these issues, you can make the necessary changes in your Balsamiq mockups to improve usability.

Let’s go step-by-step through user testing your Balsamiq mockups in CanvasFlip:

1. Export your Balsamiq mockups as images

Once your Balsamiq mockups are in place, Click Export > All Mockups to PNG.

2. Upload your Balsamiq mockups to CanvasFlip

Open Prototyping with Balsamiq and upload your Balsamiq mockup PNG files.

3. Crop your Balsamiq mockups to extract screens

After uploading a mockup, you'll see a frame with a crop option. You can resize the frame to select the screen area from your mockup. Click “Crop” and the cropped screen will appear on the right side. (We will add zoom, move, and a magnifying function soon.)

4. Sync your screens into CanvasFlip

Once you have cropped all the necessary screens you need, you can click “Sync with CanvasFlip” in the bottom-right corner.

5. Sign up for a free CanvasFlip Prototyping account

To upload your screens into CanvasFlip, you will need to login to your CanvasFlip account. If you don’t have an account, you can sign up for a CanvasFlip account instantly by entering your email address and a password.

6. Create a new prototype (or choose an existing prototype)

Once you have logged-in to your CanvasFlip account, you can create a new prototype or choose an existing prototype to upload your Balsamiq prototypes.

7. Map screens to create an interactive prototype

All your cropped screens will appear in the CanvasFlip prototyping studio. Here you map your screens to create a prototype for user testing. CanvasFlip prototyping studio is specially designed for fast prototyping to save up to 70% of your prototyping time.

8. Invite viewers to your prototypes for user testing

Once you have mapped your screens, preview your prototype and go for a quick and lean user testing. Enter emails of your users / team members and add a task for them to follow.

9. Analyze UX analytics in real-time

As soon your users / team members start going through your prototype, you can see how are they navigating through your prototype, which devices they are using, and how much time are they spending on each screen.

10. Analyze the conversion funnel to find screens with high drop-off / diversion rates in your UX flow

The conversion funnel helps you understand usability in your UX flow, for example: How many interactions are users taking to complete the task? What’s the completion rate? What’s the most popular flow on the existing prototype?

11. Analyze the interaction heatmap to see improvements needed at call-to-action

Once you spot the screens with higher drop-off or observe where most of your users are leaving the expected flow, you can open the analyze screen with a heatmap to understand where users are interacting most. It helps you to optimize your Call-To-Action.

12. Look at User videos to find and fix usability issues in your prototype

The conversion funnel and interaction heatmap help you understand what’s happening in the UX flow and interface. User videos give you the opportunity to observe and analyze how the user was navigating through the prototype and why they made certain decisions.

These user testing insights in CanvasFlip will help you iterate and enhance the usability of your designs right in your Balsamiq mockups.

As a Balsamiq user, you get 2 months of our premium subscription (instead of the regular 15-day trial). You get unlimited prototyping and can record up to 5 videos for each prototype. Please feel free to reach me at, if you want an extension of your current plan or more testing credits.

With CanvasFlip, you can save money by validating and iterating on the user experience early at the concept level instead of iterating with live apps. Not to mention faster app development and happy users.

Enjoy 2 months of our premium subscription to CanvasFlip prototyping - It’s on us!!

Why we switched to Font Awesome for Balsamiq Mockups 3

It was with mixed feelings that we switched to the Font Awesome icon set with Balsamiq Mockups 3.

Our original icons were hand-drawn by Peldi's wife Mariah so they had special meaning to us.

But creating new ones and keeping them updated as logos changed (our Twitter icon was three generations old, for example) was time consuming and didn't provide as much value to our customers as adding new features and fixing bugs.

And then Font Awesome came along and it was free and, well, awesome. We used it internally and added it as an easy-to-install icon pack on our Extensions page and our customers loved it too.

In our Beta feedback forums our users started talking about integrating Font Awesome when we decided to remove the Account Assets feature. So Peldi contacted Dave Gandy, creator of Font Awesome, and asked him if we could use them in our tool.

From: Giacomo Guilizzoni
Date: Tue, Feb 17, 2015 at 6:28 PM
Subject: Hello from Peldi from Balsamiq!
To: Dave Gandy

Hello Dave!

This is Peldi from Balsamiq. We make a wireframing tool called Balsamiq Mockups, maybe you've heard of it? 

We have noticed that quite a few of our customers use your awesome Font Awesome set of icons in conjunction with our tool. There's even a github repo of someone who made it easy to do.
We are working on a new version of Mockups, and were wondering if it would be possible to include your Font Awesome set as a built-in set, replacing our homegrown (and much inferior to yours) set.

I looked at your licensing page and it looked feasible, but I thought it'd be worth maybe having a quick chat first?

What do you think? I am excited about the idea, as it would give our users a standard set of icons that their developers would understand immediately...and probably also help cement Font Awesome as "the standard" for app and web design, even more than it is today. :)

I am in CET, and happy to meet any time.

His response was delightfully straightforward.

From: Dave Gandy
Date: Tue, Feb 17, 2015 at 6:34 PM
Subject: Re: Hello from Peldi from Balsamiq!
To: Giacomo Guilizzoni

Heck yeah. Go ahead and throw them in. It’s as open source as I can get it. :)

A few days later Peldi had swapped out the old ones for Font Awesome and remapped the labels so that existing projects with icons wouldn't break.

We were a bit giddy here when we used the first Beta build with the new icons. Getting so many great icons all at once felt like Christmas to us.

We'll also be updating our icon set whenever Dave updates Font Awesome. So, now, if you want us to add icons to Balsamiq Mockups, request them in Font Awesome and they'll make their way into our product!

We hope you're enjoying the new icons. And, if you're nostalgic for the old ones, we've made them available for download as custom icons.

Improve your myBalsamiq Prototypes with UsersThink

The following is a guest blog post by John Turner of UsersThink. Enjoy!

Being able to iterate quickly is important for any project, and that's one (of many) reason why Balsamiq is so awesome. It makes it easy to build and edit mockups quickly, even if you're not a designer.

But being able to get objective feedback is also important in the process of designing, and that hasn't always been easy. I started UsersThink to make it easy to get focused feedback on your mockups and prototypes, without needing endless setup or recruitment or any of the usual hassles.

And the combination of an easy-to-use mockup tool like Balsamiq with an easy-to-use feedback tool like UsersThink is like peanut butter and jelly, especially when you see how well they work together.

Here's how to get UsersThink feedback on a myBalsamiq design in just a few steps:

1. Get the prototype URL from your myBalsamiq mockup

Head over to your project and open the mockup you want to receive feedback on.

In the upper right corner of the mockup screen, there should be an arrow pointing to the upper right.


If you hover over that arrow, it should say "Launch Prototype".

Launch Prototype
Click it, and you'll get a publicly shareable URL of your mockup. Make sure to copy that URL, you'll need to enter it into UsersThink.

2. Visit

UsersThink provides you with focused feedback on any landing page you give it, including a myBalsamiq mockup, like the one you've just prepped for feedback.

UsersThink Homepage

To get an example of what a UsersThink participant's feedback will look like, check out a sample user response on the home page.

Click on the Pricing option, and then select the test option you want. The test options are distinguished mainly by the number of participants who will be giving you feedback.

Select the option that works best for you.

3. Paste the Launch Prototype URL into UsersThink

In the first part of ordering, there is a field labeled "Your Landing Page URL".

Prototype URL

Paste the Launch Prototype URL into that field, then hit the right-facing arrow button.

Enter your payment information, and click Pay Now.

4. That's it!

That's how simple and easy it is to order feedback from UsersThink. We got tired of the endless options and configurations of other tools, so we standardized and streamlined the process so you can focus on the feedback, and not waste time on setup.

Within 24 hours (often much sooner) you'll get the results of the feedback via email.

5. Get feedback and improve your prototype

Read through the feedback on your prototype and you'll notice trends in terms of what's working and what isn't with your initial design. Since Balsamiq is so easy to use, you can take your newfound knowledge and quickly turn it into improvements in no time.

If you have any questions or if there's anything you'd like to know, feel free to reach out to me, John Turner (CEO of UsersThink) at

User Testing Your Mobile Balsamiq Mockups with HeatData

The following is a guest blog post by Jason Shah of HeatData. Enjoy!

What if you could know precisely where - down to the exact pixel - people were tapping on your content, pinching and zooming on your images, and rotating their phones and tablets to get a better experience of your mobile sites and apps? Now you can share your Balsamiq mockups to HeatData and get heatmaps of user testing on mobile devices.

The HeatData team wanted to make it super simple for Balsamiq lovers to import their wireframes into HeatData and do serious user testing.

Here’s what you do to test out your mobile mockups from Balsamiq in HeatData:

1. Create your design in Balsamiq Mockups

2. Export your design as an image

We prefer for you to only export the screens, without the iPhone border.

3. Upload that design in the Mobile App Designs section of HeatData.

The HeatData Dashboard

The HeatData Mobile App Designs Section

4. Share the unique HeatData URL and have users interact with it

You can SMS, email, tweet, or simply copy+paste the URL to share it.
The HeatData “Email this URL” feature

Tapping, swiping, and interacting in other ways with the design on an iPhone

5. Magic. View your HeatData from the Balsamiq design right inside HeatData.

A drilldown page for the mockup - see all of the data, unfiltered

You can also filter down into specific events like just taps, touches, and pinches

And that’s it! So what are you waiting for? Go over to and load up your mobile Balsamiq mockups today.

User Testing your myBalsamiq prototypes with

The following is a guest blog post by Darrell Benatar of Enjoy!

Part of the reason we’re such big fans of the Balsamiq Mockups interface is how simple it is. Users can literally have a mockup of a new site or app ready to share with stakeholders and other team members in just minutes. In fact, we’ve recently finalized the design of one of our upcoming campaigns after creating our wireframes through Balsamiq’s desktop app.

For the purposes of this article, we’ll focus on mockups created through myBalsamiq, which makes it easier than ever to get the feedback you need to optimize your prototype. Like all things related to design, it’s always a good idea to receive feedback from those outside your creative process.

While it’s great to pass along ideas to your teammates and collaborate on your latest mockup, there’s always a chance that you’ll miss out on important features that your end users are looking for.

At, our panel of users are at your disposal, and can provide you with detailed usability testing results in as little time as an hour...and it's affordable! Here’s how it works in a nutshell:

  • Create Your Test:  Choose one of our task templates and customize it for your site.
  • We Notify Users: Users who fit your chosen demographic are notified and immediately record themselves using your site.
  • Get Feedback: In 1 hour, you'll get a usability test video and written answers to your questions.
  • Share Results: Combine your favorite clips into a highlight reel to email to your team.

Once you’re ready to share your wireframe with your team, take a moment to drop by and share it with our testers to gain valuable feedback from potential end users.

Here’s how you can get started in a few easy steps:

1. Create Your Prototype URL in myBalsamiq

When your mockup is ready to test, switch to prototype view and prepare your URL before heading over to With the click of a button you can generate a shareable URL for your prototype through myBalsamiq.


2. Select the Number of Participants for Your Test

Once you’re on our homepage, click on the “Pricing & Sign Up” link, then select the number of participants for your test. You can have as many as 100 participants reviewing your prototype.


3. Pick a Device & Test Type

Select Personal Computer or Mobile Device as your preferred device for the test, then choose whether or not you would like to use one of our templates that are prepopulated with tasks and questions based on your needs. We even have a tab prepared just for users looking to test their latest prototypes.


4. Copy & Paste Your Prototype URL

After you click “Start with this template,” copy your prototype URL and paste it into the first field.


5. Customize Your Test

Once you click “Continue,” you’ll have the option to customize the template with your own instructions, tasks, and questions for our testers.


6. Choose Your Demographic

When you’re ready, you’ll have the option of revising the number of participants you’d like to test your prototype, the source of your participants, and your target demographic.


7. Come Back In an Hour

Participants typically complete tests within an hour after you’ve submitted your test. As your tests are completed, you’ll receive an email notifying you that they’re ready to view. You’ll now be able to view a video of your prototype being tested, as well as answers to the questions you’ve provided. Through your dashboard, you’ll also be able to export your studies, create highlight reels of your video reviews, and share them with your team.

So that's it! Get the most out of your myBalsamiq prototypes and receive unbiased feedback on your mockups today. We're also more than happy to chat with you about your usability testing questions, so feel free to let us know how we can help at

Go from Mockup to Code with Reify

The following is a guest blog post by Raymond Ha of Isomorphic Software. Enjoy!

Hi, Everyone, I’m Ray from Isomorphic Software, the creators of SmartClient and Smart GWT. If you haven't heard of our technology before, SmartClient and Smart GWT are HTML5/AJAX platforms that are used to build complex web applications, especially those that involve lots of screens, lots of data and power user features.

We’re big fans of Balsamiq, so we’re excited to announce a new tool that generates SmartClient and Smart GWT code from Balsamiq mockups in one easy step. It’s called Reify – an actual English word meaning "to make something abstract more real or concrete".

There are already several tools available that can turn Balsamiq mockups into simple interactive web pages, PDFs, and other formats so they can be more easily shared. That's not what Reify does.

Instead, Reify deeply analyzes your Balsamiq mockups, and produces source code similar to what a developer might write by hand. This allows your team to skip over the phase of painstakingly recreating the UI shown in the mockup, and move directly to adding business logic and data binding.

Watch the Video

Don’t re-create. Re-use.

Reify allows you to get much more out of your Balsamiq mockups. Normally, when a mockup is handed off for implementation, your developers needed to laboriously duplicate the mockup in actual code - one screen at a time. This is an enormous waste of time and effort, and typically causes extra iterations as developers inevitably miss subtle but important details. With Reify, you can go straight from a mockup to working code that reproduces your intended design.

Reify - Import

How does it work?

In Balsamiq, placing a widget on top of a window or tab is enough for the mockup to look right. However, working applications need to know that a widget is contained by a tab or window, or the wrong thing will happen when the screen is resized or the window dragged.

Reify deeply analyzes your mockup to discover the relationships that are implied by the way you arranged widgets. Containment relationships are automatically discovered, labels are automatically associated with input controls, input controls are automatically grouped into logical forms, and aligned components are grouped into flexible layouts that respond as expected to browser resizes.

Reify even compensates for imprecision in mockups by recognizing that a set of controls is meant to be perfectly aligned even if the mockup is a few pixels off, and recognizing that the intended size of a control is its visible size, not the size of its (invisible) bounding box.

Clean, Extensible Code

Tools that generate code often produce awful results that cannot be meaningfully extended. Reify is different.

Reify outputs screens in Isomorphic’s Component XML format, a concise, declarative format similar to Flash’s MXML or Microsoft’s XAML. Reify makes great efforts to produce clean, minimal code. For example, if a component gets its size from its container, Reify won’t output the redundant size information on the component. More generally, Reify will avoid outputting code that would set a property to its default value.

Screens created by Reify can be connected to real data sources in one step, and event handlers and business logic can be added while keeping the screen definition in XML. This enables a clean separation between layout and logic, and allows non-developers to understand and modify screen layout without breaking business logic.

No Limits

You can easily mix and match between screens imported via Reify and classic hand-coded screens and layouts. For example, if you have created a highly dynamic, portal-style layout manager that couldn’t be built just with XML, you can still use Reify to create portlets, wizards, and other screens controlled by your advanced layout manager.

Or, you can create a screen that has a placeholder for a dynamically generated component, and insert that component programmatically after the Reify-created screen is loaded.

Reify lets you maintain any part of your application in easy-to-read, easy-to-modify XML, while still allowing advanced, data driven techniques to be used wherever appropriate - the best of both worlds.

Get Started

You can Try Reify online, without installing anything, at the live demo site! Here are two sample mockups so you can try it right now (Sample 1: Resize bars & Layouts; Sample 2: Navigation, Charts). Or, if you’re ready to get started then download our free 60-day trial.


Thanks to the Balsamiq team for creating one of the best tools in the business. We hope that Reify will become another invaluable tool in your arsenal. If you have any questions, please Contact Us or visit our Forums.

The Isomorphic Team