BEdita CMS design system overhaul



Details

The first screen shows the initial chaos and how messy and cluttered the design system structure was.

The second one shows what I ended up with after streamlining the whole library, reducing everything to just a handful of components, tidily organized and ready to be integrated into the product.

The last one shows two stress tests we ran to see how much time it would have taken to (re)build some already existing - and fairly crowded - pages using the new design system.

To be honest, the comparison isn’t quite fair if we don’t take into account the time spent thinking while populating those pages when they were created in the first place. Nevertheless, seeing that everything now behaves as intended has been incredibly satisfying, because it means that we can spend less time wondering why the components won’t work, and more time actually thinking and building the product core.

Overview

BEdita is a ready-to-use, open-source, back-end API CMS made for mobile, IoT, and web applications.

I led the redesign of the structure of the outdated BEdita design system, addressing the growing design ←→ code debt, shaping and facilitating the product’s maintenance and its next features, while also streamlining the handoff process for a more efficient collaboration between the two teams that work on the product.

Note: a quite similar thing has been successfully done for the LaDante library as well, which brought us a more thoughtful and efficient way of navigating between the countless learning exercises variants.

A glimpse of the process:

Analyzed the old Adobe Xd file, where the first draft of the library was created.
Made a 1:1 comparison of the components inside that design library to their actual development state, making a list of what needs to be reworked, what components could benefit from a less fragmented structure, and what isn’t simply needed anymore.
Importing the existing library into a new Figma file, trying to speed up the more standard part of the process — typography sets, the colour palette, the icon sheet, and the spacing rulebook — by using AI and third-party plugins. The main issue you’ll face if you try to import a complex Adobe Xd file inside Figma is that the vast majority of the things will inevitably break into tiny pieces, making it easier to rebuild what you need from scratch than to fix everything. I’m a pretty fast builder, but it’s still something we had to consider when estimating the project’s cost.

While doing so, I took the opportunity to talk with my colleagues about how things have been done in the past. This was useful to trace a strategic path for the future of the product, and to properly fix every little thing that’s been left behind — from inconsistent spacing to deprecated tokens (the “debt” I was talking about before, the one that subtly slows teams down because of the time spent checking if what you’re using is outdated or not). I was then able to create a well-organised structure for every component family (e.g. creating just one Nav Bar component with 24 variants using freshly created product tokens, to make sure that other designers would never use wrong or old versions of that component, and that developers had a state-of-the-art component to use as a reference without the need for lengthy technical documentation.

I also took the opportunity to use this design system as a playground to explore with AI, experimenting with Cursor and the integrated Figma MCP protocol to test various components — and their variants — and to see if they worked as intended, without needing to bother any of my colleagues on the development team. I did show them what I created though, and they were as excited as I because they thought this could come in handy during the initial exploration phase, when the product usually doesn’t need to be scaled, nor have a complex structure yet.

A little not-that-off topic note on why I still enjoy doing these kinds of (more technical) projects:

I began working in the design field because I liked thinking of ways to facilitate complex things, both for other people and for businesses. If you got into it for the same reason as me, I strongly believe that what you do shouldn’t be only helpful to users, stakeholders, and clients, but to your colleagues as well.

While being able to work in nearly complete autonomy is a skill that I feel blessed to have developed back in my early career days, I like to remind myself that I wouldn’t be the designer I am now without the tight-knit, helpful, and cross-functional teams of people I was fortunate to collaborate with during these years. That’s why I believe that working on projects like this — although it may seem boring at first glance — is one of the many ways a designer has to express gratitude to those people.