Anjella De Los Reyes

The journey of designing the web tracking widget was defined by several challenges, each requiring a thoughtful and strategic solution to deliver an intuitive and effective user experience. Let me first provide the project overview before discussing the challenges.

Project Overview

In our admin interface dashboard, we needed to design and integrate a widget to generate visualizations for tracking web engagement data. This functionality would empower users to monitor visitor behavior on their websites, enabling insights into intent, process bottlenecks, and visitor patterns. These insights could then be used to improve user experience, personalize support, and optimize sales conversions. The primary goal was to create a seamless experience for users to configure and generate web engagement data visualizations. This required identifying relevant metrics and making the process intuitive and straightforward while ensuring the widget aligned with the overall dashboard design.

Role

As the UX Designer, I was responsible for understanding the project requirements, identifying the key metrics, designing the user flow, and creating high-fidelity prototypes for the widget. My role also included facilitating collaboration between stakeholders and ensuring the design was feasible for implementation.

Research

My research centered on understanding the existing dashboard’s structure, user workflows, and available APIs. I analyzed similar data visualization tools and engaged in discussions with the product owner and director to identify pain points and potential opportunities for improvement. These insights guided the ideation process and ensured alignment with user expectations.

What Challenges Did I Overcome to Deliver an Effective Web-Tracking Widget?

The journey of designing the data-tracking widget was defined by several challenges, each requiring a thoughtful and strategic solution to deliver an intuitive and effective user experience.

Lack of Clarity in Initial Requirements
Challenge: The stakeholders provided a broad context without specifying the metrics or data points needed for the widget. This made it difficult to design an experience that could meet the goals effectively.
Solution: I initiated follow-up sessions with the stakeholders, asking targeted questions to clarify their needs and proposing potential metrics that could be tracked based on the system’s existing API. This proactive approach guided the discussion and allowed us to collaboratively define the final metrics, ensuring the widget’s functionality was meaningful and actionable.

Integrating the Widget Into the Existing Dashboard
Challenge: The existing dashboard already supported visualization widgets, and I needed to design a new widget that extended this functionality without disrupting the user experience.
Solution: I  did the user experience of the dashboard so i have an understanding how it works. I analyzed  the current dashboard architecture and designed the widget to complement the existing flow. By focusing on simplicity and ensuring the configuration process was intuitive, I created a seamless integration that allowed users to configure metrics, properties, and attributes without requiring a steep learning curve.

Aligning Stakeholder Perspectives Through Collaboration
Challenge: The team may had varying perspectives, which could lead to misalignment in the design process.
Solution: I developed high-fidelity prototypes and interactive demos to clearly communicate the proposed user flow. By presenting a tangible representation of the design, I facilitated productive discussions, gathered actionable feedback, and ensured all stakeholders had a shared understanding of the project direction.

Ensuring Seamless Implementation and Consistency
Challenge: The design needed to be implemented accurately and consistently, which required precise documentation and communication with the development team.
Solution: I created a detailed style guide that outlined the widget’s layout, interactions, configurations, and properties. This comprehensive guide served as a reference for developers, ensuring that the implementation was consistent with the intended design and reducing potential ambiguities during development.

By addressing these challenges with proactive communication, user-centered design principles, and collaborative problem-solving, I was able to deliver a data-tracking widget that enhanced the dashboard’s capabilities and met both user and business needs.

Let’s go to the design process

With the metrics and goals finalized, I sketched initial ideas on how users would interact with the widget. The focus was on simplifying complex configurations and making the process as user-friendly as possible. I collaborated closely with the product owner to ensure that the design addressed both business and user needs.

Since the dashboard already had a design system in place, I directly moved to high-fidelity mockups. I carefully planned the user flow, ensuring that users could easily configure the widget properties, select metrics, and generate visualizations. The prototypes I created were interactive, demonstrating how users could navigate and interact with the widget to achieve their goals.

During review sessions with stakeholders, I presented these prototypes to explain the flow visually, rather than relying on static mockups. This approach helped stakeholders grasp the functionality quickly and provided valuable feedback, which I incorporated into the design.

Outcome
The final design was well-received by the product owner and aligned perfectly with the existing dashboard’s design language.