Home > UI Design and Prototyping > How to prototype better data-driven designs with Justinmind
Optimizing data visualization in your Justinmind web and mobile app prototypes to improve the user experience

Optimizing data visualization in your Justinmind web and mobile app prototypes to improve the user experience

Data-driven design is a key value driver of growth and user experience in the global software market. From personalized UIs on social media to machine learning and the IoT, data is all over web and mobile design. Actuate postulates that smart technologies will become a $48 billion market, with personalized portals and wearable devices all around us.

Big data, web analytics and metrics inform, connect and motivate customer behavior. The technologies behind harnessing data visualization should empower the user to make informed decisions related to the user journey.

Deploying real data from early on in the design process, say in the prototyping phase, will help you improve data visualization. Our post will help you perfect your method for creating accurate and compelling data visualization.

“Whatever your message is, data visualization can increase its reach a thousand-fold.”Randy Olson

Hard-core data-driven simulation to bring your data to life

Making sure you’re inputting accurate information into your data display should be top priority when designing with data.

To visualize data efficiently we should have clear goals, a target audience in mind and a thorough understanding of their needs. Our data layout needs to be based on the data itself that we are presenting. Essentially, our graph, chart or template needs to adapt to data, and not the other way round.

A data-driven approach to prototyping will allow you to work data-first, bringing the visual design into the mix at the end. As UX Design Lead Chris LaCava points out, data-driven UIs often suffer from “featuritis.” Just because you can display almost anything doesn’t mean you should.

Data lists and data grids are great tools for adaptive data visualization, when you have large amount of data to display or when data will undergo readjustments. Using data masters and importing real data into your prototypes, you can create drop down menus, predictive searches, display user ratings and loads of other displays with large amounts of data.

Prototyping data driven design with Justinmind

You can do data driven design with Justinmind’s data-driven features. Import real data into your web and mobile prototypes and build dynamic data lists and data grids within charts, menus and other data simulations that behave like the real thing.

Data lists, structuring data in rows and a single column, are particularly handy when you’ve got lots of information to display. They make it easier for the user to read numeric or written information and find specific information.










Data grids display data in a grid with rows and columns. Information is processed as an image, making the data grid a good way to present visual information or to show a link between elements.









To get started with a data list or grid, you’ll need to create a data master. You can populate the data master manually, or import your own, raw data from a .csv file. Once you’ve got your data master up and running, you can either create a data list or a data grid. You’ll be able to interact with your data when you simulate your prototype, passing it between different screens and using it to control event execution.

Bonus: to keep things easy on the eyes in your data list, consider split larger amounts of data across different pages. With Justinmind’s index and summary widgets, introducing pagination is easy – take a look.

Download Justinmind and discover the power of data-driven prototyping

Download free

Make data visualization simple and digestible with a UI template

“Choosing the right visualizations to achieve specific goals is a key factor in unlocking the usefulness of complex data.” Chris LaCava, UX Design Lead

When displaying data, ask yourself, ‘What actions do I want people to take away from this insight?’ Whether you’re presenting potential KPI improvements to your team, or comparing your product against the market to boost conversion, you need to identify who is the highest priority persona for your design.

Depending on your audience, you’ll want to think about how you want to display your data. For instance, bar and line graphs and pie charts are great for avoiding cognitive overload.

Bar and line graphs are great for tracking changes and comparing quantities of different categories or variables. Pie charts are a visual way to compare parts of a whole.

Designing chart anatomy in your web prototypes

Creating charts and graphs in your prototypes is easy. Tools like Justinmind allow you to create them yourself, or use pre-built templates to save you time. Add visuals to your data quickly and easily, without sacrificing accuracy.

Justinmind’s Charts UI library has an array of bar charts, line graphs, step line charts, XY charts and bubble charts that users will recognize and be able to engage with, to make it easy for you to choose the right visual for your data. To configure a chart, just go to Justinmind’s Widgets page, download the library and load it inside Justinmind to get started.

Customize your data layout for maximum impact

When designing with data, it’s important that the user is able to decipher your chart or graph. Thinking about the layout and styles of your data display will help to keep the reader focused on the main goal, which we mentioned above.


What makes for good data visualization? Consistency and clarity. Keeping your data uncluttered will make it easier to read. You may want to increase the white space between cells in your data grid. Padding wrapping can help you keep an eye on alignment and make sure that your grid remains clean cut.


Color can either make or break your data display. The right gradients and contrast can help you demonstrate comparison between variables and provide context to the user. Seth Familian, Big Data Automation and Marketing Strategist, suggests using 1-2 gradations on a single color to highlight important insights.

Background tones can also help to indicate differences in the domain of data: switching between single values and sums or averages, for example.

Customizing your data with Justinmind

In Justinmind, you can customize any element of your data-driven prototype. The UI libraries have been created using atomic building block elements so that you can break them down and change styles related to their smallest components. In the Properties tab, you can change the padding, border, wrapping, color and transparency of UI elements.

The grids, rulers and guides will help you align information.

Make your data searchable with applied actions

Making your data searchable benefits the user experience because it can speed up the process of getting where you need to do. In fact, over half of all web users use search as their primary navigation method and 30% use the search box, according to Econsultancy.

Data hierarchy allows you to narrow down the information to a specific interest or result, and can be a powerful feature. Filtering and sorting data allows the user to focus on results that are more closely linked to their end goal. Adding a searchable feature in your web or mobile prototype will make it more intuitive and engaging.

Data hierarchy in Justinmind

It’s easy to make your customize the hierarchy of your data in Justinmind. Choose from the following options:

Make your data-enriched prototype responsive

Responsive and mobile-first are now standard. Prototyping a design layout that adapts to the size and orientation of the device is an excellent way to ensure an optimal user experience across devices.

And when designing with lots of data, you need to ensure that the data container can adapt to the size/orientation of different screens.

Responsive prototyping with data grids

With Justinmind you only need to create one prototype to be able to show it on multiple devices. You can prototype responsive data grid in two ways:

  • By resizing the cells in the data grid. The resize option adapts cells to either larger or smaller sized device screens. All cells are resized dynamically as the screen size changes, without losing their original proportions or properties.
  • By rearranging cells to adapt the number of visible columns in the screen. The grid cells are dynamically rearranged as the screen size varies. Instances would stack horizontally and/or vertically as the screen gets bigger or smaller.

The takeaway

Good data visualization breaks data down into easily digestible visuals so that it can then be analyzed accurately. Data visualization should challenge the reader to think about the concept behind the data, and avoid them having to absorb large sets of data.

Regardless of your industry or company size, you need to think about how you’re going to make sense of your data so that it creates a strong user experience. The first step is deciding what type of technology will help you improve your data visualization.

Prototyping your web or mobile designs is a great way to explore how best to visualize your data. With Justinmind, you can use data-driven prototyping techniques as well as UI templates and libraries to create accurate, customizable data displays. Download the tool now and try it out for yourself!

Emily is Marketing Content Editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *