At Border UX, we love helping great companies shine, and we recently had an amazing opportunity to partner with Cymbiotika, a true leader in the health and wellness space. They were experiencing incredibly fast growth, which is fantastic! However, all that growth meant that their digital presence—their website and mobile apps—was becoming a bit inconsistent. Since these platforms were built independently over time, it became increasingly challenging for them to maintain a cohesive and unified brand identity. They recognized the need for a more integrated and scalable approach to their digital infrastructure.
This is where Border UX came in. Our mission was to provide a strategic partnership to the Cymbiotika team, helping them build a seamless and cohesive digital experience that truly reflected the premium quality of their products. We teamed up with them to develop a robust design system, a centralized source for all their design and code assets. This system was powered by our proprietary UI-Kit and our powerful design-to-code tool,
The ultimate goal was to make their entire product development process more efficient, ensure their products were visually consistent across all platforms, and empower their teams to collaborate more effectively than ever before.
The challenge: growing pains and fragmented assets
As Cymbiotika scaled, their design assets became disjointed. The lack of a unified design system resulted in inconsistent styling and slow delivery times. The development team was burdened with manual, one-off fixes and bugs, which hindered their ability to innovate. They were caught in a cycle of reactive work, with the limitations of Shopify's Liquid templating system adding to their challenges.
The solution: A robust system for design and code
Border UX teamed up with Cymbiotika to build a comprehensive design system directly on their existing Shopify platform. The solution was a multi-faceted approach, focusing on:
A Centralized Figma Design System: Using a tool called Recursica, they created a single source of truth for all design elements.
Migrating to React: Front-end components were moved to React, a more modern and scalable framework.
Component Centralization: All reusable components were consolidated into a single npm module, making them easy to access and update.
"Automation Magic": They created a direct link between Figma and Recursica, automating the update process and eliminating the need for manual handoffs between design and development. This saved a significant amount of time and reduced errors.
The result: speed, consistency, and confidence
With the new design system in place, Cymbiotika's designers can now build pages and implement changes faster and with less custom coding. The system provides a consistent definition for all digital elements, allowing for easy updates and flexible features like swapping themes for promotions or switching between dark and light modes.
Jared Radtkey, Cymbiotika's Chief Digital Officer, highlighted the impact: "Our designers are able to build pages and push changes faster with less custom coding, and they're able to be more confident in what they're doing because they're building with elements that they know have already been QA-tested and used across our digital ecosystem."
This partnership demonstrates how a strategic approach to design and development can transform a brand's digital experience, paving the way for continued success and innovation.
ABOUT THE AUTHOR
Aaron loves innovative solutions to complex problems. He's a strategist and designer who fights fiercely for great products. His vast experience and focus on process encourages new thinking in others.
