Bessie UI cover picture showcasing a few components and typography styles

How did I build Bessie UI to make my design process faster?

I designed a slowly growing UI kit for SaaS software based on my previous experience.
I published it first in 2023 using Figma's community feature and later made it available through Gumroad, and I plan to update only the paid version.

Client

self-initiated project

Roles

UX/UI design

Year

from 2023

Figma Community version (preview)

Check out the preview now!

Full (paid) version

Buy yours now!
Bessie UI was initially designed as a UI kit for a friend’s website. However, during the process of creating it, I found so much enjoyment in it that I decided to make a copy of the original and started to iterate on it to address a different need.

It was quite difficult working on Bessie UI in my free time

I realized that it is quite challenging to find a consistent and flexible UI kit on the market that supports common usability and accessibility patterns well. I even tried out a few paid ones, and I realized that I have to learn to use it and tailor it to every project, which seemed to be too much of a burden. So, I decided to create my own UI kit.
Creating the core elements, such as typography and colour system, and defining the list of necessary components required a lot of effort.
It took me several months, a considerable amount of work, and lots of work over weekends to create the first, still alpha version of Bessie UI.

I almost dropped the project

I thought it would be a fairly easy task with the experience I have in Design Systems and UI kits, so I was embarrassed and stressed out because it was hard to accept that carefully crafting a complex UI kit alone is a tough task and that it takes a lot of time.

I struggled, but didn't stop

After a couple of months of battling with anxiety and tiredness, I decided to take a different approach. I focused on what makes me anxious about the project, and found solutions.
  • I wasn't sure enough about what I do will work. So, I asked a UX/UI designer friend to look thoroughly through the UI kit and provide me with feedback. I also decided to release the latest version to the Figma community to gather additional feedback.
  • I realized that I could only do this project iteratively since designing a vast UI kit alone takes a lot of time and effort, so I permitted myself to slow down the development process so I don't overwork myself.

What happened with Bessie UI?

After releasing the UI kit in the Figma Community, I received valuable feedback and began using it in other projects outside of my full-time job. By combining what I learned from those projects using Bessie UI, I decided to continue to improve the kit with them.
Nowadays, I aim to release updates and fixes whenever I have time to work on it so I don't stress over it much.

Learning while doing

By allowing myself to slow down, I learned more about my limits and gathered a bit of new knowledge about best practices in both designing a flexible and complex UI kit and strategizing my approaches.

Next steps

Since Bessie UI reached its first milestone of getting published on Gumroad as a paid resource, the Figma Community version will start to differ from the Full version.
My goal is to update the Full version of Bessie as often as I can, but since I work alone on the project in my free time, I appreciate any feedback and help from anyone!

Notes on the paid version

The current version (v1.0) is the same as what you can find in the Figma Community. This is why this version is a pay-what-you-want version. New updates are going to be available only in the paid version. For testing purposes, the Figma Community version will stay but won't receive the same updates as the paid version.

Have a project in mind?

Let's start a conversation. Tell me about what you are looking for and I'll be in touch!
Get in touch