PubPub is a free and open tool for collaborative editing, instant publishing, continuous review, and grassroots journals. It was created at the MIT Media Lab to serve the publishing community and inspire collaboration among authors.


While the core functionality was already being developed, the why, what, and how the user would interact with the platform was yet to be conceived.


Because of the nature of the platform, its features were a sort of combination between Github—article and file versioning, Medium—publishing and following, and Wikipedia—collaborative editing, combined with a third-party system to review articles.

This meant that the number of features available for the users is vast. The challenge for me was to make the interface friendly, approachable, and usable, without making the user feel like looking at an aircraft’s dashboard.

The team was using a React UI library called BlueprintJS to have a consistent and modular component system, so I had to design the interface within the boundaries of that UI library. Unfortunately, a Sketch UI kit for BlueprintJS wasn’t available at the time, even though many users requested it on Github. As I needed to follow the constraints of the library, I created a Sketch UI Kit based on every component available in it and shared it with the BlueprintJS community.

This was a project of constant iterations, both in single elements and as a whole.

The header gives the user a first look into what the platform is, what it can do, and how the user can engage with the content. I iterated both minimal and complex versions.

Collaboration, both in the form of discussions and co-authoring, is very important in PubPub.

We had a lot of discussion regarding the comments—they could either be in its own section or always visible as part of the main article view. As a conclusion, we chose to have comments always visible, as the comments are one of the key value propositions of PubPub.

With the individual element iterations, the next step was to combine these elements into the bigger picture and continue iteration.

The mockups below are part of the many iterations made for what the main article view should look like. Again, the main goal was to make the interface approachable, and not intimidate the user with all the features offered.

After many iterations and soft user testing, this was (one of) the final mockups to be chosen for implementation. Every element follows BlueprintJS’s component library to make a quick and easy implementation while retaining custom-designed elements to personalize the platform.

This project taught me the importance of designing within constraints and taking into account the maintainability of a design, not just the implementation. Designing with BlueprintJS’s constraints in mind guarantees that the project will be maintainable and scalable beyond my designs.

Copyright © 2016
Made with tacos by Sadok in Mexico.

This is a unique website which will require a more modern browser to work!

Please upgrade today!