Digital Perspective for Information Design — A Case Study

Find a meaningful way to integrate complex information with an interactive design and strengthen user’s engagement by making information understandable with a quick analysis.

This article offers insights on how to translate static infographics into digital and dynamic ones. Visual narratives can explain complex concepts and ideas in a clear and engaging way. Using rich interactive visualizations may help stakeholders have a clear and comprehensive view of their design and development tools. This can improve, among other things, the pace, the analytical resources available, and the results of many different projects.

The features presented in the information visualization platform below have been ordered and grouped based on different layers of information (tools, frameworks, programming languages, platforms, etc) as commonly used within IT and design departments.

With this information visualization platform, stakeholders will be able to search and filter information faster, as well as add a timeline to know the current status and track all changes made by different people in the project.

Confusion and clutter are the failure of design, not the attributes of information.
Edward Tufte

In order to create this kind of comprehensive visualization platform, we followed a Lean research process consisting in 7 days. The designers and developers involved in this project also had to think deeper about the development tools available. We chose a strong library like D3js, a Javascript library that you can find at d3js.org and we chose to have all information controlled with a CMS platform. This would allow developers and designers to use the information visualization platform into many other cases.

Research process and steps:

1- Stakeholders interviews, task analysis, and IT requirements collection.
2- Ideation and wireframes: conceptualizing the idea with Sketch and a Hi-Fi design.
3- Creating a Hi-Fi video prototype to know how the final project looks like, and testing how the UI interaction works.
4- Preparing and planning the development stage: presenting code snippets and showing samples to boost processes.

1- Stakeholders interviews, task analysis, and IT requirements collection

We have collaborated with businesses and IT departments to understand both their context and their current process for decision taking, which includes choosing the right technology according to the problems and tasks requirements.

This qualitative aspect of research allowed us to run a workshop with stakeholders to know about and understand the features and to make sure all the features are from an end-user perspective, that should be available in the digital information visualization platform. In order to do it, we created a feature mapping to figure out the kind of tasks that should be present in the information visualization. We came up with the following

User Stories

Sitemap digital information visualization platform

2- Ideation and wireframes: conceptualizing the idea with sketch and a Final Interfaces Hi-Fi prototype

Based on the brainstorming workshop, we gained an initial understanding of the basic ideas. I drew some sketches on how to structure the data: in a linear layout, I selected the variables I wanted to combine.

Usability testing and iteration
We started creating a high fidelity design based on a solid conceptual design that should be reviewed in order to receive feedback. In a workshop setting, we noted all stakeholders’ comments and concerns regarding the technologies and added them to the design. After the note collection, we filtered all those comments and organized them into three categories: 1. must have, 2. should have, and 3. nice to have (a backlog for future updates). We integrated all the data received into the design.

We created a Hi Fi clickable prototype that showed all the features and categories based on research. This will help businesses, IT leaders, designers, and developers have a clear picture of how the UI interaction works.

3- Creating a High-Fidelity video prototype to know how the final project looks and testing how the UI interaction works

All the static design should be transformed into a dynamic one. Having a Hi-Fi video prototype provides information on how users interact with an animated/dynamic design. This thoughtful and detailed design will present a clear view of how the information visualization platform works from a user-centered perspective.

4- Preparing and planning the development stage: presenting code snippets and showing samples to boost processes

The kind of digital information platform presented here requires a particular way of translating the design into a material reality. This means that we cannot use the regular Zeplin to let developers see the HTML and CSS code. This visualization platform offers a new way to communicate with developers by showing them examples from D3js sections. With that, they can check the animation math algorithm layouts according to the approved design and improve any processes involved.

Conclusions

Converting static infographics to incorporate digital and dynamic content requires a particular mindset, a deep understanding of primary users as well as principles of animation and interaction. I have shown here the steps needed to design a visual narrative that is meaningful and useful to designers and developers. Qualitative research is a crucial step in order to understand the stakeholders’ context and needs. The results provide information on how to conceptualize and sketch the first designs, which enable prototypes to be tested. Finally, all the collected information can be used in the software development process in a more accurate and meaningful way.

This research should provide insights on how to design and develop an information visualization platform. Unlike web based platforms, information design should integrate a deep understanding of users and development tools to guarantee a comprehensive, yet visually engaging platform that facilitates projects all around.