Representation of Tuleap  on top of the Tuleap Documents UI

Case study

Tuleap collaborative documents

Overview

Tuleap is an Open Source solution, allowing to manage projects as well as the entire life cycle of software and hardware applications. Tuleap Documents is a centralized and secured document area for each workspace in Tuleap. You can create and store MS Office documents, plain text, images and video as well as other types of documents.

Goals

Provide a way to collaborate on documents with following requirements:

Process

My process began with discussing with some key users and analyzing their issues related to collaborative document editing. I then proceeded to research existing solutions for collaborative text document editing. I examined previous work in this field, carefully noting successful features and patterns. Specifically, I observed:

Next, we discussed with the R&D team whether we should base the development on an existing product (CodiMD, HedgeDoc…) or create our own from scratch. This was an important step because building something based on an existing library would drive many of the UX choices we could make. We carefully considered the pros and cons of each option, taking into account factors such as compatibility (including licence compatibility), ease of use and overall project goals. Eventually, we chose to start from scratch.

Another important consideration in the design process was the potential for a text document to become an issue in Tuleap. We thought about the document structure, inlined images, and document approvals.


Not really on the initial roadmap but I thought it was cool to draft:

Sketches

Sketches of the collaborative documents on my notebook
From the notebook

Solution

Here are some mockups I've made for this feature.

Mockup showing the ropdown item which triggers the creation of a new text document
Dropdown item triggering the creation of a new text document
Empty text document with two placeholder: one for the title, one for the first line with a helper
Empty text document with two placeholder: one for the title, one for the first line with a helper
A filled text document with two realtime collaborators
A filled text document with two realtime collaborators
A scrolled view of a filled text document
A scrolled view of a filled text document. We can see the Excalidraw integration.
A filled text document viewed in zen mode
Draft of a filled text document viewed in "zen" mode
While hovering collaborators' cursor, their name appears
While hovering collaborators' cursor, their name appears
Inline format tooltip appears on top of your text selection
Inline format tooltip appears on top of your text selection
Sticky and automatically generated table of content
Sticky and automatically generated table of content
Alternative table of content
Alternative table of content

Result

Even though this feature has been deprioritized, it was still fun to work on. I learned some things and we have plans to reuse some UX patterns elsewhere in Tuleap, specifically thinking of:

Credits ❤️

Manuel V., Nicolas T, Thomas G.

Let’s work together

Get in touch now