Kristina Arnold ─ UX / Product Designer

Astrato is a no-code SaaS solution that leverages the flexibility and performance of the Data Cloud and enables both experts and business users to intuitively create data visualisations.

I have been lead designer for the filtering experience.

Filtering data is a key features in Astrato as it enables users to understand and narrow down available data and ask additional questions without having to create new charts.

As Astrato is a no/low-code solution I aimed for designing a modern, intuitive way to filter data and create custom filters on charts that fulfil both technical expectations of experts working with advanced data visualization tools and is intuitive for business users.

Responsibilities

I was responsible for the end-to-end product design cycle including initial research and problem framing, understanding user needs and pains plus gathering users and stakeholder expectations. I closely worked with the product manager to understand technical limitations and business requirements.

I regularly aligned with other stakeholders, such as other product managers, the CEO, developers and fellow designers to get feedback during conceptualization and ideation phases.

Not a technical user myself, I was involving internal data visualization experts that I identified as one of our target personas to gather their feedback and make the right user-based design choices.

I was responsible for ensuring pixel perfect implementation of designs and for documentation in the design system.

Persona

The main persona I designed for is "Joe, the Expert”: someone that creates chart filters and prepares the workbook for business users (see image). In order to understand what he needs, I interviewed our internal user base for understanding their expectations.

During regular stakeholder meetings with the CEO, all product managers, documentation staff und product design team, I presented user research and consolidated insights from those interviews.

Design Process

The process started with understanding technical limitations and criteria by bringing together the product managers across tribes as well as conducting user interviews to understand their filtering needs and pains with current tools. As filter objects are customizable for users, I had to identify which edit options should be exposed to users.

I also tested and researched existing competitor tools and looked into comparables from other fields such as e-commerce.

This inspired three main concepts that I shared with users and stakeholders as prototypes. Business ultimately decided for the concept offering greatest familiarity with a competitor tool.

I closely collaborated with developers on implementing the final design which I then tested in five moderated usertests. I created final components for our design system and documented behaviours and design patterns in our design system.

Design Research

I interviewed internal data visualization experts to understand their pains with current filtering in similar tools as well as to gather their expectations and technical needs. I mapped out those insights into a affinity diagram and synthesized findings to stakeholders. It became clear the expert users need a lot of control over filters to tell their data story to their users. They also want to decided whether or not to display filter feedback to their audience.

Viewers of such workbooks, who are the “business users”, focus more on quickly adding and removing filters, so the experience needs to be simple and intuitive to add, remove and view included and excluded filters. Hence, I reframed the problem statement to “how might be enable BI developers to set chart filters easily and control filters for their audience?” and “how might we help workbook viewers to understand the data story and navigate the presented workbook by filtering data?”.

Next, I researched competitor and comparable tools as users will be familiar with how those tools offer filtering to users. Inspiration for filtering in the retail sector, fashion as well as online booking websites informed my design concepts.

Problem Framing

My design research allowed me to frame the scope of the design better. The design of the creator experience needs to: surface easily that and which filters are applied, allow users to drill down into filter values, add and remove values easily (invert and revert selections), allow users to clear all filters at once.

As filtering with live data requires additional steps, such as sending out queries, I also had to consider including an apply and cancel action for filters. Saving filters was decided to move to a silver iteration as technical constraints did not allow to easily develop this.

User research also showed that experts want to customize filter objects on a sheet to allow their viewers of the workbook to filter in a defined way. I had to therefore design customizable filter components and consider how these filter object align and behave together.

Another constraint for my design process was that a familiar interaction pattern is to brush over charts which highlights same values on all charts. How could we use this highlighting patterns and connect it to filtering?

Read More

Concepts I

I created three main concepts for the global experience: a feedback bar with filter chips, a collapsible filter pane and a floating button with a pane. To decide on which concept to pursue in the next iteration, I conducted quick usertests with internal personas and presented them to all product managers and the CEO. BI developers preferred the more subtle button and pane concept with least visual clutter, allowing business users to first focus on the data and explore filters later.

The initial feedback from other stakeholders confirmed that preference for the right panel version as it felt scalable and allowed users can centralize all filters. However, to account for user familiarity for users from a competitor tool called Qlik, the business decided to first focus on a horizontal filter pane and include the collapsible side pane as well as a floating button as options for future iterations. In both concepts I have been introducing filter chips as a simple and modern way to add, refine, cancel and view applied filters.

Concepts II

The insights gathered from users showed that it is important to have a compact default design as screen real estate is limited in this context. Users want to stack several individual filters vertically or horizontally or group them, for example as calendar, slider or dropdowns.

Hence, I designed the filter objects to similarly compact and simple yet similar to the global filter dropdowns. In collaboration with the PM I defined styling properties and features to be exposed in the properties panel for those filter objects and decided on their hierarchy based on learnings from user research. In my work I also used quick surveys with internal personas to gather insights. Collaborating with developers on the implementation of the designs brought some additional feedback, for example on including multi-select by keyboard.

Usertesting

I tested with five expert users in moderated (remote and in person) user tests to understand if filtering is intuitive and flag problems that users might encounter. I created a script with tasks to determine task completion rates. The tests showed 100% completion rate of tasks but also clear patterns: users wish to have filter feedback on each chart to improve understanding of what is being in or excluded, they need to be able to read long value names in filter dropdowns and want more control over available dimensions in the filter bar.

I used affinity diagramming to cluster insights into high priority, quick fixes and long term opportunities that I presented to the stakeholder team. Together with the product manager, I prioritized those results and processed quick fixes such as adding tooltips for long field names. One of the strong patterns were that users want to see feedback in the charts on which filters were applied in the properties panel by the creator of the chart. To solve that problem, I developed a design concept for a floating filter pane that can be opened via a filter icon that is added when a filter is applied. Due to limited developer capacity and as business prioritized other features, this has been moved to a backlog and only shared to stakeholders.

View stakeholder presentation

Reflections

In general, usertesting showed that expert users find the filtering experience I designed intuitive and familiar. Task completion rates were high (95%). Due to business limitations though, only the feedback bar has been developed and the filter button with the pane had to be saved for a silver iteration.

As the horizontal pane can be disturbing in the workbook design, the option was added to remove it and keep a floating button for applying and removing filters. Improving the filtering experience is an ongoing endevaour. I collect user feedback on an ongoing basis from users commenting on Astrato´s community platform. I log this feedback in our research documentation tool Glean.ly which allows to detect new patterns.

As Astrato matures and finances are being secured, more effort should be made towards integrating user feedback such as displaying in-chart filter feedback into next iterations. Ideally, two or more filtering experiences can be offered to users in order to customize the workbook creation experience. If more resources can be allocated, the formerly preferred option of a floating filter button with collapsible pane should be developed and tested.

View filtering experience in Astrato