Batec
Batec
Design System for La Meva Salut
Team
Team
Santi Mirabet - Product designer
Santi Mirabet - Product designer
Santi Mirabet - Product designer
Client
Client
CatSalut
CatSalut
CatSalut
Date
Date
July 2025 - January 2026
July 2025 - January 2026
July 2025 - January 2026
Overview
Overview
After years of organic and unstructured growth, the existing Design System at La Meva Salut had become outdated and was slowing down the design and iteration process instead of helping it.
My role was to rebuild the Design System from scratch, taking into account all the partial and improvised solutions that had been created over the years, making it scalable for the future, and ensuring it complied with WCAG 2.2 accessibility standards.
The result was a deliverable ready to be moved to Zeroheight, including foundations built with variables, accessible components with their corresponding documentation, and a set of customized templates.
After years of organic and unstructured growth, the existing Design System at La Meva Salut had become outdated and was slowing down the design and iteration process instead of helping it.
My role was to rebuild the Design System from scratch, taking into account all the partial and improvised solutions that had been created over the years, making it scalable for the future, and ensuring it complied with WCAG 2.2 accessibility standards.
The result was a deliverable ready to be moved to Zeroheight, including foundations built with variables, accessible components with their corresponding documentation, and a set of customized templates.
After years of organic and unstructured growth, the existing Design System at La Meva Salut had become outdated and was slowing down the design and iteration process instead of helping it.
My role was to rebuild the Design System from scratch, taking into account all the partial and improvised solutions that had been created over the years, making it scalable for the future, and ensuring it complied with WCAG 2.2 accessibility standards.
The result was a deliverable ready to be moved to Zeroheight, including foundations built with variables, accessible components with their corresponding documentation, and a set of customized templates.
Context
When the Design System is the bottleneck.
Context
When the Design System is the bottleneck.
Context
When the Design System is the bottleneck.
A tool screaming for a change.
A tool screaming for a change.
The existing Design System was a library that didn’t define usage criteria for any element and didn’t use Figma variables.
In other words, it was a UI Kit with components.
On top of that, many of those components were frequently detached to adapt to the needs of the next project.
Most of these detached and modified “ad hoc” components were eventually added back into the Design System, causing it to grow uncontrollably and creating duplicates.
The existing Design System was a library that didn’t define usage criteria for any element and didn’t use Figma variables.
In other words, it was a UI Kit with components.
On top of that, many of those components were frequently detached to adapt to the needs of the next project.
Most of these detached and modified “ad hoc” components were eventually added back into the Design System, causing it to grow uncontrollably and creating duplicates.
The existing Design System was a library that didn’t define usage criteria for any element and didn’t use Figma variables.
In other words, it was a UI Kit with components.
On top of that, many of those components were frequently detached to adapt to the needs of the next project.
Most of these detached and modified “ad hoc” components were eventually added back into the Design System, causing it to grow uncontrollably and creating duplicates.
The stepping stone.
The stepping stone.
After two years of pointing out that we were losing a lot of time in design iterations due to the lack of consistency, I proposed a couple of small changes in the way we worked with our Design System:
After two years of pointing out that we were losing a lot of time in design iterations due to the lack of consistency, I proposed a couple of small changes in the way we worked with our Design System:
After two years of pointing out that we were losing a lot of time in design iterations due to the lack of consistency, I proposed a couple of small changes in the way we worked with our Design System:
Adding variants with slot-based content for all components that used nested instances.
Setting up a Local content page for every project.
Local content
Project file
Option 1
Option 2
Option 3
Option 4
Title
Card title
Card subtitle
Card text
Infermer/a
Maria Coll Montaner
EAP Sant Just
Administratiu/va
Josep Pons
EAP Sant Just
Administratiu/va
Emili Guitart
EAP Esplugues
Els camps amb l’asterisc (*) són obligatoris
*
De què tracta la teva consulta? Posa-li un títol.
Ex: Dolor de queixal
Màxim 100 caràcters.
*
Escriu la teva consulta
Contingut
0/400
Slot component
Design System
Step N of N
Title
Lorem ipsum dolor sit amet.
Slot
Button
Button
Output
Project file
Pas 1 de 3
Selecciona el motiu
Problema de salut o malaltia
Medicació o tractament
Resultats de proves
Vacunes
Següent
Pas 2 de 3
Selecciona el servei
Els serveis poden variar depenent del motiu triat.
Unitat bàsica assistencial
Card title
Card subtitle
Card text
Infermer/a
Maria Coll Montaner
EAP Sant Just
Administratiu/va
Josep Pons
EAP Sant Just
Administratiu/va
Emili Guitart
EAP Esplugues
Anterior
Següent
Pas 3 de 3
Escriu la teva consulta
Els camps amb l’asterisc (*) són obligatoris
*
De què tracta la teva consulta? Posa-li un títol.
Ex: Dolor de queixal
Màxim 100 caràcters.
*
Escriu la teva consulta
Contingut
0/400
Anterior
Enviar consulta
Local content
Project file
Slot component
Design System
Output
Project file
Local content
Project file
Slot component
Design System
Output
Project file
This tweak allowed us to leave customized and project-specific content in the new Local content page and use fewer and more versatile container components, which reduced the time spent on design iterations by 50-80%, depending on the project.
Fun fact: one year later, Figma would add the native “slots” feature.
This tweak allowed us to leave customized and project-specific content in the new Local content page and use fewer and more versatile container components, which reduced the time spent on design iterations by 50-80%, depending on the project.
Fun fact: one year later, Figma would add the native “slots” feature.
This tweak allowed us to leave customized and project-specific content in the new Local content page and use fewer and more versatile container components, which reduced the time spent on design iterations by 50-80%, depending on the project.
Fun fact: one year later, Figma would add the native “slots” feature.
Stars aligned.
Stars aligned.
The impact of this change was noticeable and well received from the start.
At that same time, new accessibility regulations required several components to be updated, which gave me the opportunity to bring up the need to address the Design System once again.
That’s how I got the green light to dedicate half of my time over the next six months rebuilding it.
The impact of this change was noticeable and well received from the start.
At that same time, new accessibility regulations required several components to be updated, which gave me the opportunity to bring up the need to address the Design System once again.
That’s how I got the green light to dedicate half of my time over the next six months rebuilding it.
The impact of this change was noticeable and well received from the start.
At that same time, new accessibility regulations required several components to be updated, which gave me the opportunity to bring up the need to address the Design System once again.
That’s how I got the green light to dedicate half of my time over the next six months rebuilding it.
Problem
“Yes, but...”
Problem
“Yes, but...”
Problem
“Yes, but...”
I wasn’t starting from scratch.
I wasn’t starting from scratch.
While it was clear that the Design System needed a rework, La Meva Salut had been in use for over a decade and, despite all its flaws, users were familiar with it, so abrupt changes were not an option.
In consequence, the goal was to find a middle ground between the current “free for all” (different navigation patterns and components on every page) and a brand new standardized design that might feel too different from what users were used to.
While it was clear that the Design System needed a rework, La Meva Salut had been in use for over a decade and, despite all its flaws, users were familiar with it, so abrupt changes were not an option.
In consequence, the goal was to find a middle ground between the current “free for all” (different navigation patterns and components on every page) and a brand new standardized design that might feel too different from what users were used to.
While it was clear that the Design System needed a rework, La Meva Salut had been in use for over a decade and, despite all its flaws, users were familiar with it, so abrupt changes were not an option.
In consequence, the goal was to find a middle ground between the current “free for all” (different navigation patterns and components on every page) and a brand new standardized design that might feel too different from what users were used to.
The challenge
The challenge
The challenge
Design a system that works with the existing architecture and modifies the UI as little as possible, while still making it scalable for the future.
Design a system that works with the existing architecture and modifies the UI as little as possible, while still making it scalable for the future.
Design a system that works with the existing architecture and modifies the UI as little as possible, while still making it scalable for the future.
Foundations
Laying the groundwork.
Foundations
Laying the groundwork.
Foundations
Laying the groundwork.
Tokens are the name of the game.
Tokens are the name of the game.
The initial tasks were the standard of any Design System using Figma variables: defining the primitive tokens, then structuring them through semantic ones, and adding component-specific tokens where needed.
The initial tasks were the standard of any Design System using Figma variables: defining the primitive tokens, then structuring them through semantic ones, and adding component-specific tokens where needed.
The initial tasks were the standard of any Design System using Figma variables: defining the primitive tokens, then structuring them through semantic ones, and adding component-specific tokens where needed.
Lots of work in few pixels.
Lots of work in few pixels.
Since almost half of the icons in the Design System had been pulled from different icon libraries, the result was a mix of sizes, levels of detail, graphic styles, and stroke weights that made the lack of consistency hard to ignore.
Since almost half of the icons in the Design System had been pulled from different icon libraries, the result was a mix of sizes, levels of detail, graphic styles, and stroke weights that made the lack of consistency hard to ignore.
Since almost half of the icons in the Design System had been pulled from different icon libraries, the result was a mix of sizes, levels of detail, graphic styles, and stroke weights that made the lack of consistency hard to ignore.
To address the issue, I applied a 3-step process:
To address the issue, I applied a 3-step process:
To address the issue, I applied a 3-step process:
Classify
Classify
Separate icons from pictograms, the latter used for larger and more detailed variants.
Separate icons from pictograms, the latter used for larger and more detailed variants.
Separate icons from pictograms, the latter used for larger and more detailed variants.
Review
Review
Specify or correct usage inconsistencies and duplicates across the icon set.
Specify or correct usage inconsistencies and duplicates across the icon set.
Specify or correct usage inconsistencies and duplicates across the icon set.
Standarize
Standarize
Align sizes and weight values across the entire icon set to ensure visual consistency.
Align sizes and weight values across the entire icon set to ensure visual consistency.
Align sizes and weight values across the entire icon set to ensure visual consistency.
Components
The core.
Components
The core.
Components
The core.
An ounce of prevention is worth a pound of cure.
An ounce of prevention is worth a pound of cure.
Before creating or modifying any components, I swept the old Design System to clean up redundant elements.
Before creating or modifying any components, I swept the old Design System to clean up redundant elements.
Before creating or modifying any components, I swept the old Design System to clean up redundant elements.
Yup... we were using 3 different components for the same action.
Navigation card
Title
Description
Navigation item
Title
Description
Navigation list element
Date
Title
Description
Bread and butter.
Bread and butter.
With that set up, the following weeks were spent creating, refining, and improving more than 60 components with all their variants and nested instances.
With that set up, the following weeks were spent creating, refining, and improving more than 60 components with all their variants and nested instances.
With that set up, the following weeks were spent creating, refining, and improving more than 60 components with all their variants and nested instances.
Light
Dark
Light
Dark
Constant back and forth.
Constant back and forth.
Working on the components also implied a systematic review of the foundations to ensure that the tokens applied met the accessibility criteria.
Working on the components also implied a systematic review of the foundations to ensure that the tokens applied met the accessibility criteria.
Working on the components also implied a systematic review of the foundations to ensure that the tokens applied met the accessibility criteria.
Primary button
Background
Text
Secondary button
Background
Text
Tertiary button
Background
Text
Documentation
For the record...
Documentation
For the record...
Documentation
For the record...
Offloading the tedious work.
Offloading the tedious work.
For the component documentation, I used a mix of plugin to generate the anatomy and specs sections, and complemented it with usage guidelines and accessibility documentation aided by AI tools like Claude and ChatGPT.
For the component documentation, I used a mix of plugin to generate the anatomy and specs sections, and complemented it with usage guidelines and accessibility documentation aided by AI tools like Claude and ChatGPT.
For the component documentation, I used a mix of plugin to generate the anatomy and specs sections, and complemented it with usage guidelines and accessibility documentation aided by AI tools like Claude and ChatGPT.
Component: Add file
Component: Add file
Documentation sample
Documentation sample
Usage
Anatomy
Device
Stage
State
Accessibility
Usage
Anatomy
Device
Stage
State
Accessibility
Templates
Putting a bow on it.
Templates
Putting a bow on it.
Templates
Putting a bow on it.
One template to rule them all.
One template to rule them all.
Although outside the original scope of the project, I prepared a series of templates for landing, detail and other pages.
And just like I did with the components, I built them using slots that could handle local content, making it possible to recreate any existing page in La Meva Salut with a single template.
Although outside the original scope of the project, I prepared a series of templates for landing, detail and other pages.
And just like I did with the components, I built them using slots that could handle local content, making it possible to recreate any existing page in La Meva Salut with a single template.
Although outside the original scope of the project, I prepared a series of templates for landing, detail and other pages.
And just like I did with the components, I built them using slots that could handle local content, making it possible to recreate any existing page in La Meva Salut with a single template.
Highlight slots for local content
Local content
Highlight slots for local content
Speaking in their language.
Speaking in their language.
The reason for creating these templates was to present the project with a tangible visual output, adapted to an audience less familiar with design and more interested in the value it delivered.
So instead of showing a bunch of components and documentation, I opted for a small demo where, with just a few clicks, you could see how variables shaped the final design.
The reason for creating these templates was to present the project with a tangible visual output, adapted to an audience less familiar with design and more interested in the value it delivered.
So instead of showing a bunch of components and documentation, I opted for a small demo where, with just a few clicks, you could see how variables shaped the final design.
The reason for creating these templates was to present the project with a tangible visual output, adapted to an audience less familiar with design and more interested in the value it delivered.
So instead of showing a bunch of components and documentation, I opted for a small demo where, with just a few clicks, you could see how variables shaped the final design.
Not the heart of the matter, but...
Not the heart of the matter, but...
The old design system was called *drumroll* “Old Design system”. I couldn't pass up the chance to propose a more suitable name.
My requisites were that it should be:
The old design system was called *drumroll* “Old Design system”. I couldn't pass up the chance to propose a more suitable name.
My requisites were that it should be:
The old design system was called *drumroll* “Old Design system”. I couldn't pass up the chance to propose a more suitable name.
My requisites were that it should be:
A single word.
Easy to use in documentation and code.
In Catalan language.
As it is the primary language of the service.
Related to health or medicine.
Somewhat connected to the service’s healthcare sector.
A metaphorical concept.
More of an idea rather than a physical object.
After a brief brainstorm searching for a concept that could represent the core of a system, I landed on the idea of a heart, and that's how Batec (Heartbeat) came to mind.
After a brief brainstorm searching for a concept that could represent the core of a system, I landed on the idea of a heart, and that's how Batec (Heartbeat) came to mind.
After a brief brainstorm searching for a concept that could represent the core of a system, I landed on the idea of a heart, and that's how Batec (Heartbeat) came to mind.
Rumor has it that it’s also due to the repeated publishing of the library felt like a pulse that pushed the blood modifications across all vessels projects, but that remains to be confirmed. 🙃
Rumor has it that it’s also due to the repeated publishing of the library felt like a pulse that pushed the blood modifications across all vessels projects, but that remains to be confirmed. 🙃
Rumor has it that it’s also due to the repeated publishing of the library felt like a pulse that pushed the blood modifications across all vessels projects, but that remains to be confirmed. 🙃
Retrospective
Key takeaways.
Retrospective
Key takeaways.
Retrospective
Key takeaways.
Everyday is a school day.
I learned some things throughout this project, some of them self-taught, some of them unexpected. But if I had to point out what made the biggest difference for me, it would be:
I learned some things throughout this project, some of them self-taught, some of them unexpected. But if I had to point out what made the biggest difference for me, it would be:
I learned some things throughout this project, some of them self-taught, some of them unexpected. But if I had to point out what made the biggest difference for me, it would be:
The challenges begin long before drawing the first line in Figma.
The challenges begin long before drawing the first line in Figma.
Advocating for change was part of the job: using facts and arguments to show that evolving the Design System was the right way to go.
Advocating for change was part of the job: using facts and arguments to show that evolving the Design System was the right way to go.
Advocating for change was part of the job: using facts and arguments to show that evolving the Design System was the right way to go.
Constraints are not the enemy.
Constraints are not the enemy.
Working within an existing system rather than starting from scratch can help frame problems and guide decisions instead of limiting them.
Working within an existing system rather than starting from scratch can help frame problems and guide decisions instead of limiting them.
Working within an existing system rather than starting from scratch can help frame problems and guide decisions instead of limiting them.
Overcome analysis paralysis.
Overcome analysis paralysis.
You can draw inspiration and learn from many Design Systems, but in the end the product has to work for your own context.
In other words, what other DS do shouldn’t be treated as rules set in stone.
You can draw inspiration and learn from many Design Systems, but in the end the product has to work for your own context.
In other words, what other DS do shouldn’t be treated as rules set in stone.
You can draw inspiration and learn from many Design Systems, but in the end the product has to work for your own context.
In other words, what other DS do shouldn’t be treated as rules set in stone.
AI is a powerful tool…
AI is a powerful tool…
...But it’s still just a tool. It’s as important to knowing when to use it and when it’s faster or better to do the work yourself.
...But it’s still just a tool. It’s as important to knowing when to use it and when it’s faster or better to do the work yourself.
...But it’s still just a tool. It’s as important to knowing when to use it and when it’s faster or better to do the work yourself.
More projects
More projects
