Tools
Figma, Hotjar, Miro, Userlytics
Timeline
June 2024 - August 2024
Team
2 Designers
Introduction
ASSA ABLOY is a global leader in access solutions, serving millions of users through a wide range of digital products. Across its divisions, data tables were widely used but often inconsistent, cluttered, and hard to use, leading to usability issues and wasted time for both users and design teams.
This project aimed to streamline the data table experience through research and design, bringing clarity, consistency, and efficiency to one of the most widely used components within the organization.
My Role
I led end-to-end UX research and design, conducting discovery, interviewing stakeholders, shaping strategy, prototyping and testing solutions, and documenting the pattern for adoption across the organization.
Process
We followed a user-centered design process, guided by real user needs. After exploring multiple solutions, we tested the most promising ones through usability sessions. Based on our findings, we refined the design and created clear documentation to support adoption across teams.
Problem Areas
For Users: A Frustrating, Inconsistent Experience
Early observations showed that users struggled to interact with data tables across ASSA ABLOY’s digital products. The experience varied greatly between products, often lacking clarity, making it harder for users to get value from the data.
For Designers: Reinventing the Wheel
Designers across divisions were often rebuilding data tables from scratch, each taking a different approach. This resulted in duplicated effort, inconsistent designs, and added complexity, especially for new team members or fast-moving projects.
Project Goal
Constraints
Time
We had to deliver a solution within 3 weeks.
Limited User Access
We didn’t have access to users from all divisions.
Discovery & Research
How Data Tables Are being Used Today?
1
Listening to Designers: Surveys & Interviews
To grasp the scope and diversity of data table usage, we started with a survey aimed at designers and product teams across the organization. We followed up with in-depth interviews across divisions to uncover real-world needs, frustrations, and expectations.
Key Insights
Usage Frequency
67% of designers had worked with data tables in at least five projects over the past three months.
Core Functional Priorities
Search, Quickly find specific entries
Filter, Narrow results by conditions
Sort, Reorder data to surface what's relevant
Design Challenges Identified
Designers faced common issues across projects, including:
Fitting large amounts of data into limited space without overwhelming users
Making tables responsive across device sizes and breakpoints
Communicating hierarchy and urgency, like prioritizing critical rows or columns
Handling complex filtering logic while maintaining clarity
2
Uncovering Pain Points: Interviewing End Users
Finally, we spoke directly with users to uncover how they actually engaged with data tables in day-to-day workflows. This helped us move beyond what teams thought users needed, to what really improved their experience.
These conversations led to a few emerging patterns that guided our direction:
#1
I use data tables every day, but they’re hard to work with.
Users felt overwhelmed by cluttered layouts and inconsistent designs, which slowed down their work and caused frustration.
#2
I need to find specific information quickly, even in a sea of similar-looking data.
Users frequently struggled to locate the data they needed, especially when dealing with repetitive entries or large datasets
#3
I’m not tech-savvy, so clarity and simplicity really matter.
Non-technical users often felt confused by complex filter menus, ambiguous icons, and hidden actions.
#4
I prefer staying on the same page while working, don’t make me lose my place.
Users were frustrated when taking actions that led them away from their current view. Many reported losing context during workflows, especially when navigating to new pages or losing scroll position after edits.
#5
I want to control what I see, not all data is equally important to me.
Users felt distracted by unnecessary information and wished they could focus more easily on what mattered.
#6
When I perform an action, I want to see what changed and where.
Users felt disoriented after editing or deleting items. They struggled to identify which data had changed, and found it frustrating when tables didn’t preserve their place.
#7
Exporting and importing logs are essential, but clunky today.
These tasks were common but painful. Users had to jump through multiple steps to export data.
Identify & synthesize
What Do Users Really Need?
After analyzing responses from surveys and interviews, we uncovered three core purposes that define how users engage with data tables.
Three Key User Tasks
Finding Records
Taking Action
on Records
Viewing and
Comparing Data
For each of these core tasks, we identified specific needs and pain points based on user feedback and observations.
The main needs and common challenges users face when looking for a record
Needs
Quick Access to Relevant Data
Users want to sift through large data sets quickly without feeling overwhelmed.
Effective Data Navigation
Users need intuitive ways to filter and sort without requiring deep technical knowledge.
Clear Visibility
Users need to see which settings are active to stay oriented while interacting with the data.
Pain points
Data Overload
Users struggle to find specific data when tables are cluttered.
Unclear Sorting & Filtering
The behavior of sorting and filtering is not always predictable, creating frustration.
Hidden Filter States
Users often miss which filters are active, leading to confusion about the data they're viewing.
…when taking actions on records
Needs
Efficient Multi-Record Management
Users need an easy way to perform actions on multiple records at once.
Stay in Context
Users want to perform actions without losing their place in the data set.
Clear Feedback on Actions
Users need to know immediately whether their action was successful.
Consistent Action Layout
Users expect to find action buttons and interactions in predictable places across tables.
Pain points
Action Disorientation
Users lose track of progress when the page refreshes or updates after an action.
Uncertainty in Multi-Select Tasks
It’s unclear which rows are affected when selecting multiple records for action.
Lack of Feedback
Users don’t know whether their actions were successfully completed or not.
…when viewing and comparing records
Needs
Quick Data Insights
Users need to digest key information at a glance without being bogged down by complexity.
Clear Data Presentation
Users need well-organized data that is easy to understand and interpret.
Customizable Views
Users need to hide irrelevant columns or adjust table density to reduce visual clutter.
Pain points
Inconsistent Visual Cues
Inconsistent color usage, spacing, or typography makes it hard to scan or prioritize information.
Data Clutter
Users often face tables that are overcrowded or poorly structured.
Disorienting Navigation
Switching between detailed records and the main table can cause users to lose their place or forget their context.
With user needs and pain points in focus, how can we begin shaping a better data table experience?
Ideate
Let’s Ideate and Explore Solutions!
In the ideation phase, we took everything we learned and started turning those insights into smart, practical solutions. We focused on making things feel clearer and easier to use.
To guide our thinking, we also looked at how others handle similar problems, using competitive analysis to spot what works, what doesn’t, and where we could do better.
Execution
Translating Insights into Design Decisions
We began by defining the structural foundation of the data table, a flexible, modular layout that could scale with complex datasets.
From there, we broke the design into focused layers:
View Customization: how users tailor what they see (columns and rows)
Core Functionalities: how users search, filter, sort, and take actions
Before we start with the new designs let's take a look at the old one:
View Customization
1
Columns
To reduce overwhelm and surface relevant information, we introduced customization options that let users hide, freeze, or reorder columns.
Freeze
Impact
By keeping key identifiers like names visible while scrolling, we helped users maintain context as they explored wide tables, reducing disorientation and improving scanability.
Column Visibility & Order
Impact
By allowing users to rearrange and declutter columns, we made it easier to focus on relevant data, which helped streamline their workflow and reduced cognitive overload in complex tables.
2
Row
We designed row-level customization to help users manage how much data they see and how they access it.
Row Density Options
Impact
By offering multiple row density settings, we gave users control over how much information they see at once, supporting both scan-heavy tasks and more focused, detailed reviews.
Expandable Rows
Impact
By allowing rows to expand on demand, we reduced visual noise while still making detailed information accessible, enabling users to navigate dense data tables more comfortably.
Table Functionalities
1
Search
Users can perform keyword searches across all data or within a specific column for more precision. Clear feedback is provided when no results are found.
Impact
By supporting both global and column-specific search, we made it easier for users to quickly locate relevant information
2
Sorting
Users can sort individual columns or apply multi-column sorting through an advanced dropdown interface.
Column Header Sorting
Impact
By enabling sorting directly through column headers, we supported quick, intuitive data manipulation for users who need fast reordering without breaking their workflow.
Advanced Sorting
Allows users to sort by multiple columns, choose sort order for each, and rearrange sorting priorities via a dedicated interface.
Impact
By offering advanced multi-column sorting, we gave users precise control over how data is prioritized, which is especially valuable for detailed comparisons or operational decision-making.
3
Filtering
Basic Filtering
Impact
By making basic filters easy to access and visibly persistent, we helped users refine results quickly without losing track of their filtering logic.
Advanced Filtering
Advanced filtering supports layered, nested logic, allowing users to apply multiple filters across different columns using complex criteria. This is useful for working with large datasets or nuanced conditions.
Impact
By enabling advanced filtering, we empowered users to drill down into highly specific data segments, making the table a powerful tool for targeted analysis and operational precision.
Testing & Iteration
Refining the Details, Expanding the Vision
Once the core structure, view customizations, and functionalities were in place, we moved into usability testing to validate whether the data table met user expectations and aligned with real-world usage.
Validating with Real Teams
We conducted usability sessions with cross-functional teams, including designers and developers across various divisions.
Building on Feedback
Introducing a Visual Guideline
During testing, it became clear that consistent visual behavior (like how disabled states look, how selected filters are highlighted, or where instructional text lives) was just as important as structural consistency.
Turning It Into a System: The Web Pattern Library
We consolidated all designs and visual rules, into a scalable Web Pattern Library. This served as a plug-and-play solution for all product teams.
It included:
Modular Components: Built for flexibility and consistency, supporting core interactions like sorting, filtering, search, view customization, and actions
Visual Guidelines: A style and usage playbook with dos and don’ts, accessibility notes, and edge case handling
Ready-Made Templates & Pages: Pre-designed, customizable layouts for basic and advanced tables.
Impact
This elevated the table from a one-off solution to a reusable system component, empowering teams to build consistently, quickly, and with confidence.
Impact
Impact Across the Organization
2.2 Improvement
Single Ease Question
Users rated tasks as easier to complete, showing better usability.
54% Faster
Time on Task
Users completed tasks significantly faster, indicating improved efficiency.
~1-2 Days
Design time saved
Designers spent less time per project because of easy-to-use templates.
Reflections & Takeaways
What I Took Away!
Start with structure, not screens
Before we even touched a UI component, we had to deeply understand how people used tables, why they used them, and what success looked like. That upfront thinking made the design phase smoother, faster, and more aligned with real needs.
Think in systems, not standalones
This wasn’t a one-off solution. We built a robust web pattern library that could scale across teams and products. It now serves as a foundation for consistent, usable, and efficient design throughout the organization.
People make the process
Working inside a large, global team reminded me that great outcomes aren’t just about great design, they're about clear communication, shared ownership, and respect for each person’s role. The stronger the collaboration, the stronger the solution.