User Testing Your Balsamiq Mockups with CanvasFlip

· Posted by Leon in Products · 4 Comments

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.

CanvasFlip.com 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 Vipul@CanvasFlip.com, 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 - http://canvasflip.com/prototyping-with-balsamiq.php. It’s on us!!

Get the Inside Scoop

We'll send you just one email a month and share a ton of information that you'll get before everyone else. More info about the newsletter here.

We'll never share your email address or spam you.

Leave a Comment

Your email is never published nor shared.

Comments (4)

  1. Hey there,

    I’m really sorry that you weren’t able to import your Balsamiq mocks into CanvasFlip. Most of users find it really intuitive and love it… 🙂

    Can you please drop me an email to Avanish@CanvasFlip.com? I’ll be happy to hear more about what are you trying to accomplish and see how can we help you best.

    Regards,
    Avanish,
    UX Researcher @CanvasFlip

  2. it’s a shame the import to canvasflip simply doesn’t work. that and their customer service never respond.

  3. Hey Martin,

    We are working on it. Will update you as soon as we have it in place.

    Thanks for sharing your views.

  4. It’s a shame we can’t upload a PDF that is exported from balsamiq and already includes the clicks between mockups.