Drafta design collaboration tool
Drafta design collaboration tool

Drafta design collaboration tool

Drafta brings order to exchanging design projects with colleagues and clients and makes them easy to discuss.
15 February 2019
www.drafta.co
Drafta was born in 2013. Back then we created a simple internal tool to gather all the designs for each project in one place. The list of the layouts created was always accessible on the left, like in a classic file manager. The design could be viewed in a separate column so it was easy to switch between different versions and different pages’ designs.

The most relevant version of the design was always at hand and designs did not get lost in the correspondence with clients.

Each design version had a unique URL that could be pasted into any document or an email. The designs from Drafta were displayed in the browser correctly and worked well with retina.
We were aiming for a simple and unobtrusive interface – there were no toolbars around the layouts.
As the time went by, the service gained additional functions: users got to add comments, change the background colour and enjoy integration with Slack.

We used Drafta for 5 years and it was so convenient that we decided to share the product with everyone.

Before making it public, we reworked it. The developers did some React magic and the designer adapted the interface for new use cases.

Interface

As we were making a product for designers, we knew we couldn’t cut corners either in UI or design as the “early MVP” excuse simply wouldn’t work with these guys :-) 

In the earlier versions, Drafta had two toolbars: the public one and the one the administrator used to add and sort designs. In the new version, we decided to merge the toolbars into one.

Designers can now create new pages, upload files, change settings and build the structure of the website right in the project’s window.

The interface is as neutral as possible in order not to distract from the designs.
The interface looks simple but there are multiple functions available. They come alive depending on the context and the use case, e. g. when you hover the element.
Page settings and other services are displayed in separate modal windows that may be accessed from different screens.

Mobile display

We knew that users often view the desktop designs on their mobile phones. That is why Drafta can adapt depending on the device, giving the user an opportunity to conveniently zoom in and out.

The projects waterfall

While the project was in development we came up with the idea of an additional section where all the team projects would be accumulated.  The preview waterfall can be displayed on a big screen in a design studio so that the team members would see all the projects that are in progress.

The landing page

Here we explain and show how to use Drafta. We have made a video that demonstrates the functionality using real projects as examples. 

 

The emphasis here is placed on animated floating lines. They pile up neatly, embodying the order that Drafta introduces to the working process.
Sketch plugin
To make it easier for a designer to export projects to Drafta, we created a Sketch plugin. It lets a designer update old design versions and upload new ones without leaving Sketch.

The plugin was featured by Sketch together with products from Marvel, Invision and Zeplin


Project support

We launched Drafta as a minimum viable product — just like we did with Pulse.red. Drafta has been named #2 app of the day on Producthunt, yet we still have improvements to introduce. We communicate with users and gather feedback to construct a roadmap on its basis.  

You can find a detailed case study about how we created and built Drafta on Fragment website.

Fragment is our subdivision, creating digital products for corporate clients, contemporary startups, and for ourselves.
Read more