A couple of months ago we started experimenting with Balsamiq Mockups. It’s a compact and very simple program with which to build wire-frame models of user interfaces. By way of example, below is one of the screens that we have drawn using it in Russian.

Sample Balsamiq mock-up

When we started to experiment with Balsamiq I could not have imagined how much this program would affect our development process and how many radical changes it would bring.

We develop business applications and developing online banking, online advertising and CRM are a very significant proportion of our work. We have developed some publicly available applications that include a large non client facing administration component. For example, we’ve built an E-commerce system, where about 15 screens are publicly available, while the in house admin component includes about 40 different screens, and continues to grow.

It’s also important that we don’t have our own graphics designers and UX designers on the team. Why? It’s probably a subject that warrants a separate post.

Before Balsamiq Mockups we would develop functional requirements and then make “the requirements for the designer”. These requirements we would then pass to a graphics designer with UX designer skills or an UX designer with graphics designer skills and then pass them onto the other. As they are all external contractors, they have their own schedules and priorities which may not always fit with that of the project. They can only afford to allocate a specific amount of time to the project and in this time need to draw all the screens.

Our development process BEFORE

We need to continually communicate with the designer, discuss screen drafts, and try to pass on our knowledge and understanding of the business to them. Trust me, it’s quite involved process. If everything goes smoothly and our designer grasps the idea and successfully implements the design then in a month or so we would get the screens and move forward.

What is important here? In fact, the work of designer comprises two major parts:

1.    Analytical part – to decide what functionality needs to go into/onto each screen; and

2.    UX part – to pick and place interface elements on the screen, and do it in an optimal manner

The problem is that for a UX designer the analytical part requires a deep understanding of the complex business models which is time consuming and duplicates the work that we did at the beginning of the project in order to write the project requirements. Designers often have little interest in doing the analysis.

After we mastered Balsamiq, we plucked up the courage so instead of writing requirements for UX designers we started to draw interfaces ourselves. Although there is complex logic in Web systems such as AI, workflows, maths and graphics they are essentially flat. Between 50-80% of functionality of a typical Web app is shuffling data between front-end and DB.

It’s our project manager or analyst who understands the client’s business and requirements and communicates with customer and they draw the screens. This means that we can put the screens together pretty quickly. The output is a set of wireframes instead of a long specification document, which is then passed to the UX designers. This simplifies the process and makes it more efficient.

Development process AFTER

Now the mission of UX designers is to make highly-usable user friendly screens from our purely functional drawings preserving their functional integrity. After a few completed projects using Balsamiq the quality of our “pre-screens” have improved so much that in some cases we have done the UX part as well. After all it’s not rocket science.

As a consequence we get some interesting results. There is no need to write cumbersome requirements; most of them can now be expressed graphically using wireframes.

There is one more important benefit in that we now get the opportunity to embed UX design into our Agile-process. Our development speed has increased significantly, the stage of project ”acceleration” is considerably shortened.

Also communication with our customers has improved. Instead of discussing long texts we can talk graphical screens, which facilitates understanding between us and our client, which is one of the key elements in the success of any project.

It’s quite possible that there are better prototyping programs than Balsamiq Mockups. We selected it based on reviews and ratings. We tested it, liked it and bought it.  Balsamiq Mockups meets our requirements and does exactly what we need.  And it’s not that common in software industry.