Project Introduction
Overview
We designed an AI-powered canvas that helps network engineers generate artifacts like charts, graphs, and tables through a chat interface. Beyond artifact creation, we implemented interactions that allow users to talk to widgets, troubleshoot networking issues, monitor events in real time, and act on AI-driven recommendations via integrated notifications (Slack and Email).
Challenge
When we started, we noticed that network troubleshooting was fragmented. Engineers were juggling multiple tools, manually correlating data, and losing time during outages. Our goal was to create a single, intuitive interface that combined conversational AI, real-time monitoring, and actionable insights.
My Role
User Research and Personas
Conducted detailed user research to identify needs and created personas to guide design choices effectively.
Conducted detailed user research to identify needs and created personas to guide design choices effectively.
Information Architecture
Developed a comprehensive information architecture to organize content and improve navigation flow.
User Flows and Wireframes
Designed user flows and wireframes to map key interactions and visualize layout and functionality.
High-Fidelity Mockups
Delivered polished high-fidelity mockups aligned with brand guidelines to ensure intuitive user experience.
Research & Personas
User Research Methods
We kicked off with user interviews and surveys targeting network engineers and IT managers to understand their pain points and workflows. We also analyzed competitors like Datadog and Splunk to identify gaps.
Key insight: Users wanted speed, simplicity, and trust in AI recommendations.
Key insight: Users wanted speed, simplicity, and trust in AI recommendations.
Primary Personas
Four personas are defined: Networks Ops, Security Ops, Network Architect, Accountt Manager representing user types.
Information Architecture
We mapped out the core flows:
- Conversational artifact generation.
- Widget interaction for deeper analysis.
- Event monitoring dashboard.
- Notification settings for Slack and Email.
High-Fidelity Mockups
High-Fidelity Mockups
Mockups incorporated branding with colour, typography, and icons defined by a fully developed high-scale Design System to ensure clarity, accessibility, and scalability.
Mockups incorporated branding with colour, typography, and icons defined by a fully developed high-scale Design System to ensure clarity, accessibility, and scalability.
Using our design system, we built polished screens:
- A chat-driven UI for artifact creation.
- Interactive widgets with drill-down capabilities.
- Real-time event streams paired with AI recommendations.
- Notification configuration panels.
Handoff
We prepared detailed specs in Figma, including design tokens and interaction flows, to ensure smooth collaboration with engineers.
Key Features We Delivered
- Conversational artifact generation.
- Interactive widgets for troubleshooting.
- Real-time event monitoring.
- AI recommendations with actionable steps.
- Integrated notifications (Slack, Email).
Post-Design User Testing
After launching the live environment, we conducted usability testing to validate design decisions and uncover improvement opportunities. Feedback was synthesized into actionable recommendations and organized using a Kanban workflow for clarity and prioritization. The board included columns for:
Recommended Changes: Initial suggestions from testing.
Prioritized for Action: High-impact items requiring immediate attention.
In Progress: Changes actively being implemented.
On Hold: Items deferred for future iterations.
Done: Completed fixes.
Blockers: Items that could not proceed due to dependencies (none identified in this round).
This structured approach ensured transparency, efficient collaboration, and continuous improvement of the user experience.
Outcomes and Reflections
Impact
Troubleshooting time dropped by 35%.
Operational efficiency improved, reducing outages.
Adoption grew by 40% among network teams.
Business outcome: Contributed to a 15% increase in upsell opportunities for advanced AI features.
What We Learned
Conversational interfaces reduce complexity and boost engagement.
Integration with existing tools drives adoption.
Explainable AI builds trust and confidence.