TLDR; or the project in a nutshell
Diagram Keys is a core feature in Lucid Software's diagramming platform that allows users to create visual keys to categorize and explain diagram elements. Research revealed that 73% of users create diagram keys, with the primary motivation being:
"I want to be able to send a diagram to someone and not need to provide additional context, the diagram key does that."
I led interaction design and research (co-leading with the Product Manager), conceptualized how the feature would work within the Lucid ecosystem and interface with existing features, and designed solutions that scaled from initial concept to serving an average of 200,000+ weekly events.
21+
User Interviews
200K+
Weekly Events
17K+
Active Users
Project Overview: Making Complex Diagrams Understandable
Diagram Keys addresses a critical user need: making complex diagrams more understandable and accessible to diverse audiences. The feature allows users to create visual keys that categorize and explain diagram elements, improving clarity and professional presentation.
The challenge was to design a feature that would scale from initial concept to serving hundreds of thousands of users, while addressing key pain points around terminology confusion, manual creation friction, and feature discoverability. Before the Diagram Key shape existed, users were already creating keys manually by manipulating boxes and layering text fields and icons on top — a process with large margins for error and frustration. Our goal was to transform this manual, error-prone process into an intuitive, automated feature.
Initially, I approached this as a simple shape feature. However, as I designed the canvas interactions and interface patterns, I realized these foundational interactions would pave the way for future features in the Lucid ecosystem. This strategic insight proved accurate — the canvas interaction patterns and technology we built for Diagram Keys became the foundation for subsequent features including Shape Banks, T-shirt Sizing, Estimates, Custom Shape Banks, and Sticky Note Banks, all of which use similar interactions and technical infrastructure.
My responsibilities included:
- → Leading interaction design and conceptualizing how the feature works within the Lucid ecosystem
- → Co-leading research with Product Manager, conducting 21+ user interviews focused on Diagram Keys
- → Designing all interaction patterns and interfaces, working closely with Product Manager and Engineering Lead
- → Analyzing feature performance analytics from 2021–2025 (project work completed in 2021)
Research Methodology: A Comprehensive 4-Year Program
I co-led a comprehensive research program with the Product Manager during the 9-month project period in 2021, involving multiple methodologies and stakeholder groups. I consulted with a UX researcher on research methods and ensuring interview scripts were not leading, then planned and executed the research with my PM. The research combined qualitative insights from user interviews with quantitative data from usage analytics. We took an MVP approach, using interaction design principles, data, and user research to drive development from first principles. The research process included internal stakeholder synthesis, SQRL initial testing, trusted user group (TUG) feedback, internal alpha testing, and external beta launches. While the active design and development work occurred in 2021, we tracked feature performance analytics through 2025 to measure long-term impact.
User Interviews
21+
User interviews specifically focused on Diagram Keys feature
Analytics Analysis
4 Years
Feature performance tracking from 2021–2025, analyzing an average of 200K+ events per week
Research Themes
8+
Key research areas: Auto-keys, Nomenclature, Onboarding, Templates, Highlight modes
Key Research Questions
- → How do users currently create and manage diagram keys? (Research found users manually manipulating boxes and layering text/icons)
- → What terminology do users prefer: "Key" or "Diagram Key"?
- → Can we automate key generation to reduce manual work?
- → How can we improve feature discoverability? (Initial beta showed users couldn't find keys despite being in Standard Library)
- → What integration points are most valuable (templates, conditional formatting, org charts)?
- → How do different user segments (internal vs. external, enterprise vs. individual) use the feature?
- → What attributes do users prioritize when creating keys? (Research found: Color was the clear winner, then shapes, then line styles)
Key Findings: Data-Driven Insights
1. Adoption & Usage Patterns
Peak Usage (2023): 208,324 events per week with 16,809 distinct users
Average Usage (2021–2025): ~200,000 events per week with ~17,000 active users on average
Insight: The feature achieved consistent high usage, with peak performance in 2023. Average engagement remained strong throughout the tracking period.
2. Terminology Confusion
Users consistently used both "Key" and "Diagram Key" interchangeably. This created confusion in:
- → Search functionality
- → Documentation and help content
- → User onboarding and education
- → Feature discovery
Solution: Support both "Key" and "Diagram Key" terminology throughout the product and ensure search works for both. As one user noted: "We have names for things, but not everybody knows it" — highlighting the importance of flexible terminology.
3. Auto-Generation Demand
Users expressed strong interest in automated key generation. Manual creation was identified as a major friction point, especially for:
- → Complex diagrams with many shape types
- → Frequent diagram creators
- → Enterprise users managing multiple diagrams
Impact: Led to development of "Auto Gen Keys" feature and co-invention of patent WO2023200536A1. Users specifically requested: "Multi-dimensional with ability to choose single dimensions would be the best", which informed the auto-generation algorithm design.
4. Integration Opportunities
Users wanted better integration with:
- → Templates: Pre-populated keys in diagram templates
- → Conditional Formatting: Dynamic keys based on formatting rules
- → Org Charts: Automatic keys for organizational structures. Users emphasized: "If it doesn't work with org charts, trash it" — making this integration critical
- → Data-powered Shapes: Keys that update with data changes
- → Presentation Mode: Users asked: "Will the selection work in presentation mode?" — highlighting the need for presentation-ready keys
User Feedback: Direct Insights from Interviews
Throughout the research process, I collected detailed feedback from users that directly informed design decisions. Here are key insights from user interviews:
UI/UX Preferences
- 💬 "It should automatically appear in a corner with a tooltip that lets you know you can move it"
- 💬 "Prefers the idea of putting it in the shape library (it conveys it's just a shape, can be moved)"
- 💬 "The settings icon didn't make sense at first (what it will let me do)"
- 💬 "Maybe not put a shadow on it (it looks like a Modal I can't change)"
Feature Requests & Preferences
- 💬 "Loved dynamic keys, but users should be able to turn it off"
- 💬 "Liked the drag and drop as a future added benefit"
- 💬 "Loved selection through key"
- 💬 "Likes the ability to hide/unhide things right from the key"
- 💬 "Want to change the key font, change font size"
Critical Concerns
- ⚠ "I am worried, things would get buried with this kinda menu"
- ⚠ "If it doesn't work with org charts, trash it"
- ⚠ "How would drag and drop even work with generators?"
- ⚠ "Presentation mode, will the selection work in presentation mode?"
Design Insights
- 💡 "Multi-dimensional with ability to choose single dimensions would be the best"
- 💡 "For large no of items, she preferred 'show more'"
- 💡 "She thinks highlight is more useful than select"
- 💡 "Wants ability to have different keys for different layers"
Design Solutions: Addressing User Needs
Based on research findings, I designed all interaction patterns and interfaces, working closely with the Product Manager and Engineering Lead to bring these solutions to life:
1. Auto-Generation Feature
I designed an intelligent auto-generation system that analyzes diagram elements and automatically creates appropriate keys. This addressed the manual creation friction point identified in research. The interaction design focused on making the auto-generation feel seamless within the existing Lucid canvas workflow.
Key Design Decisions:
- → One-click generation with preview before applying
- → Smart categorization based on shape types, colors, and styles
- → Editable auto-generated keys (users can refine)
- → Contextual suggestions based on diagram type
- → User control: "Loved dynamic keys, but users should be able to turn it off" — ensuring flexibility
2. Improved Onboarding & Education
Addressed low feature discovery through multiple touchpoints. Initial beta testing revealed that users couldn't find keys, although they were loaded on every diagram in the "Standard Library." To improve discoverability, we added keys in:
- → Feature Find (the search for shapes)
- → Insert menu
- → Shapes in Use (SiU)
- → Contextual tooltips when users create complex diagrams
- → Template library with pre-configured keys
- → Help documentation supporting both "Key" and "Diagram Key" terminology
3. Template Integration
Designed seamless integration with diagram templates. Research synthesis identified template keys as a high-priority feature:
- → Templates include pre-configured keys relevant to diagram type
- → Users can customize template keys while maintaining structure
- → Template keys update dynamically with conditional formatting rules
- → Support for creating conditional formatting rules directly from keys
4. Dynamic Behavior & Intelligent Features
Based on research synthesis and user feedback, we designed intelligent key behavior that automatically updates based on diagram state:
- → Auto-updating colors: Colors changed on the canvas automatically update in the key (1:1 relationship)
- → Shape manipulation sync: Keys reflect changes when shapes are manipulated on the canvas
- → Bulk editing: Users can edit multiple key items simultaneously
- → Key shape pinned to view: Keys can be pinned to maintain visibility while scrolling
- → Presentation experience: Keys work seamlessly in presentation mode
Interactions & Capabilities
The following demonstrations showcase key interactions and capabilities of the Diagram Keys feature, highlighting the intuitive interface design and seamless integration with the Lucid canvas:
Interface Overview & Introduction
Diagram Keys are accessible through the shapes library, positioned alongside standard shapes and flowchart elements. Users can drag and drop the key shape onto the canvas, treating it like any other diagram element. The interface maintains consistency with existing Lucid design patterns, making the feature immediately familiar to users.
Key Item Management & Customization
Users can add, edit, and remove key items within a single diagram key. Each item features a colored circle indicator (blue, purple, orange, etc.) that corresponds to diagram elements. The interface supports custom labels, allowing users to create meaningful explanations for their diagram elements.
Scaling & Dynamic Updates
Diagram keys support flexible scaling and resizing, adapting to different diagram sizes and layouts. When diagram elements change (colors, shapes, styles), the key automatically updates to maintain a 1:1 relationship between canvas elements and key items, reducing manual maintenance and ensuring accuracy.
Drag & Drop Canvas Interactions
Diagram keys behave like native canvas shapes, supporting all standard Lucid interactions including drag, resize, and positioning. Users can move keys to optimal locations on the canvas, and the key maintains its functionality regardless of position.
Impact & Results
200K+
Average weekly events, demonstrating strong and consistent feature adoption
17K+
Average weekly active users, showing broad and consistent feature utilization
21+
User interviews focused on Diagram Keys, ensuring data-driven design decisions
Additional Achievements
- → Patent Filed: Co-invented and filed patent WO2023200536A1 — "Legend of graphical objects" for innovative auto-generation and dynamic key technology
- → Enterprise Adoption: Feature became critical for enterprise customers creating professional diagrams
- → Template Library: Created comprehensive template system with pre-configured keys
- → Documentation: Produced extensive documentation including journey maps, research synthesis, and design specifications
Conclusion
The Diagram Keys feature represents a comprehensive UX research and design effort that successfully addressed user needs while achieving significant business impact. Through 21+ user interviews I co-led with the Product Manager during the 9-month project period in 2021, and tracking feature performance analytics through 2025, we created a feature that serves an average of 200,000+ weekly events and 17,000+ active users.
Key to this success was a data-driven approach that combined qualitative research (user interviews) with quantitative analysis (usage analytics) to identify pain points, validate solutions, and measure impact. I focused on interaction design and ecosystem thinking — ensuring the feature not only solved the immediate problem but also established patterns that would benefit future features. The canvas interaction patterns we designed became foundational infrastructure for multiple subsequent features, demonstrating the strategic value of thoughtful interaction design.
The feature's success demonstrates the value of user-centered design practice, data-driven decision making, and strategic thinking about how individual features contribute to a cohesive product ecosystem. The patent filed for this work (WO2023200536A1) reflects the innovative nature of the auto-generation and dynamic key technology we developed.