Design System Foundations

There was no alignment among the client’s 6 products, in terms of branding, visual patterns or components point of view - and there was no single design system that could bring them together.

I started by facilitating a post-up workshop to understand the pain points of the main users (my fellow designers), results are represented in this affinity map: 

After setting up an inventory of all design components, I laid out the foundations of a design system, including:

While I was designing components, the affinity map helped me focus on specific areas when solving problems. The logic of the components followed atomic design principles. Some examples:

Once the library reached maturity, I captured feedback from designers & developers. After a few iterations, I presented the project to developers, designers, product owners & clients, and helped my colleagues familiarise themselves with the design system. Some examples of products created using the system:

The design system became the most-used library in the agency, not only improving the UX designers’ workflow, but also making it easier to onboard new starters.

"Before I was hired here, I was on a project that didn't have any design guidelines at all. I had to start everything from scratch and I hit a couple of blockers: it was very difficult to keep consistency in UI and quick ideas were taking way too much to implement because I needed to create some form of guidelines by myself. Also the cleanup was a very difficult process.

When I joined the team and got assigned to work on a couple of products that had your design system with clear rules of UI, it helped me to shift my focus more to UX, flows and overall look and feel. For a new joiner, be it senior or mid-level, these are really helpful as they help organize my time efficiently as I can now focus on more important aspects.

Personally I also learned a lot from it from a technical perspective as I've also inherited a couple of assignments that required new components, based on your guidelines."

"I believe there is a huge list of pro's of the design guidelines you have created. These give me the structure that I need to create a consistent design, no matter what project I'm on.

The design systems offers me comfort instead of uncertainty and they help me out a lot in justifying the choices that I make. As a beginner in this field, these are everything I needed. I learn a lot from it by even using it during the process, it helps me keep a standard and avoid inconsistencies in the design."