Prototyping for Effective Visualizations and Web Analytics Applications | by Subha Ganapathi | Nov, 2022

Enhance your design thinking skills and productivity with Prototyping

The ability to use visual imagery to narrate a powerful story and to provide actionable insights is both an art and a science. Though there are several business intelligence tools available for consumption, some data nerds prefer creating one-of-a-kind visualizations and charts to convey their stories. Many visualization experts out there prefer using open-source libraries in Javascript such as Chart.js and D3.js or using Gleam, Altair, and other visualization libraries in Python to create gripping visualizations. Some go a step further and bundle up these visualizations into a nice web analytics application. Such solutions may turn out to be less expensive than implementing a standard business intelligence solution, especially for small and mid-sized companies.

There may be situations wherein stakeholders may be on the fence when it comes to opting for a customized visualization solution. This may be because it’s still an abstract concept to them. This is when they should be shown the tangible benefits of using a customized visualization solution. In some cases, the stakeholders may already know the benefits but will want some kind of assurance to be able to trust the expert and release funds for the project. This is where Rapid Prototyping comes to the rescue.

Let’s discuss the reasons why rapid prototyping is a viable option for developing great visualizations.

Sometimes, a visualization or web analytics project can involve multiple stakeholders; each of whom may want different elements to be incorporated. Even a formal Business Requirements Gathering session may not be able to solve conflicting expectations from stakeholders. In many cases, the project may run over due to conflicting stakeholder requests. The resulting visualizations may not be satisfying to stakeholders and end-users. Hence, it is important to add prototype development as an activity before developing visualizations. Prototypes can be quickly reworked, to blend in requests from different stakeholders in a relatively less amount of time.

Prototyping can reduce the time and money associated with iterative design and development, and subsequent redesign/rework. This is especially true if the actual visualization effort involves several lines of code that need to be modified every time a business requirement changes. This is also true when additional requirements get added. On the other hand, prototypes require relatively lesser time to make changes. Once a prototype is signed off by stakeholders for each iteration, the development can begin for that iteration.

Change Aversion often occurs when trying to modify an existing product or process. When a product is functionally modified or visually redesigned, the resulting change can create an adverse reaction among users. While Change Aversion is completely natural, an early prototyping strategy that involves feedback from end users will ensure better adoption. This will also ensure that stakeholders and end-users feel reassured that they were part of the change.

Here, we look at two prototyping tools that offer great features and also have an active community of users that share plenty of ideas and resources.

Figma

Figma is a tool that can be used to develop prototypes for a variety of applications ranging from user interface designs for web applications and mobile apps to wireframing visualizations and reports. Below is a sample prototype created using Figma-

Figma has an active community of users that contribute to the tool by providing free and paid plugins, widgets, and UI/UX components. Figma also offers a Development platform with API and integration support to be able to create new plugins, widgets, and applications. Specifically, in the context of visualizations and reporting, Figma has plugins that enable you to create KPI tiles, trendlines, and various charts that can aid in creating quick prototypes of your visualizations. Figma also offers collaborative tools and whiteboards to enable teams to get together and participate in prototyping sessions. Many users use Figma for building linear prototypes and to build associated automation processes.

Axure is yet another rapid prototyping tool that helps create prototypes without code for websites, applications, and visualizations. Axure offers both a standalone desktop application and a cloud platform. It has a powerful widget library for popular open-source visualization libraries like chart.js. Axure supports integrations with Jira, Confluence, Microsoft Teams, and Slack thereby ensuring that team members stay informed on any new changes.

Sketch is another powerful tool that can be used to build prototypes for visualizing user and customer journeys that can be difficult to visualize using standard Business Intelligence tools. Sketch can also be used for A/B Testing activities wherein you can easily present multiple versions of your prototypes to testers and get feedback instantaneously.

While I have only spoken about these three prototyping tools, there are a lot more available in the market to try out. Mentioning these products here doesn’t mean that I am promoting or endorsing them. I am just conveying the fact that prototyping tools such as these can be a valuable and productive option for building great visualizations and web analytics applications.

Enhance your design thinking skills and productivity with Prototyping

The ability to use visual imagery to narrate a powerful story and to provide actionable insights is both an art and a science. Though there are several business intelligence tools available for consumption, some data nerds prefer creating one-of-a-kind visualizations and charts to convey their stories. Many visualization experts out there prefer using open-source libraries in Javascript such as Chart.js and D3.js or using Gleam, Altair, and other visualization libraries in Python to create gripping visualizations. Some go a step further and bundle up these visualizations into a nice web analytics application. Such solutions may turn out to be less expensive than implementing a standard business intelligence solution, especially for small and mid-sized companies.

There may be situations wherein stakeholders may be on the fence when it comes to opting for a customized visualization solution. This may be because it’s still an abstract concept to them. This is when they should be shown the tangible benefits of using a customized visualization solution. In some cases, the stakeholders may already know the benefits but will want some kind of assurance to be able to trust the expert and release funds for the project. This is where Rapid Prototyping comes to the rescue.

Let’s discuss the reasons why rapid prototyping is a viable option for developing great visualizations.

Sometimes, a visualization or web analytics project can involve multiple stakeholders; each of whom may want different elements to be incorporated. Even a formal Business Requirements Gathering session may not be able to solve conflicting expectations from stakeholders. In many cases, the project may run over due to conflicting stakeholder requests. The resulting visualizations may not be satisfying to stakeholders and end-users. Hence, it is important to add prototype development as an activity before developing visualizations. Prototypes can be quickly reworked, to blend in requests from different stakeholders in a relatively less amount of time.

Prototyping can reduce the time and money associated with iterative design and development, and subsequent redesign/rework. This is especially true if the actual visualization effort involves several lines of code that need to be modified every time a business requirement changes. This is also true when additional requirements get added. On the other hand, prototypes require relatively lesser time to make changes. Once a prototype is signed off by stakeholders for each iteration, the development can begin for that iteration.

Change Aversion often occurs when trying to modify an existing product or process. When a product is functionally modified or visually redesigned, the resulting change can create an adverse reaction among users. While Change Aversion is completely natural, an early prototyping strategy that involves feedback from end users will ensure better adoption. This will also ensure that stakeholders and end-users feel reassured that they were part of the change.

Here, we look at two prototyping tools that offer great features and also have an active community of users that share plenty of ideas and resources.

Figma

Figma is a tool that can be used to develop prototypes for a variety of applications ranging from user interface designs for web applications and mobile apps to wireframing visualizations and reports. Below is a sample prototype created using Figma-

Figma has an active community of users that contribute to the tool by providing free and paid plugins, widgets, and UI/UX components. Figma also offers a Development platform with API and integration support to be able to create new plugins, widgets, and applications. Specifically, in the context of visualizations and reporting, Figma has plugins that enable you to create KPI tiles, trendlines, and various charts that can aid in creating quick prototypes of your visualizations. Figma also offers collaborative tools and whiteboards to enable teams to get together and participate in prototyping sessions. Many users use Figma for building linear prototypes and to build associated automation processes.

Axure is yet another rapid prototyping tool that helps create prototypes without code for websites, applications, and visualizations. Axure offers both a standalone desktop application and a cloud platform. It has a powerful widget library for popular open-source visualization libraries like chart.js. Axure supports integrations with Jira, Confluence, Microsoft Teams, and Slack thereby ensuring that team members stay informed on any new changes.

Sketch is another powerful tool that can be used to build prototypes for visualizing user and customer journeys that can be difficult to visualize using standard Business Intelligence tools. Sketch can also be used for A/B Testing activities wherein you can easily present multiple versions of your prototypes to testers and get feedback instantaneously.

While I have only spoken about these three prototyping tools, there are a lot more available in the market to try out. Mentioning these products here doesn’t mean that I am promoting or endorsing them. I am just conveying the fact that prototyping tools such as these can be a valuable and productive option for building great visualizations and web analytics applications.