Asset Overview redesign @TOPdesk
An ITSM tool’s complete redesign to help users setting up their views to work in parallel.
Project Overview.
Problem statement
Customers find the overview difficult to set up and use, especially those less skilled in Excel, leading to frustration and a poor first impression. Key issues include the complexity of creating overviews, missing features like multi select filters, sorting, and the inability to save shared column settings.
Role: Product designer
ITSM WebApp - B2B
Duration: 2+ years (ongoing)
Tools: Figma, Miro/FigJam, Condens, Elastics, Useberry, Typeform
Solution
The new layout separates filters, column settings, and saved overviews, making it easier for users to focus and reduce complexity. It also allows filtering by multiple values, excluding specific data, and saving column settings, which helps create more effective overviews and reports.
High-level problems with unreliable data, collaboration
🧠 Insights and data from exploratory research was 5 years old and the researcher wasn’t in the company anymore. This made it difficult to understand the research outcomes and how valid they were.
💡 My strategy was to do (un)moderated user tests for every bigger patterns, e.g. multi select filter, asset relations filter, column settings, and do at least one iteration round before releasing. Metrics and feedback loop were put in place and I checked every month with my PO what can we enhance from the released features.
🧠 At start, we only had a forming Design System team providing the atomic components and a data table to work with. I had to collaborate with the design system to create patterns for filtering and overview layout. Now, TOPdesk adheres to WCAG 2.2, so new patterns has to be checked by our accessibility experts.
💡 Together with the Design System, UX Guild and Accessibility Guild, we created a written process for unofficial patterns, because every designer had to go through the same struggles to collaborate with two other parties and their team. This process helped to be consistent and make decision faster. I also introduced an agile design process with the help of an Agile Coach and my Scrum Master to be able to follow and measure the design process and making sure that steps are not excluded. Now, if I have a struggle, I call out for an andon event (kanban) and the whole team gathers together and we come up with solutions right away that I can test.
🧠 Continuous delivery of new features by keeping all the functionalities up and running.
💡 Together with the team, we introduced a switch that allows to perform on the old overview while trying out the new features by turning the switch on. At first, customers believed that what they see on the new overview is final. So, we also introduced the label ‘Beta’ next to the switch and now every customers refer to the Beta version when they give feedback and they are aware that new features are coming until we reach feature parity.
Impact.
Objectives
Increase Asset Management adoption by making the product more efficient.
Modernize Core Product in Asset Management
Key results
Reduction of 50% in the average time users spend on filtering tasks by leveraging multi-selection and new filter options by applying filters.
25% increase in migration from old to new Asset Management module.
15% decrease of legacy FE code.
Credits.
Strength is within a team, not in individuals.
Cell researcher
Development team, Product owner
Scrum master, Agile coach
The Design Process looks linear but it’s a never ending circle.
As a team designer, I have an overarching role in the current project but in parallel, I’m also preparing the next project’s conceptual phase. This means that I’m very versatile, I can concentrate on multiple projects at the same time, as well as giving support to the development team.
I mapped out how this project cycle reflects in the research and design process, also identifying ‘definition of ready’ and ‘definition of done’ for each phase so it is clear for everybody what info is needed to start or finish a phase.
Impact of agile in design
Predictability has increased 30%. Based on 14 days cycle time for user stories, technical tasks and design tasks, project time can be predicted after kick-off with 85% accuracy.
Agile fluency is key in team collaboration. I incorporated design processes into scrum then to kanban to be more fluid in delivering features. With my team, we tried out different collaboration setups and below you can find what worked for me and my 10+ developers team. Depending on the project, we work together after the research phase, meaning we do Design Thinking workshops, quick ideation sessions, and even designing features during implementation.
The design.
Continuous product delivery and design iteration
Starting point…
First phase — Delivering datatable with a compact view switch that helps between scanning data or analyse it closely.
Metrics shows that the compact view switch is used heavily depending on what users are looking for.
E.g. Person / person group filter — user needs
to check who has what
to prevent errors — archived person, who left the company, shouldn’t have an asset
to check which asset is not assigned, yet — free to grab
2nd phase — Filters
Pain points
no extensive filtering capabilities for multiple values, exclusion, archived values
no filter for linked external data (assets linked to calls)
Constraints
No Design System patterns, yet
Accessibility
Legacy code
The solution for person / person group filter
multiselectable values
exclusion
one click solutions with pre-filters
Pre-filter selection helps to filter in a goal-oriented way
⚡️10 times faster to filter than before
Saved & shared overview
Pain points
“I cannot find what I need to work on.”
“I cannot share with groups or individuals just with everyone.”
“Lack of control over who can create, share, edit and read leads to having hundreds of saved filters.”
“It doesn’t save the column settings.”
“It’s hard to see what is being filtered on”
Solution
Share with groups, individual or everyone.
Easy access and control
Filters and columns settings are separated
Overview and datatable actions are separated