Line Creation Unified Experience
Increasing engagement while driving consistency across the Lucid Suite
Intro
In this article, I take you behind the scenes of a challenging UX project at Lucid Software, where I worked to bring harmony to the line creation experience in our flagship products, Lucidchart and Lucidspark. You’ll get an inside look at how I tackled inconsistencies, responded to user and stakeholder feedback, and harnessed the power of motion to make our tools more immediate and intuitive.
Along the way, I’ll share what it took to align two different interfaces with large user bases, boost user engagement, and turn a small design change into a big win. Plus, I’ll dive into the lessons I learned about persistence, collaboration, and the grind it takes to make product magic happen.
Background
About Lucid
Lucid Software creates visual collaboration tools to help teams see and build the future. Their flagship product, Lucidchart, has been around for over 10 years and is the industry standard for diagramming. Lucidchart is primarily used to create visual artifacts showing complex systems and processes.
More recently, Lucid added Lucidspark, a virtual whiteboarding tool focused on brainstorming and ideation. The UI of each products was designed to best suit those specific use cases. This meant subtle, but significant differences in the way certain interactions played out in each product. One such difference relevant to this case study was the shape selection UI, including resizing, line creation, and shape metadata tags.
Lucid Suite and Universal Canvas
For a few years now, Lucid has been moving toward an enterprise suite model where Lucid products are bundled and sold together to enterprise customers. This culminated in a feature called universal canvas. Universal canvas allows users to switch between the Lucidspark and Lucidchart interfaces while staying on the same canvas.
This feature helps users who are proficient in both products to have quick access to tools they need without the friction of moving content between documents and products.
While universal canvas added a level of fluidity to the product, it also laid bare inconsistencies between our product interfaces in a way users had not previously experienced. We got a lot of feedback from users both internally and externally, wondering why the same interactions and features worked differently in one product vs. the other. The line creation experience was one of those things.
My role
My team picked up this project after another group had been working on it as a side project for a couple of months. They had a basic coded prototype showing what it could look like for the Lucidspark line creation UI to match Lucidchart. However, the concept hadn’t been validated with users and the interactions were still a little rough around the edges.
Once my team adopted this project, I was the sole UX designer. I performed multiple rounds of research, did competitive analysis, designed and iterated on style and interactions. I also worked with my PM to define our AB test and gather qualitative data to augment our test results.
Discovery
What does success look like?
One of the first things I did when taking on this project was define what a successful outcome would look like. In talking with stakeholders and my product manager, we decided that the desired outcome was a unified line creation experience across both Lucidspark and Lucidchart. The UI should look and behave exactly the same way. Knowing this, I turned toward the how.
In talking with stakeholders and my product manager, we decided that the desired outcome was a unified line creation experience across both Lucidspark and Lucidchart.
My hunch was that we should unify toward the Lucidchart experience as the previous team had done. My reasoning was that Lucidchart had been around longer, and the user base was much higher, so keeping that experience mostly the same would help us minimize risk.
However, over time, products have to evolve to meet the needs of a changing user base. So, while I felt confident in aligning toward the UI that most of our user base was more familiar with, I didn’t want to close the door on any opportunities to make the experience better for new users.
A Lot of Eyes on Lines
One challenge of this project was the sheer visibility of it. On average, 2.5M lines are created every day by 115K users. This meant that any changes here would face extreme scrutiny. However, our team felt the benefit of a consistent experience in the long term would far outweigh any discomfort with updating the experience in the short term.
Another challenge we faced was change management. Due to our suite model, we were actually winning a lot of deals at companies where one of our competitors had been the standard for a long time and we were experiencing a big influx of users from our competitors. Through that mass migration, we had gathered a lot of feedback from users who expected one thing from our product but often got something else.
Competitor Analysis
My next move was to perform a competitive analysis to see how our competitors handled line creation. This exercise made it clear that all of our competitors did line creation the same way. They provided 4 nodes along the 4 sides of a shape, and clicking and dragging from one of those nodes would create a line coming from the shape.
Too Different to be Viable
In contrast to its competitors, Lucidspark provided only one line creation node in the top right of the shape. This was done in an effort to simplify the UI and reduce visual clutter. Lucidchart, on the other hand, had a 4-node line creation UI, similar to the rest of the canvas products I reviewed. We had hoped this difference would aid in differentiating Lucid’s products.
In reality, it seemed users were not catching on. In reviewing usage data, only 50% of lines created in Lucidspark were created from that entry point. The other 50% were created using other methods like adding a line from the toolbar or copy/paste.
In reviewing usage data, only 50% of lines created in Lucidspark were created from that entry point. The other 50% were created using other methods like adding a line from the toolbar or copy/paste.
This gave me more confidence that moving toward a 4-node pattern in Lucidspark would solve some of our problems. As I mentioned before, many of our Lucidspark users were either existing Lucidchart users exploring Lucid’s other offerings, or they were former users of competitor products who had been migrated over to Lucidspark due to their company consolidating software. Presumably, both groups were used to a 4-node line creation UI and just couldn’t figure it out in Lucidspark.
“Bad” Line User Behaviors Spotted
Hoping to get a general baseline, I conducted an informal poll where I asked Lucid designers what they had observed in user calls. My colleagues reported that when connecting two shapes with a line, about half of Lucidspark users had no idea the on-canvas line creation node existed. Instead, they would add a line from the left toolbar, then click and drag each endpoint individually to connect the shapes. All told, this was 4 clicks and 3 drags just to connect 2 shapes, the most basic function of a diagramming app. On the other hand, using the line node was a single click and drag. Much simpler. Now the trick was to get users to notice it.
Design and Iteration
With all this in mind, I decided to test a unified 4-node design with both Lucidspark and Lucidchart users. I hoped this would make the on-canvas line creation method more discoverable, and it would make the line creation experiences consistent between our two products.
Aligning the Color
The first thing I did was unify the color and style. As I mentioned previously, Lucidchart was already using a 4-node line creation UI. However, the nodes were red. This color choice was a relic of the past and we had since moved to indigo as our primary interaction color. With this in mind, I decided to propose indigo for the updated 4-node UI.
I started with a simple circle outline, mimicking the existing Lucidchart UI. However, I felt there wasn’t enough contrast, both with the background, and with the resize handles, which were also circles with indigo outlines and a transparent white fill. So, I filled in the line node circles and made the resize handles rounded squares, bridging the gap between Lucidchart’s sharp square resize handles and Lucidspark’s circular resize handles. I eventually added a darker indigo outline around the line nodes to improve contrast with the canvas background even further.
Testing the 4-node Pattern With Surprising Results
Once the visual style was established, we coded a prototype and I went out for round 2 of testing. In this test, I gave users a simple task: connect two shapes with a line.
To my dismay, users still had trouble finding the nodes, instead opting for the less efficient way of creating a line. However, on these calls, I was able to ask more follow-up questions.
Here’s what I learned:
- The Lucidspark users I tested with either found the 4 nodes right away or they didn’t see them until I prompted them (“try creating a line from the canvas”). The difference seemed to be whether they had prior experience with whiteboarding/diagramming tools.
- When shown the line nodes, users MUCH preferred this method of connecting shapes, including those who had used the previous Lucidspark experience.
These learnings told me the pattern I was unifying around was right. We just needed to help users discover it better.
Using Motion to Aid Discovery
While I was brainstorming ways to make the line nodes more discoverable, I thought about motion as a design principle. Sometimes, you don’t need something to be bigger or bolder or take over a user’s screen to get noticed. You just need to add a little movement. The home indicator in iOS is a great example of this. On the lock screen, or whenever you tap it, it gently bounces up and comes back down to teach you how to use it.
Around this same time, I was looking into Figjam and finding inspiration in the little moments of delight they create with their interface. One such moment was their line node interaction. As your cursor gets near, it expands to reveal an arrow icon. Then, when you hover on the node, it reveals a ghost shape and line, showing what will happen if you click.
I thought an interaction like this could work really well for our users, so I mocked up what it could look like if this interaction existed in Lucid products. You can see the result below.
Testing in the Wild
Test Setup
After adding the new hover states and squashing a few bugs, we decided it was time to test this new experience in the real world. Our primary motivation here was to unify the experience across products, so success for this test looked like net neutral or positive changes in the metrics we track for conversion, retention, engagement, etc.
It’s a Success!
To our delight, not only did we see no impact to our retention and conversion metrics, but we saw increased engagement as a result of the new experience.
The number of shapes (including lines) added in Lucidspark increased by 19%. The number of Lucidchart users who create at least 2 lines in a day increased by 3%. As you can see, the test had an outsized impact on Lucidspark, but that makes sense considering the experience had changed the most in Lucidspark.
We also saw users’ line creation method skew much more heavily to the more efficient on-canvas method, as opposed to other less efficient methods.
With these results in hand, it was a no-brainer to turn on the new experience for all users.
There is always more to do
While I’m thrilled with the outcome of this project, the unification of this experience came with a few downsides. One was that by unifying toward Lucidchart’s line experience, Lucidspark inherited a lot of those power-user features which increased the number of accidental lines created in Lucidspark.
While we identified many opportunities we could pursue in hopes of bringing the number of accidental lines down, ultimately, we decided to take the problems one at a time. Today’s problem was unifying the experience. Tomorrow’s problem is bringing those accidental lines down.
My Take-aways
Projects like this can be frustrating. Looking at the before and after side by side, it is such a small change. And yet, it took almost a year to get from the initial idea to releasing to all users.
This project had been attempted a number of times before my team and I got to it and each time, it had fizzled out for one reason or another. I think there were a few things that made this time different.
First, with universal canvas, we finally had a real incentive to unify the experiences between the two products.
Second, I had leaders who were totally bought into the vision of having consistent interactions across our products. Product development moves so much more smoothly when there is strong alignment across multiple levels of people.
Most significant product achievements come because you and your team have a shared vision and you relentlessly pursue it.
Third, and I think most of all, my team and I were willing to grind. We were committed to the outcome, no matter how long it took. And that’s indicative of my experience in product overall. There are magical moments where everything is aligned and designing and building is easy, but that is not the norm. Most significant product achievements come because you and your team have a shared vision and you relentlessly pursue it.
As much as it can be easy to get discouraged by the slow progress when working on a high-engagement feature like this, I am so grateful for all of the smart, thoughtful, and constructive feedback I got from colleagues and users. The final product is so much better for it.
