Feature: Intuitive Sticky Notes Collaborative Whiteboarding

When trying Penpot for the first time I was eager to testdrive the Whiteboarding and Mapping kit from the template library. What I was hoping to find was an intuitive feature that would allow to organize collaborative sticky notes sessions.

There are many use cases, but in general it’d be great to have some brainstorming sessions related to the more detailed work of creating UX designs. And have those brainstorms be associated to the design (i.e. not in a separate tool).

What I found was that the kit isn’t really suited. It’s use case is as a drawing tool to add stickies to a design. It is too involved creating them, adding text, connecting with arrows and shifting them on the canvas. There’s too many distracting tool panels in the UI. What I was hoping for was something with the same ease-of-use as Miro (and likely Mural as well).

Penpot though is very close to providing that already. Note that AFAICS (and I did a lot of search) there is no good FOSS sticky notes whiteboarding tool. An opportunity?

What should the UX be like, more or less?

  • It should be very basic. Minimalist, hiding all bells and whistles.
  • There’d be a sidebar tool panel where a set of colored stickies can be dragged on the canvas.
  • Like this: Drag sticky, place on canvas, type text, done.
    • (You wouldn’t see internal objects of the sticky. Clicking it gives a cursor, and you type centered text)
  • Text would auto-scale and the sticky would be resizable.
  • Tool panel also contains Connector lines tool.
    • Stickies have anchor points for the line tool to connect to.
    • Connecting stickies with auto-routed lines, maybe ability to influence the route.
    • Lines reroute when moving stickies.
  • Delete sticky tool.

That’s the basics, most of it. There might be additional features over time, eg.

  • Clicking a sticky shows a right panel with info who created it, ability to add comments, maybe see edit revisions, idk.
  • Maybe an activity log (so you see who deletes your sticky all the time :slight_smile: )

In addition it would be splendid if - besides various image exports - there’d be a data export (e.g. JSON) and maybe an API.

My Use Case: Event Storming

One particular use case I have (and I readily admit this goes beyond the main purpose for Penpot) is to do a data export of a sticky note session and do code generation based on that. This in the context of Domain Driven Design and event-driven architecture. Sticky diagrams are created in an Event Storming session with domain experts. There currently is an Elixir framework called Commanded, that allows sticky note diagrams created in Miro to be exported (see exported JSON examples) and then used to generate application boilerplate code. I’d very much like an all-FOSS way of doing something similar.

3 Likes

In a Fediverse post following up on this topic, and in response to @Ryuno-Ki who considers it beyond scope of Penpot (which is a reasonable argument), I reacted with:

I realize that it is an additional use case that goes beyond the core features a #UX design tool should offer.

Still I feel that collaborative brainstorming before designing are closely related. Now I foresee people spending a lot of time drawing stuff to demonstrate how they see various design aspects. This might be avoided by having an agreed upon sticky notes based UX flow giving raw outlines. And save a lot of time in the process.

I see it as similar as what often happens at the start of a FOSS project, where people are eagerly jumping into code before really knowing what they’d like to code.

I feel it can be a signicant time saver to first focus on the underlying concepts of UX and interaction design flows using just stickies, rather than doing much more work upfront creating UI mockups already, presenting that to others only to hear that they have something completely different in mind.

2 Likes

There’s existing general sticky note type brainstorming tools though aren’t there? Such as:

2 Likes

I know about diagrams.net and it is a fabulous open software. But it is a drawing / diagramming tool first and foremost, and I do not think it is collaborative (i.e. realtime multi-people editing). I tracked some tools (including Penpot) in a wiki post on Fediverse Town some time ago, and discarded many others as unfit for the brainstorm we’d like to do there. Ended up with proprietary Mural, that some people refused to use.

1 Like

Yeah that’s fair. Diagrams.net isn’t real time which can be a hassle when using.

I wouldn’t be opposed to Penpot having this functionality, but I hope they don’t get distracted from core UI design focused features like component variants etc. That’s the single feature still holding me back from trying to get broader adoption of penpot at my workplace.

1 Like

This whole conversation is very interesting :slight_smile:
It’s true that “Diagrams” feature goes beyond the main purpose for Penpot.

However, it is something that can give us clues as to how far the plugins in Penpot could achieve. It is something that is on our long-term roadmap and in which we have high expectations. That makes it something that we plan to make and will be an experiment in our upcoming work. But with what Penpot has, we hope that with the help of the community, it will eventually allow users to create more amazing plugins.

It would be wonderful to be able to develop new features to create a fully integrated plugin-based ecosystem.

1 Like

For your information, some examples of the kinds of diagrams I am most interested in…

DDD Event Storming → Event driven architecture

Event storming template for Miro, created by Judith Birmoser. Exctracted a single frame as image:

Event modeling

Maybe even more interesting for Penpot, as this shows relationships to UI screens in the front-end.

Source: