Shapes.
The design.
One of the primary use cases for whiteboarding centered on diagramming, and I was assigned the responsibility of crafting a user-friendly experience for shapes. These shapes needed to be seamlessly manipulable both inline and via the main toolbar, allowing users to effortlessly change their colour and toggle between filled and outlined formats while maintaining a familiar and intuitive user experience.
Shapes are able to be quickly dragged and dropped.
Users are able to transform shapes into other shapes
I researched competitors and relevant articles to curate a list of the most essential shapes for diagramming. We looked into the min-width of shapes (and how that affects text within shapes), what the new pattern should be for removing the colour fill and how to transform between shapes without affecting the select box. I also developed connector lines to facilitate the connection of individual elements into cohesive diagrams.
I introduced a new pattern of toggling the colour ‘fill’
The process.
-
I started the project with a team meeting to establish a clear scope and to dissect the user stories. Following this, I performed a comprehensive competitor analysis focusing on shapes, subsequently delineating a list of essential shapes that were critical.
-
I crafted a comprehensive design spec for shapes, encompassing key elements such as minimum and maximum width for resizing, guidelines for adding text within shapes, instructions on employing color for outlining versus filling a shape, integration of connectors with shapes, placement options via the toolbar, and styling choices for the shapes themselves. To guarantee usability, I conducted interviews with frequent diagram users within our organization and collaborated closely with engineering to ensure the feasibility of our design.
-
We encountered several challenging edge cases involving shapes, particularly in their interaction with text. I suggested design solutions that resolved these issues. We tested the feature internally for an entire week before releasing it to customers. Ensuring that there is no janky behaviour.
The impact.
Because diagramming is a fundamental use of whiteboards, shapes represent one of our most frequently utilized features. Additionally, shapes have expanded the realm of creativity, offering new avenues for presenting content and fostering artistic expression on whiteboards.