Otter is a lightweight, dynamic collection of Page Building Blocks and Templates for the WordPress Gutenberg block editor.

I had the opportunity to work on Otter Blocks for about 1.5 years, starting with standardising blocks by creating a common design language, expanding the plugin with new features (AI, new blocks, etc.), and supporting the extension of existing features.

How it started

When we started working on Otter, a few core things needed to be added, even if the project had been in development for some time. After brainstorming with the team, we decided to take things step by step: a Design System, a Styleguide, Icon Library, etc. Doing these changes on Otter Blocks was a long-term effort, but it was a required step before making other changes.

Otter Admin Dashboard

After finishing the Design System and the Styleguide, we realized that adding more and more features in Otter would require additional Setting Modals, so we decided it would be better to redesign and expand the main dashboard to have all the settings in one place. This improved the user experience since all the settings, including the Help and Documentations links, were now in one place. It also helped when we added new features since the UI was very scalable. For example, we released the AI features in 2023, and adding the OpenAI settings in the UI was very smooth.

Creating the new Presentation Pages

Releasing a lot of improvements also meant that we needed to update the Presentation Pages to reflect the new UI, features, and enhancements better. Another improvement was creating demo pages for each Block, making it easier for users to see how it would look and work - without needing to install it.

The other important step in this stage was making sure the Pro Features were well represented so it was easy for the users to understand the benefits of getting the Pro version.

This included:

• having a section/page for each main that will present how those features can be helpful: Advanced Blocks, WooCommerce Builder Blocks, and Visibility Conditions

• add a Social proof section from real users, which would increase the product's credibility

• adding images for those features using real use cases: an actual Popup and a Single Product page. We didn't go just for some marketing screenshots but used real use cases built with Otter.

Improving the Pro Features and how those are presented

Besides those mentioned above, we also started exploring how to serve the Pro Users better. This included adding new, more advanced features and improving how Pro features are presented. The main challenge around this topic was that Pro features were entirely hidden from the UI in the Free version. This caused some issues, one being that users wouldn't know about them.

In the next releases, we made sure that dropdowns no longer hide the Pro options (those are marked with Pro now), and all the features are visible, even in Free (for example, the Form Submissions or other Marketing options which were previously hidden in the Free version).

Integrating AI features

In 2023, we decided to look into integrating AI features that would improve the User Experience with Otter Blocks. This stage was fascinating and challenging at the same time. The main areas we decided to improve were:

• Forms: this allows users to generate forms using AI easily. For example: Create a form for a Pet Shop

• Layout: enables users to create the starting layout for a page

• Content: makes it easy to create headings, summarize text, adjust tone, and more.

Below is an Initial Draft for the Headline Generator:

Working on Otter Blocks was a challenging and rewarding journey - whrere I learned a lot both from the technical contraits, Product Design and market challenges. But in the end, it paid off after Otter became profitable and it had over 300k active installs and 190+ reviews from customers.