myBalsamiq Beta Gets an Overhaul

It's been quiet around the UX blog for the past month. We've been heads down working on a beta refresh, making big usability improvements to the way you work with projects in myBalsamiq, and we've just released the latest iteration for our beta testers.

Watch Peldi's screencast below to take a look at what we've been up to.

Here's the full list of improvements and feature additions you'll find.

1. Simplified navigation views

We've transitioned from using Flex for the project, mockup, and asset views to using HTML. This means that those views will be rendered more quickly and should provide a familiar experience.

2. Home Page

The home page will show you a set of projects, visualized as sketchbooks on a desktop.

You can create or upload new projects and set a different style image to differentiate between them. The style of the home page background colors and texture can also be changed.

3. Project Page

The Project page shows your project mockups. When we moved to the simpler views on list pages, we also addressed some of the usability issues of controls. Some actions for objects in our project/mockup/asset browsers were far away from the objects. Now all actions are next to the object. View/Open is the default link, and there is an action menu to the right of the project title to access other options from those views, e.g. delete, edit, etc.

The order of your mockups is now important because we're introducing the story view. We've made ordering mockups simple using drag and drop. When you hover over a mockup in your project page, you'll see a gray grip bar appear above the mockup and the cursor becomes a move icon. Drag and drop to re-order. We've also provided direct manipulation cues in the thumbnail navigation on mockup pages.

4. Grid/Story/Map View

On your project page, you'll notice 3 icons in the right below the New Mockup button. These let you change the view of the project mockups between grid, story, and map. And when you've selected one of these views we'll remember and show you that view when you return until you select another one.

Grid is the thumbnail gallery view of your mockups, arranged in rows and columns. This will be your most common view.

The new story view allows you to see all mockups at 100% width in a single page with descriptions. This is useful when presenting your project to team members or possibly when printing. The linear order makes it easy to describe flow while scrolling through the entire project.

5. Mockup Page

The Mockup pages have been simplified. We've put the mockup center stage, spanning the entire page width. That was a small, but necessary change to help give our mockups focus and to fit wider mockup designs.

We now provide a new set of controls for navigation to previous/next mockup, displaying a list of all thumbnails in the current project, and opening the project in prototype view. In the small area below the Edit and New Mockup buttons, there are small icons for these actions.

Prototype View: The arrow icon that points up and right opens a new window using the current mockup only--it removes the rest of the application interface.

Previous/Next Navigation: The left and right arrows allow you to navigate to the mockups before and after the one you're currently looking at. Hover over the arrows and you'll see a tooltip with the name of the mockup.

Thumbnail Navigation: The icon on the right will show a thumbnail navigator on the right of your mockup. This allows you to view the entire deck of mockups in the project so you can jump to a different one. You'll notice that the action menu arrows on the right of the mockup titles give you access to all the advanced options, and hovering over a thumbnail also displays the grip control so you can drag and drop to reorder right in this thumbnail strip. This is a big improvement over our previous heads up display.

6. New Prototype View

The Prototype view opens the mockup in a new page by itself without the surrounding myBalsamiq interface. If you have links in your mockups, you can now use your project as a click-through prototype for demonstrations and usability testing. It's super simple, but this feature will make your Mockups useful for more of the design and testing process.

7. New Project Team Menu

You'll still be able to contact your whole team or individual people via Skype chat, call, and email, as well as view your entire team map.

We've moved the controls for doing that to the upper right of the page in a header menu that's available everywhere on your site. We think it's a lot simpler now and it's nice to have it in one position, tucked away in the header.

8. New Access Control Menu

Setting access control is a lot easier to find and use. In the header menu on the upper right, you'll see a lock icon labeled Access. When you open the access menu, you'll see a slider that let's you set your access level.

9. New Account Settings

We've separated user settings (configurable options for you and your team) and the site account settings (admininstrator configurable options for the site).

Among the account settings changes we've added are a set of pre-set themes to modify the design of your site, and color selectors to customize to your specific brand requirements.

The staff page combines the map of your project team so you can easily view people by availability, and the staff grid below provides an interface to manage your team with the same action menu on the right, which should now be familiar to you from the controls we described above.

That's all for now. We still have a log of bug fixing and improvements to implement. This is a major iteration, and releases with fixes should be more frequent from now on.

Current beta users can head to their myBalsamiq site. If you want to get notified when we open up the beta to more users, add your name to our invitation list.

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.



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.