Unifying Line Interactions
Unifying Line Interactions
Lucidchart and Lucidspark each have a distinct job to do. But the way you draw a line shouldn't change depending on which product you're in. I unified the experience across 115K daily users without breaking what already worked and drove a 19% lift in engagement.
UX Designer | Winter 2022–Spring 2023 | Lucid Software
UX Designer
Winter 2022–Spring 2023
Lucid Software
Overview
Overview
Problem
Lucidchart and Lucidspark had different line creation experiences, confusing users and driving them toward inefficient workarounds.
Only 50% of lines in Lucidspark were created using the intended method.
Solution
Unified both products around a 4-node pattern.
Used progressive hover states that used motion to improve discoverability without adding visual noise.
Impact
+19% engagement in Lucidspark, +3% in Lucidchart.
Rolled out to 115K daily users creating 2.5M lines per day.
Problem
Lucidchart and Lucidspark had different line creation experiences, confusing users and driving them toward inefficient workarounds.
Only 50% of lines in Lucidspark were created using the intended method.
Solution
Unified both products around a 4-node pattern.
Used progressive hover states that used motion to improve discoverability without adding visual noise.
Impact
+19% engagement in Lucidspark, +3% in Lucidchart.
Rolled out to 115K daily users creating 2.5M lines per day.
Two products, one confusing inconsistency
Two products, one confusing inconsistency
Lucid's enterprise suite model culminated in Universal Canvas, a feature letting users switch between Lucidchart and Lucidspark while staying on the same canvas. This exposed long-standing inconsistencies between the two products, and line creation was one of them. My team inherited the project from another group that had built a rough prototype but hadn't validated it with users.
Lucid's enterprise suite model culminated in Universal Canvas, a feature letting users switch between Lucidchart and Lucidspark while staying on the same canvas. This exposed long-standing inconsistencies between the two products, and line creation was one of them. My team inherited the project from another group that had built a rough prototype but hadn't validated it with users.
Data confirmed the 4-node pattern was the right direction
Data confirmed the 4-node pattern was the right direction
The goal was clear: unify line creation so both products looked and behaved identically. My hypothesis was to align toward Lucidchart's pattern, since it had a larger, more established user base.
Competitive analysis confirmed every major competitor used the same 4-node pattern (one node per side of a shape). Lucidspark had a single node in the top-right corner, an intentional simplification that wasn't working. Usage data backed this up: half of all lines were being created through less efficient methods like the toolbar or copy/paste. An informal poll of Lucid designers surfaced the real cost: users who didn't find the node were connecting shapes by dragging individual line endpoints, 4 clicks and 3 drags for what should be 1 click and 1 drag.
The goal was clear: unify line creation so both products looked and behaved identically. My hypothesis was to align toward Lucidchart's pattern, since it had a larger, more established user base.
Competitive analysis confirmed every major competitor used the same 4-node pattern (one node per side of a shape). Lucidspark had a single node in the top-right corner, an intentional simplification that wasn't working. Usage data backed this up: half of all lines were being created through less efficient methods like the toolbar or copy/paste. An informal poll of Lucid designers surfaced the real cost: users who didn't find the node were connecting shapes by dragging individual line endpoints, 4 clicks and 3 drags for what should be 1 click and 1 drag.
Motion made the pattern discoverable
Motion made the pattern discoverable
I unified the visual style first: updating nodes from red to indigo, differentiating line nodes from resize handles, and improving contrast on the canvas.
In usability testing, users either spotted the 4 nodes immediately or missed them entirely, usually depending on prior diagramming experience. When shown the nodes, everyone preferred them. The pattern was right. Discoverability was the problem.
Rather than making the nodes bigger or bolder, I used motion. Inspired by the iOS home indicator and FigJam's hover states, I designed a progressive hover interaction: the node expands as the cursor approaches, then reveals a ghost shape and line preview on hover.
I unified the visual style first: updating nodes from red to indigo, differentiating line nodes from resize handles, and improving contrast on the canvas.
In usability testing, users either spotted the 4 nodes immediately or missed them entirely, usually depending on prior diagramming experience. When shown the nodes, everyone preferred them. The pattern was right. Discoverability was the problem.
Rather than making the nodes bigger or bolder, I used motion. Inspired by the iOS home indicator and FigJam's hover states, I designed a progressive hover interaction: the node expands as the cursor approaches, then reveals a ghost shape and line preview on hover.
19% engagement lift with no retention impact
19% engagement lift with no retention impact
A/B testing showed no negative impact on retention or conversion, and meaningful engagement gains: +19% shapes added in Lucidspark, +3% of Lucidchart users creating 2+ lines per day. Line creation method shifted meaningfully toward the more efficient on-canvas approach. We rolled it out to all users.
One tradeoff: unifying toward Lucidchart's more powerful line experience increased accidental line creations in Lucidspark. We flagged it as a follow-on problem, intentionally out of scope for this effort.
A/B testing showed no negative impact on retention or conversion, and meaningful engagement gains: +19% shapes added in Lucidspark, +3% of Lucidchart users creating 2+ lines per day. Line creation method shifted meaningfully toward the more efficient on-canvas approach. We rolled it out to all users.
One tradeoff: unifying toward Lucidchart's more powerful line experience increased accidental line creations in Lucidspark. We flagged it as a follow-on problem, intentionally out of scope for this effort.
Persistence and alignment are what ship hard things
Persistence and alignment are what ship hard things
This project had been attempted multiple times before and fizzled each time. What made it stick: Universal Canvas gave us a real business incentive, leadership was aligned, and our team was willing to grind through a high-scrutiny, high-volume feature. Most significant product work doesn't happen in a flash of inspiration. It happens because a team shares a vision and keeps pushing.
This project had been attempted multiple times before and fizzled each time. What made it stick: Universal Canvas gave us a real business incentive, leadership was aligned, and our team was willing to grind through a high-scrutiny, high-volume feature. Most significant product work doesn't happen in a flash of inspiration. It happens because a team shares a vision and keeps pushing.