Ticket Intelligence Widget Admin Config

Ticket Intelligence widget lacks configuration capabilities within the Admin UI, necessitating manual intervention from the engineering team for any changes. This process is both time-consuming and expensive, hindering agility and responsiveness to customer needs.

There is a need for a configuration solution that enables administrator to make adjustments independently, reducing the dependency on engineering resources.

Ticket classification fields configuration to make them visible.

Team.

A cross-functional collaboration among the Design (2 Designers), Product Manager, and Engineering (Data and UI engineers) teams .

Role.

As a Lead Product Designer, I worked closely with a Product Manager to define the problem and requirements, facilitated design review sessions with the stakeholders, worked with data and UI engineers on understanding the constraints.

/result

Fully configurable controls that let customers make any changes independently.

Final design

/discovery

Understanding Configuration Dynamics.
As a designer behind the Ticket Intelligence widget for Ticketing Systems, I was familiar with how different models provided predictions, however I needed more clarity on how configurations changes were being handled. For that, I connected with our UI and Backend team.
Right now, if a customer wants to make any change to the widget, including any small adjustments, they have to wait two to three weeks. Every adjustment requires a back-end engineer, pulling them away from their other projects.

Listening to users.

I met with Customer Success Managers who worked on implementing widget changes requested by customers, listened to their feedback on the experience and what our customers were saying.
Based on the insights, I solidified the user persona with their main pain points and goals.
A screenshot of sticky notes with user's pain points and goals.
Widget structure.
During a working session, I clarified the most common changes made to the widget and assessed how much flexibility our product offers for these modifications.
The requirements were based on the technical constraints and the most commonly asked changes:
  • Introduce fully configurable controls to let customers make changes independently (i.e. edit/remove description) 
  • The system should automatically check for any config errors (e.g., the user adds a section but forgets to add resolution fields)
  • The visualization (preview) next to the configuration panel reflects changes instantly
  • Updates to the widget externally are made when a user hits “save”
A screenshot of a widget with each component identified and highlighted.

/ideation

Concept explorations.

To visualize how the elements would connect with each other within the UI, I focused on establishing a clear information hierarchy and prioritizing visiblity settings for the widget components.
Version 1
Low-fidelity sketch
A low-fidelity mockup showing each model nested within a category. A user clicks on a category to open a pop-up window to edit the models.
As an alternative, I explored an option that omitted sections and added a preview feature and collaborated with a Product Manager, Engineers, and Customer Success manager, to gather their feedback.
The preview feature received positive feedback so I kept that. However removing sections and categories proved to be confusing, as it eliminated the ability to custom group models.
Version 2
Low-fidelity sketch
Version two of a low-fidelity mockup iteration with a preview and sections were removed.
Based on early feedback, I revised the designs and reintroduced section and categories, as it became clear that  users would like feel confused and frustrated without the ability to group models and rename sections.
To address this, I explored a new approach using tabular navigation. This solution added an extra layer of information hierarchy while avoiding the complexity of a pop-up window, offering as more seamless and user-friendly experience.
Version 3
Low-fidelity sketch
Version three of a low-fidelity mockup which shows a tabular view with nested categories.

Outcome.

While the design received full approval from the Product Manager for its usability, scalability, and alignment with user needs, the company's strategic priorities shifted, and the project was put on hold to focus on other high-impact initiatives.
However, the work was not in vain. I gathered a thorough documentation and insights during the process, which remain valuable resources for when the project is revisited or adapted to meet evolving business needs.
Three black sparkles of various sizes.

Please contact me for more details of this project!

volhadouban@gmail.com

/lessons learned

Clear documentation keeps designs valuable and reusable as priorities shift.
In the fast-paced, AI-driven world of startups, priorities can shift rapidly. This makes thorough documentation of designs essential, ensuring they can be revisited and leveraged in the future, whether in their original form or as an iterated version tailored to new needs.
Clarity Through Questions.
Collaborating closely with engineers, I asked numerous questions—sometimes repeating them to ensure I fully grasped the complexities of the system. While it felt intimidating to ask the same question multiple times at first, I pushed past that discomfort, recognizing the importance of achieving complete clarity on the backend setup. This effort was instrumental in designing a solution that was both user-friendly and technically feasible.

Want to see more?

Explore other designs