👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Next Steps for myBalsamiq

Over the past month, I've been working in myBalsamiq daily, and have been reviewing and answering issues in our GetSatisfaction forum. Each day I went over every detail trying to understand how everything works, and looking for issues that need improving.

A few weeks after I started here, Peldi went to SXSW. When he came back, we talked about what needed to be done here. We both believe that at its core we have the functionality to make it usable, but what's missing is that it's not as simple as it could be, and it's not as fun. We've spent a couple weeks looking at myBalsamiq with fresh eyes and have a corrected vision for the app.

The new concepts reflect an experience focussed on evolving the work space to be more efficient and fun to use, and making the mockup pages more functionally centered on the mockup. We also wanted to make IA and usability improvements that help you move from place to place easily, and hope that the surrounding interface reflects the hierarchy of menus more clearly. Read on to learn about the new concept, or go directly to our myBalsamiq project for the mockups.

The Story

The experience at the onset is like browsing a library of sketchbooks--projects you and your team are working on. You select a project sketchbook to dive in.

Home: All Projects

Home with All Projects

The browsers here are simplified and let you color code the project books. All of the browsers, with the exception of the map will now be rendered in HTML now. We love the direction this is taking and think it will feel simpler on the surface.

A Single Project

Single project in grid view

Once you're in a project, browsing pages is much like seeing all the pages of the book. We allow custom ordering using drag/drop direct manipulation. We're making the menus and behaviors more web-like, and advanced features are now adjacent to the object associated with it, e.g. action menus for mockups wherever they appear in the different views.

A Single Project in Story View

Single project in story view

You can view your mockups in Story View shown above, which allows you to view all of a project's mockups at full width on one screen, with descriptions. This will let you present screens in one view in linear fashion--much like telling a story using your mockups.

Mockup

Mockup

Once you dive into a mockup, you see that the mockup now fills the screen. We have added controls in a "project menu"--the strip below the global nav containing the breadcrumbs, assets, privacy controls, and a project paging section. This carries over the metaphor of flipping through the project notebook. Prev/Next buttons flip you through the custom order you created. Clicking the book icon slides in a thumbnail strip so you can jump to different pages. It can be toggled off with another click. This strip is consistent with the mockup browser shown in our editor.

If you scroll down, you'll see that we have moved elements around to reduce the visual noise of the interface and make the mockup prominent. We've also been exploring how to handle proposals based on the mockup in view, as well as super simple workflow to approve and merge changes being proposed. We're really excited about that.

Test Drive

We've opened the project up for you to take a look at where we're going. Inside you'll see wireframes for the views we're iterating on.

View myBalsamiq Iteration 1

We want your feedback. Let us know what you think about our corrected vision here by commenting.

Hang in There

Thanks again all of you, for your patience. I know it's been a long time waiting for the next stage. To the beta users, these changes will feel like noticeable adjustments on the surface, but all of the core functionality will still be there.

As I said before, I am using myBalsamiq every day, so I enjoy the stuff you do, and feel the pain you feel. If we can't make it a place I want to be every day, then I may as well go home. Help us make it awesome--a place you want to work in every day.

Mike for the Balsamiq Team

Leave a Comment

Comments (3)

  1. @Todd: Thanks! Yes, the little image X’s on the notebooks are thumbnail images–like the paper belly band you find covering those brand new notebooks that are still shrinkwrapped. So we haven’t gotten rid of them. They’re just modified in this design slightly.

  2. Pingback: Balsamiq Company Blog

  3. Great work, Michael. We’re working on an internal app right now and had a similar idea for a launchpad/dashboard for accessing the multiple projects.

    You might have thought about providing a thumbnail preview for the projects, but since this is a closed audience and in most cases the people accessing these projects have worked on them, I think it’s safe to expect they know what’s in those projects based on the tile. I think the moleskin approach, which is simple and clean, is better.

    Can’t wait to see what else you bring to Balsamiq.