MB Custom Post Types & Custom Taxonomies Update: UI/UX Improvements

For a WordPress plugin, having a beautiful, modern, and easy-to-use interface is very important. That’s why we've kept improving the UX/UI of our plugins in parallel with developing new features. Today, we’re so excited to announce that the new interface of the MB Custom Post Types & Custom Taxonomies plugin is ready. Let’s see how it is!

Why New UI?

We realized that the interface of MB Custom Post Types & Custom Taxonomies is outdated. It uses the UI components of the classic editor such as layout, meta boxes, buttons, etc. While the UI is so familiar with users and still works, it feels old when compared with the new UI of the block editor.

So we decided to update it to make it more modern, using the block editor's components.

Principles

While working on improving the UI (and UX), there are usually two approaches: creating a brand new UI (maybe with the product's brand identity) or following WordPress's design system.

As we've been in the WordPress ecosystem for a long time, we found that introducing a totally new UI might hurt the user experience. They will have to learn about the new UI, where the elements are, and how to interact with it. Besides, it makes the plugin not an integrated part of the WordPress admin. Our founder, Anh Tran, explained this clearly in his blog post.

So, in this update, we chose to make the plugin’s UI similar to the UI of the block editor. Our purpose is to make the product more beautiful, familiar, and maximize the usage efficiency, which ultimately brings a better experience to our users.

What’s New?

We have removed some unimportant details to focus on the main area for the custom post type and custom taxonomy. So, the interface is simplified.

As you can see, the layout to create or edit the post type is clearer than before.

There is a new top bar that mimics the layout of the block editor with a logo, page title, and action buttons. Those action buttons Publish/Update, and Save Draft are now sticky to the top bar and use the same style as in Gutenberg.

The main area is re-styled with the block editor's components (tabs, buttons). It still uses the tabs as before, and all the detailed options in each tab remain the same. However, without showing the sidebar, the main area is much clearer and keeps users focused on the main task - creating post types or taxonomies.

Regarding the sidebar, we moved it under a toggle in the action button in the right corner of the top bar. You should click on that button to reveal it, just like how you reveal the post or block details in the block editor.

Along with a familiar section of the post type summary information, the sidebar includes some new sections for leaving us a review, exploring more plugins from our team, and upgrading the plugin if you are a free user.

You can collapse or expand the details in these boxes, as well as, use the toggle button to show or hide the sidebar. This also is the same as the block settings in Gutenberg.

With the new interface, it’s a piece of cake to create or edit a custom post type or custom taxonomy. We believe that you can still catch up and get working right away even when you are a newbie. No more spending time learning how to interact with the interface. Thanks to that, working efficiency will be uplift.

Technically, the new interface is built with ReactJS using the same components from the block editor. We also believe that this is the future of WordPress development, as it reduces a lot of work for maintaining the UI components. It also means that the look and feel of the plugin will be WordPress-native. Thus, it makes you feel like you are using a WordPress product, not a separate plugin.

Last Words

You might know that we updated the UX/UI of the Meta Box Builder not a long time ago. The interface improvement of MB Custom Post Types & Custom Taxonomies plugin is the next step in the process of a better Meta Box.

Next, we’ll update the other plugins sequentially. What is the next one you are looking forward to?

Now, update the MB Custom Post Types & Custom Taxonomies, and enjoy the new interface. Don’t forget to leave your thoughts in the comment section below. Thanks for reading.