Image showing Wireframing

My Experience with Balsamiq Mockups – A Rapid Wireframing Tool

Image showing Prototyping


“Fail early, fail often”, a quote extremely relevant to the field of User Experience due to the fact that following such a modus operandi is essential for making swift iterative improvements to products. Mockups and wireframes are great tools that assist in rapid-prototyping, due to their lower level of detail and simpler construction. While some user experience professionals prefer sketching out their initial mockups, others that are not as comfortable with sketching rely on software such as Sketch App, Adobe XD and many more.

User experience is a very collaborative field, and apart from other designers on our team, we might need to include stakeholders, developers and other team members in the ideation process. Quite often, they might also participate in creating initial concepts, but the above-mentioned tools have a certain learning curve associated with them, and therefore, they prove to be quite tricky for the non-user experience folk to use. Many of them also might not be comfortable with sketching, or the fact that they are working out of some other facility might hinder their ability to share and talk about their sketches easily.

My Experience with Balsamiq

I encountered a situation in one of the projects I was working on a while back, where my colleague was situated elsewhere and we had to collaborate on the designs. We started off with clicking pictures of our sketches and sharing them via email, which was proving to be quite a cumbersome effort. Moreover, my colleague was not very comfortable with sketching and preferred connecting via phone to talk about his ideas rather than showing them visually. This is when I started searching for tools that we could use to resolve this problem that had slowed down our progress significantly. After much searching, I stumbled across Balsamiq, that soon became my permanent companion in my collaborative conceptualization and wireframing tasks.

Balsamiq is a rapid wireframing tool that has been intelligently loaded with collaborative features to better serve the iterative nature of user experience processes. It has a gentle learning curve allowing for an easy onboarding for novice users. Although Balsamiq has several features that I absolutely love, it is not without its flaws.


Swift as the wind

First and foremost, Balsamiq is one of the quickest tools I’ve used for sketchy wireframing. It has an inbuilt library of several user interface elements, that you can simply drag and drop. There is also a quick add feature, that lets you quickly key in your desired element (for instance – ‘Search’) and it shows up a list of matching elements from its library. Clicking one of these items from the list immediately adds the element to your canvas. In my personal experience, I almost completely rely on this ‘spotlight search’ like feature, as I find it way faster to use than the ribbon-like icons on the main interface. Another feature that helps speed things up a notch is the availability of an inbuilt icon library. Common icons like search, home, help etc. are all available at your fingertips. I feel that this made a lot of sense, considering the fact that during the initial wireframing phase, professionals hardly want to invest time searching for or creating icons.

Inbuilt UI elements and quick add features

Inbuilt UI elements and quick add feature

Collaboration is Key

Secondly, as I mentioned above, there was a project I was on, that required me to collaborate with a colleague, who was a Business Analyst (non-design background) and was based out of a different facility. Balsamiq came to our rescue and helped us bridge the communication and collaboration gap, by offering a Google Docs like share feature through its cloud-based service, where two or more users can simultaneously work on the same project, and any modifications are shared in real-time. “It is like sharing screens!” – said my colleague when we connected after the successful ideation session. Apart from this brilliant feature, I also liked the fact that I had control not only over the versions but also over user permissions while sharing, allowing some users only to view, while some to have full editing capability. Furthermore, I liked how there was no need to install a desktop client and we could simply use Balsamiq cloud’s web-based interface.

Real-time collaboration and per user permission

Collaboration and Permissions

 Version Control

Version Control

A Piece of Cake to Use

Finally, another reason why I liked Balsamiq so much, was the fact that the essential features were so easy to use, that everyone I’ve worked with on Balsamiq so far, did not feel the need to watch tutorials or read any sort of documentation to get started. Getting them to use the tool was a breeze, regardless of their background or experience using design tools. This ease of use promotes collaboration even more, as stakeholders and various other members of the team can participate in design activities or provide feedback etc. This makes working on projects faster as well, as it cuts out the traditional time-consuming sharing approach.


I have mentioned above how much I like Balsamiq and how it has been my permanent companion over the years. But I would be lying if I said that it is a perfect tool and like most software out there in the market, Balsamiq too suffers from certain flaws.

Right from my initial rendezvous with Balsamiq, I have always felt the need to have the ability to create my own library of interface elements or be able to import from external sources. I would often think to myself – “Why should the users be limited to the ones Balsamiq provides out of the box?”. I feel that having this feature could have made Balsamiq an even more powerful tool than it already is. This way Balsamiq’s use-cases could even be extended to cover higher fidelity prototypes by providing users the ability to load up their own high-quality UI libraries. Native app libraries such as Android Material Design, iOS, Windows fluent UI could also be used without the need to recreate the most common native elements.

Balsamiq also offers the ability to prototype, but the functionality is very limited. The most one can get out of it is simple static click-throughs. In prototype mode, you will immediately feel the need to have more interaction options or animations etc. and due to this bear bones feature, I have always preferred simply exporting the wireframes as images (PNG) and using InVision App or Marvel to prototype.

Finally, I feel that the interface, although quite usable, has a quite dated visual design. In fact, it sometimes counters my design inspiration. Since the tool promotes good design through its functionality, why not practice what you preach and make an interface that acts as a source of inspiration for its users?


Balsamiq is a very powerful tool when it comes to quick collaborative wireframing. Its ability to allow non-designers to easily use it to participate in ideation or conceptualization is outstanding due to a very gentle learning curve as compared to many other tools in the market. With its cloud-based collaboration features, users no longer need to be in the same room in order to work together on the same designs and the version control functionality makes managing changes a breeze. Balsamiq’s quick-drag drop UI element library helps tremendously speed up the process of wireframing. However, there are still places where the tool could be improved. A flexible UI library system that allows importing external or self-made libraries, would be a huge plus. A feature-packed prototyping mode is also something that would greatly expand the tool’s capabilities and a little visual overhaul of the interface would go a long way. I am quite impressed though with the pace at which Balsamiq is receiving updates, and I am certain that these flaws would soon be ironed out.


The UX of the Smart Car

Remember the television show of the 80s called Knight Rider? If yes, I’m sure you are picturing the uber-cool black colored Pontiac Firebird with the blinking red lights. The show was a hit, mostly thanks to the futuristic feature-packed beast of a car that assisted its undercover-cop owner in solving crimes. The car could self-drive, follow voice commands, make decisions and so much more. In today’s times, big players like Tesla Motors, Mercedes-Benz and Audi are working strongly to make cars smarter by the day, and we can see the Knight Rider car become a reality. Equipped with various sensors and complex electronic systems, cars can assist drivers with near self-driving capability. The responsibility of making decisions for safety and navigation is shifting from the driver to the artificially intelligent systems. Easy integration of software such as Android Auto and Apple CarPlay with the in-car systems allows adding the ‘Smart’ factor to almost any car. With this rapidly changing landscape where consumers are being exposed to smarter vehicles, several challenges arise, many of which can be tackled by User Experience techniques.


UX Challenges in Smart Cars

Driver Distraction

Infotainment systems in cars are extremely useful for viewing and controlling various settings and features as well as managing the entertainment systems. However, driver interaction with these systems can be a source of distraction. Wired connectivity of the infotainment unit with personal devices can also cause physical obstruction in some cases, not to mention the painful process of managing cables and finding difficult to access connection ports. These issues can not only be frustrating for the driver but can also cause obstruction or distractions that could lead to accidents (Reuters, Car Dashboards that act like smartphones raise safety issues, July 2015).

Trust & Confidence

With advanced systems on board, cars these days can predict collision scenarios and detect pedestrians among various other intelligent actions. When the car makes several of the decisions for you, it is quite possible that a lack of trust or confidence could creep in (Mashable, Self-Driving Cars Still Need to Earn the Public’s Trust, Oct 2017). Questions like “What if the system doesn’t work?” and “What if there is a malfunction?” are quite common when users first experience smart cars.

Tesla Autopilot Dashboard

Credit: Tesla Motors

Perceived Safety

Drivers or passengers can develop high levels of perceived safety due to the powerful and promising capabilities of smart cars. While it is a good idea to make people feel safe, it can also lead to negative results, such as drivers relying completely on the onboard systems and not paying sufficient attention during dangerous situations (, User Experience Design for Vehicles, 2012)

Driver Emotion

The driver’s emotional state is an important issue for automotive safety. Emotions affect perception and action, and hence, they are extremely relevant. Several driving behaviors are negatively affected by emotions, linking stress, anger or aggression to accidents. Frustrations arising due to poor usability of in-car interfaces and controls or difficulty navigating can also contribute heavily to a negative emotional state (, User Experience Design for Vehicles, 2012).

How UX Design is Making Smart Cars Better

User (Driver) Research

There are many contexts possible for a driver, be it a slippery drive on the rainy roads of Portland or a foggy encounter on the crests and troughs of San Francisco. If these contexts are not kept in mind while designing for smart cars, there is a high chance for the design to fail, and failure in a driving scenario could have terrible consequences. Research is hence essential, where UX Practitioners observe and interview people driving in real-world scenarios, while unveiling their pain points and understanding their behavior (Key Lime Interactive, User Research Methods for Automotive User Experience, Oct 2015).

Google, for example, conducts its research by simulating real-world scenarios and combining it with special eye-tracking sensors to understand how drivers interact with Android Auto (Android Central, This is how Google Tests the Safety of Android Auto, 2016).

Augmented Reality (AR)

Many companies these days are working on technologies and techniques to augment reality for the drivers to prevent distractions and instill a sense of confidence. This is often achieved by creating overlaying interfaces that either appear directly on the windscreen of the vehicle or appear on top of a real-time view of the environment around the car displayed on the infotainment screens. The interface elements are intentionally made translucent, allowing good visibility of the environment with minimal obstruction. UX designers make use of typography, design principles and user research to create and refine the design of the overlaying interfaces for clarity and understandability (CNET – Roadshow, Augmented Reality in the Car Steps Towards Production at CES 2017, Jan 2017).

Visualizations and graphical representations are heavily used to allow quicker recognition through peripheral vision, eliminating the need to fixate on the interface rather than on the road. These techniques also allow giving users timely feedback for any decisions made by the car’s artificial intelligence and displaying information about pre-determined decisions beforehand. This allows building trust with the user, as it eliminates the element of surprise when the car makes a decision.

An example of AR in vehicles is Harman’s LIVS concept showcased at CES 2017, which is capable of placing street signs over intersections, greatly helping drivers (Harman, HARMAN Unveils the Ultimate In-Car Experience for Intelligent, Intuitive Autonomous Driving at CES 2017, 2017).


Credit: Mercedes Benz

Voice Commands & Gestures

Gestures and voice commands are powerful ways to interact with smart cars. They reduce hand-eye coordination efforts and the need for haptic feedback while using touchscreen interfaces or other controls of the car. With devices such as Google Home and Amazon Alexa in the market and assistants like Siri and Google Assistant on almost every smartphone out there, consumers are getting more comfortable with using voice commands as time passes. Gestures are like second nature to humans and it is a great idea to leverage this human trait for interaction with smart cars (Medium, Reimagining In-Car UX, Sep 2014).

For instance, BMW allows drivers to use gestures to accept in-car phone calls and control the music volume. Even several voice commands exist to perform vital tasks that drivers are highly likely to perform, such as navigation (Medium, 5 Car UX Design Trends, Aug 2015) (Carnation Software, BMW Owner’s Manual).

UX Designers incorporate these interaction methods to reduce cognitive load on the drivers and allowing a more natural and usable way to perform actions and increase driver confidence. Maybe one day we can finally say goodbye to blindly and clumsily hunting for knobs in some corner of the car.


Many significant advances in the merged automotive and digital fields have been made and will continue well into the foreseeable future. Consumers have also become more immersed in the digital landscape, and their needs and demands are advancing exponentially. With increasing competition and easier access to advanced technology, it is essential for manufacturers to ensure top-notch in-car UX to maintain their position in the market. We might still be a long way from a time when every vehicle would be self-driven with the most advanced and intelligent systems on board, but it is quite intriguing to imagine new ways humans would interact with these marvels and how UX professionals would carve the in-car experience.

Design Critique: IMDb Android App

IMDB - Design Critique - Intro Image



IMDb or Internet Movie Database is a popular online database of information related to movies, TV shows, video games, awards, and events. The database comprises of information on production crew and cast, summaries, synopses, reviews and ratings, which millions of registered users consume daily. As per Google Play Store, there are over 100 million users of the app on the Android platform!


Android App by IMDb: Well-designed?

The IMDb Android app’s design language has evolved slowly and has recently adopted Material Design. While some design decisions made across the app are backed by strong logic and can be applauded, few flaws can also be uncovered in the design. Here are some of the key findings

Failed to scroll on the home screen: Encountered a gulf of execution

Upon launching the app, a scrollable newsfeed-like interface is presented. With a goal – ‘find a good movie’ in mind, there is an immediate intent to explore the landing screen. The mind creates a plan to scroll for exploration. However, due to an obtrusive advert that blocks the lower ~10% of the screen (which happens to be the most usable area of the display), scrolling fails, as the swipe is registered on the advert’s overlay element, rather than on the app’s interface (Fig. A). This creates a gulf of execution as the intended action could not be executed.

IMDB - Design Critique - GIF Scrolling issue

Fig. A: Ad overlay blocks interaction

Recommendation: Embedding the advert in the app’s main interface, rather than having it as a static overlay, will eliminate the obstruction and bridge the gulf of execution, thereby improving the design (Fig. B). An alternate solution would be to substantially reduce the height of the advert to decrease the probability of the user’s thumb landing on it.

IMDB - Design Critique - Fig B

Fig. B: Ad embedded in the app’s interface no longer blocks interaction

Swiping between tabs is disabled: A logical constraint

With increasing importance being given to design, several Android apps have greatly improved their overall quality and conformance to the Material Design guidelines. The ‘easy to understand’ navigation of the IMDb app makes it an excellent example of this. Labels such as ‘Home’, ‘Movies’, ‘TV’ etc. are straightforward and map very well with users’ potential goals.

Navigation tabs are seen in several popular apps such as Messenger, Twitter etc. and users are well versed with the interaction patterns associated with them (For instance, switching between tabs can be achieved by swiping left or right in the tab container) However, when it comes to the IMDb app, tabs cannot be swiped across (Fig. C). But why though?

IMDB - Design Critique - GIF Tab swipe disabled

Fig. C: Tab swipe is blocked to eliminate error due to horizontal scrolling lists

It is important to note that there are several horizontal-scroll lists in the app (Eg. ‘Most popular movies’ in Fig. C) that encourage exploration by swiping left or right to reveal more list items. Having the same gesture for swiping between tabs can cause a conflict and make the interface error prone (users might want to scroll through the list, but might end up switching tabs or vice-versa). The designers of the app have, therefore, intelligently made use of Donald Norman’s principle of constraints by disabling ‘swipe to switch tabs’, so that users do not fall prey to making these errors.

Unable to find articles about awards or events: Poor discoverability

As stated by Donald Norman – “Two of the most important characteristics of good design are discoverability and understanding“, it is very important to ensure that features or functions that the user desires are discoverable. The IMDb app, while mostly working well in this regard, does seem to fail in a particular scenario. With the goal of ‘reading articles about awards or events’ in mind, tapping on the ‘Awards & Events’ tab seems logical, but the landing screen only displays videos at the top with no indication of any other information. On revisit, however, articles suddenly appear below the video-container (Fig. D). So, what went wrong?

There was lack of feedback to indicate that the app is loading up list items below the video. There were also no signifiers present, to indicate that there is a list of articles present (maybe in the form of a heading label or a container). These factors lead to poor discoverability of the feature, resulting in failure to achieve the goal of finding articles about events or awards.

IMDB - Design Critique - GIF Awards and Events not found

Fig. D: Poor discoverability of articles about Awards and Events

Recommendation: Improving discoverability can be achieved by fixing the root causes of the problem: i.e. improving feedback, and providing strong signifiers. A loading / in-progress spinner can be added for feedback, and a container along with a heading label (such as ‘Articles’) can be included below the video-container to indicate the upcoming content. (Fig. E)

IMDB - Design Critique - Fig E

Fig. E: Improved discoverability by adding signifiers (title ‘Articles’ or displaying a container) and feedback (loading spinner)



In light of the above, it is clear that even though IMDb is the world’s most popular database related to movies, TV shows etc., and their Android app is quite well-designed, robust and effective, a few design flaws still plague the interface. Making improvements to these potential flaws is sure to greatly enhance the experience for users.


IMDb Logo