Lucid Software LucidSpark
At Lucid, I worked on their whiteboarding tool, LucidSpark. During my time at Lucid, I was a part of an 8 member team consisting of other designers, developers, product managers, etc that focused on improvement of the core experience of the platform. I worked on features for line tool and collaboration that are now live on the product and for perceived performance improvements that are yet to make it to the tool.
My Tasks
User Research, UX Design, Prototyping
Duration
May - Sept, 2022
Team Size
8 Members
Timeline
Three Month Journey
Rationale
The themes my designs followed
The team that I was working with focused on improving the core set of features. The main drivers of my design activities for line improvements and collaborator improvements were:
​Minimal Consumption of Resources
Highest Impact
Visible and immediate benefits
Narrow Focus
Story 1: Line Improvements
Research
What are the users saying?
The leadership had decided to polish the feature set of the platform. After the team prioritized line improvements, I wanted to understand what the users wanted out of the lines feature. Like any tool, LucidSpark proactively listens to users and their feedback. From the feedback logs, NPS Data and internal interviews I was able to understand what the users wanted.
1. Highlights
1
User 1
​I recently found out that I can reset the line from the menu, this was after 1 year of using the tool. I wish using it was easier."
3
User 3
Inserting an object on a line connecting two other objects often messes up my entire board."
2
User 2
I use multiple line types on the same document, switching between the different lines takes so many steps"
4
Internal User 1
I don't know what the line I draw would look like."
Problem Statement
Identifying the issue
How might we make the lines feature easier to use with respect to line type selection and identification while also adding and improving useful power features for users.
More Context
The lines feature had the following implementation before the redesign:
Identifying and
Switching Line type is Difficult
There is no visual cue readily available on the left toolbar for the user to know what line type is being used on the board. The only way user can see the line type is through the line type option in the contextual menu that appears when user clicks the line to enter edit mode. This is also the only way the user can switch between line types meaning it takes longer than it should. This means user needs to take multiple steps for simple tasks.
Line Node doesn't
Represent the Line being used
The line node that appears on the top right corner to quickly let users connect objects using lines, is shown using a straight arrow, again not indicative of the line type of the connecting line.
Resetting Line is
Difficult and Time Consuming
The intents of editing the line were separated into two: to move anchor points and change bezier values you click on the line to enter edit mode. This edit mode also presents the users with a contextual menu that lets users view a command menu. This command menu consists of the reset line option that lets users simplify lines by getting rid of actor points on the line automatically. This makes resetting the line a little difficult to locate and use because of the separation of similar intents.
No way to Insert
Object on a Connection
The tool doesn't currently let users insert objects in between connected objects and places any object brought over the line merely on top of it. To insert an object on a connection the user first deletes the original connection and then connects the new object to the two older objects. To accomplish this task the user makes 4 clicks which is one too many clicks for a simple task.
Our Solution
What we gave the users?
Line selection on left tool bar
The users now select the line type after they click on the line icon on the left toolbar through a selection menu reducing the selection time. Once the user selects the line type, that becomes the default line type for the document. The icon of the selected line persists on the the left tool bar (the line icon on the toolbar is dynamic) and lets the users identify the current line type for the document. This would also mean that the line tool now falls in line with the shapes tool in terms of the selection method through the selection menu, maintaining consistency.
Line Node updates
to last used line type
The line node that appears on the top right corner to quickly let users connect objects using lines, now shows the line that was used last on the document. This helps users quickly identify line type when making connections.
Adding
Long-Click to Reset Line
Since the user is already trying to edit the line when they click on the line and enter the edit mode, a logical location for line reset option was within this line edit mode. Now, the user can long click and hold on any of the anchor points on the line to simplify and reset the line. By doing so, I was able to conflate the edit intents of the line into a single space.
Inserting
Object on a Connection
The users can now bring the an object over a connection and the board will identify that the user is trying to insert the object onto the connection. The users will be able to insert the object when connecting circular dots appear on the intersection points of the connection and the object. This also is a more intuitive way of adding objects to a line and would require almost no briefing on operation.
Synthesis
How did I start?
The leadership had decided to polish the feature set of the platform. After the team prioritized line improvements, I wanted to understand what the users wanted out of the lines feature. Like any tool, LucidSpark proactively listens to users and their feedback. From the feedback logs, NPS Data and internal tests I was able to understand what the users wanted. I was able to gather a lot of data from the feedback and NPS data; I used the internal tests to validate the initial findings I made.
Design considerations
While ideating for designs I followed these guiding principles