Kristina Arnold ─ UX / Product Designer

Astrato is a powerful data visualization tool used by data analysts, business intelligence professionals, and decision-makers to create and explore data visualizations.

The tool offers a wide range of features for editing charts, filters and other objects, but users had reported difficulties in finding and using them effectively.

The existing information architecture of the properties panel was complex and lacked intuitive navigation, causing frustration and reduced productivity.

My goal was to redesign the information architecture to improve navigation, increase usability and user satisfaction, and enhance overall user experience with a more straightforward, organised and intuitive structure. The goal was to enhance discoverability and improve the ability for users to find features quickly and efficiently by having clearer hierarchies of primary and secondary features. Simultaneously, the developer team was planning a technical rebuild of the components due to missing scalability of the current code base.

Problem

Early on in the design phase, I conducted a card sorting workshop with different stakeholders to organize the hierarchy of features in the first iteration of the properties panel. The properties panel started with simple tabs organized logically around a typical workflow that I identified from user research: Two main tabs for object styling and for workbook styling and in a next level the object tabs:

Data: to add and format data, Chart filter to add filters for dimension, measure and results and add, customize timetravel Style to add colours, style fonts, borders and legend Axis: to add, style X/Y axis

Usertesting the panel in the initial stages of the product showed that the tab system generally felt intuitive. However, the amount of objects and features added to the product increased its complexity massively, resulting in a complex web of categories, subcategories, and filters.

I framed the design problem accordingly: how might we enhance discoverability of advanced features while reducing complexity?

Research

I first began conducting interviews with my network of BI developers to understand their pain points and found: Inconsistency: Labels and categorizations were inconsistent, causing confusion among users. Lack of Clarity: Users struggled to locate specific features and settings, especially those related to advanced options. Users expected certain features e.g. the legend to be under the Axis tab instead of the style tab.

Most users prefer to keep all sections collapsed by default. Be able to select multiple fields at once Be able to auto-collapse all tables in the data dropdown

I went on to analyze competitors in the data visualization tool space to identify best practices in information architecture.

Key takeaways included: Competitors with clear, simple navigation structures were favored by users. Effective use of categorization and labeling helped users quickly locate features. Contextual tooltips and guided tours improved onboarding.

IA map

I then went on to map out the existing and future information architecture starting with the line chart and the table, the two most complex objects in terms of features in the panel. With the architecture map, I defined consistent interaction patterns for e.g. how selections are made e.g. checkboxes versus dropdowns: for one or two available options I defined to use checkboxes (radio buttons for mutually exclusive options) and a dropdown when there are more than three options to choose from.

Also, some features or components include several sub-options for example chart filters, colour rules or variables. Here, the user adds for example a filter and needs to define more options. I differentiated between simple and complex elements and defined rules for nested and pop-up menu elements: nested ones are primary features that the users needs to view at all times, such as measures, dimensions, chart filters.

More secondary features like color rules, coloring axis band or variable mappings are added by using a pop up menu.

Design Process

I created new components and wireframes for filter components in an iterative design process and testing phases to refine the user experience. We also developed high-fidelity prototypes using interactive mockup tools to simulate the user journey, using filtering as a main use case. This re-design and rule ensures to keep the properties panel design light and a clear hierarchy between primary and secondary features.

After synthesizing internal and user feedback, I re-designed and simplified components and created a consistent and improved master file for all components of the properties panel. This included Certain components were re-designed more drastically such as the filtering elements. I also detailed out more consistent behaviour rules, such as:

the properties panel should be open by default include more consistent empty states for text inputs add components by using “add”, fixed to the bottom of the list

Implementation

I constantly involved the responsible developer to plan the implementation phase of the project and ensure that the new information architecture was implemented according to the design specifications.

However, as the company prioritized other feature developments and is undergoing some re-structuring, the new design is implemented partially in smaller sprint junks.

Once the new components and Information Architecture is implemented entirely, I plan to conduct usertesting and develop metrics, such as user engagement, task completion rates, and user retention to identify any problems and understand if users are spending more time creating visualizations and less time searching for features.

Next steps

Initial user feedback indicated that the general Information Architecture of the tab structure is scalable and intuitive, so no re-design was made on that level.

As the final Information Architecture related changes could not yet been implemented, I cannot yet draw any conclusions on improved usability of new components, rules and behaviours.

Thus far, the IA's aims to carefully align with user preferences and work flows but implementation needs to be completed. Continuous monitoring and user feedback loops should then inform iterative improvements to the IA to maintain its effectiveness and user appeal.

The project however demonstrates the importance of user-centered design in creating user-friendly data visualization tools.