The Bioteksa Design System was created to bring everything together and scale up the design for both internal tools and public apps on web and mobile. It keeps things consistent while still being flexible enough to handle all kinds of projects. Basically, it gives us a solid design foundation that’s easy to adapt, making the development process a lot smoother and faster.
Challenge
How can I create a Design System fast enough so Bioteksa can incorporate multiple brands without compromising scalability for the future and taking into account responsive design for different software solutions?
discovery
Bioteksa needed a design system to make things easier and more consistent across all its digital products. As the company kept growing and launching more apps—both internal tools and public-facing ones—things started to get a bit messy. UI components, typography, and how users interacted with the apps weren’t always the same, which affected the brand’s look and feel. On top of that, the design and dev teams were constantly having to reinvent the wheel, redoing components without a clear guide, which slowed everything down.
Research
The Bioteksa Design System is built to empower the DEV Team with an adaptable, scalable, and easy-to-use framework. Leveraging the power of Figma variables and an optimized setup, the system ensures flexibility across different platforms, brands, and themes, making it simple to create cohesive user experiences.
Responsive Design
Bioteksa’s design system is built with responsiveness at its core, ensuring seamless user experiences across desktop, tablet, and mobile devices. The system leverages Figma variables to easily control the layout based on screen size, enabling elements to adapt dynamically depending on the device.
Editable Artboards with Min/Max Widths
Designers can easily set up responsive artboards that automatically adjust based on minimum and maximum width values, ensuring that components are optimized for all screen sizes.
Show/Hide Elements
Figma variables allow components to be shown or hidden based on the device type, ensuring that only relevant content is displayed on desktop, tablet, or mobile views. This eliminates the need for multiple design files for different platforms.
Scalability Across Different Brands and Color Systems
The design system is set up to handle multiple brands while keeping the user experience consistent across all of Bioteksa’s products. Thanks to Figma variables, it’s super easy to customize colors and components for each brand. You can quickly swap out colors, components, and visuals based on different brand styles, without messing with the overall structure or layout.
Simple and Quick Setup
The Bioteksa Design System offers an intuitive setup that allows teams to start designing quickly and efficiently.
How does the System work at a Variable level?
The Bioteksa Design System makes it super easy to work with different brand colors and switch themes between brands or light/dark mode with just one click. Plus, it’s flexible enough to add more brands whenever needed.
Here’s how it works: Every color in the palette gets its own variable (from 0 to 100), and each brand’s colours are tied to these variables. Then, we create another variable that stores light and dark mode versions of each color, using Theme Tokens. Finally, these light/dark tokens are linked to Main Tokens, which control specific parts of the design. These Main Tokens manage the switching between dark/light modes and brand themes seamlessly.
Results
Did the Design System work?
Bioteksa’s goal was to create a Design System that works across multiple platforms (both mobile and web) and can easily scale to handle more brands. This way, they can create different brand experiences and solutions for their customers as the company grows.
Scalability
The system was designed to grow, and it really proved its worth. We were able to easily add new brands and themes without needing to start from scratch. This flexibility meant we could keep everything looking consistent across different platforms while adapting to what each customer needed.
Development Time
Thanks to the reusable components and Figma variables, we cut down development time. In fact, we managed to launch two apps from the ground up—the Bioteksa app and Ingeniero Pro app—in record time. The Bioteksa app was built between January 2022 and December 2022 and its web version was published February 2023, and Ingeniero Pro from March 2023 to December 2023. What’s even more impressive is that we did all of this with a small dev team, proving how efficient the design system really is.
Team Adoption
The whole team, from designers to developers, got on board with the design system really quickly. It made collaboration smoother because everyone was using the same set of tools and guidelines. This helped avoid confusion, reduced errors, and made the workflow way more productive overall.
Bioteksa App Desktop
Bioteksa App tablet
Bioteksa App mobile
Ingeniero pro app
