Introduction

Being the product designer of Tilda Publishing I was working with zero block — design editor that helps designers to create a website by blocks without a code. Our team used the research data, which said that workflow speed is the most annoying thing for our users. So we started thinking how to fix it.

User workflow

We roughly drawn our users workflow scheme for better understanding key steps of their design process.

Import Figma layout

We decided to allow our users to import Figma file directly in zero block to decrease layout time. Developers’ feedback was defining how many design resources we were going to spend on it and luckily there was only one modal view and couple of interface buttons inside the editor.

Release links:
Import figma design

Things we didn’t expect

1. This feature was not working properly at the beginning, and there were a lot of weird artefacts instead of normal layout. Users reacted to this with criticism.
2. We’ve missed out the fact that start from scratch is not so common case for our users, most part of them use the templates and then edit it in zero block. So it was not a killer-feature.

Layout features

As I said, Import Figma Layout was not a killer feature, but it’s given us a reason to improve native layout features in zero block. We started to dig some info about potential problems.
What we’ve got:
1. Some users used 3rd party plugins, because of their need for improved layout tools
2. 3rd party plugins didn’t work properly.
Based on this, we’ve redesigned element settings panel and tidy up feature.

Release links:
Tidy up
Adjust spacing

Copy animation

Components reusing is the most common part of any design process especcialy for animation. And that was the one important thing that we missed here.

Recreating elements animation was a big time-wasting for our users. Let them copy element animation was obvious decision. We defined two options:

1. Animation templates interface
2. Simple copy/paste option.

The second option was simple and easy to develop.

Layers panel redesign

There is the reason why I quickly deep in this part. As we released the copy animation feature, we’ve found a new barrier spending our users’ time. Copying elements and properties from one block to another, users had to leave the edit mode and then go to the block they need to paste it. It was the same way if they needed to add a new block. So we’ve redesigned a layers panel to always keep our users in the edit mode.

Release links:
Except this core feature we also made 4 daily work features and putted them in one release

Outcome

We’ve increased our users workflow speed by 35%. We got this numbers by using the UX tests, where we were measuring time, giving designers simple task to create animated webpage. We used current and pre-production versions of each feature to fix the difference.

There also some "speed up" features we made:
6 new Zero Block features to speed up your work

What we’ve learned

1. Time is precious, especially when we talk about workflow
2. Reusing is an important part of design process in our product
3. Most part of our users don’t start their projects from scratch, so we always need to give them trending templates