Lines, connectors and line labels.
The design.
As the second designer to join the Confluence Whiteboards team and an integral part of its early development, I led the design of several pivotal whiteboard features. This feature opened the door for users to craft diagrams within whiteboards, a capability that is universally a top use case for whiteboarding.
Lines are able to be added via elements and connect two elements together.
Users can alter start and end points, the stroke, colour and the type of line. These changes are mirrored in the main toolbar button.
Our aim was to deliver a user experience that felt familiar and intuitive to our users. To achieve this, we closely adhered to established design patterns within Atlassian. We embarked on the development of a minimal viable product (MVP) feature, one that offered ample flexibility for users to create the diagrams they required.
This project encompassed various aspects, such as exploring styling options for lines, such as color and stroke, enhancing the flexibility of the lines themselves by enabling text addition, providing options for different line types (curved vs. straight), and fine-tuning the behavior of lines, including how connections functioned.
Given the project's heavy reliance on interaction-based design questions, such as the impact of Z-index on two connected elements, we actively engaged in "dogfooding" with internal users. This proactive approach allowed us to iterate on the designs, address edge cases, and refine the feature prior to its release to external customers.
Users are able to add text to lines either via the toolbar or by double-clicking.
The process.
-
As with every project, we started with an analysis of competitors. Our objective was to uncover prevalent design patterns that would guarantee a sense of familiarity for our users. Delving deeper into Atlassian's established design conventions, we investigated the principles governing the concept of 'connection' and the consistent styling of features across our product suite. Subsequently, we had a scope meeting with PM, engineering and design - where we outlined the essential functionalities required for the minimal viable product (MVP).
-
I looked at existing diagrams created by our teams, to try and understand what value ‘lines’ have. I iterated on the ‘+’ button on the elements select state, looking into the most seamless way for users to quickly connect two elements together. I created iconography for styling options, relying on existing Atlassian patterns to create a new icon set. I dug deeper into edge cases, such as what happens with a line label vs a smart connector (both utilise the line itself to display text).
-
I worked with engineering to resolve any edge cases or bugs. Once the feature was in a solid state, we released it internally to ‘dog-food’ the feature and ensure the interaction was smooth. Based on feedback we made iterations to the experience, allowing the team to feel confident in releasing the feature to customers.
The impact.
As previously stated, this project allowed us to target a core use case of whiteboarding tools. Users are now able to create flexible diagrams within Confluence whiteboards. This became so important to users that we ended up developing a ‘diagram’ template for users to quickly add in.