hi-res-tabby.png

Tabby.ai

Internationalisation, design systems and right-to-left styling. How we built Tabby.ai's website component library






Introduction

Meeting Growth Demands

Tabby AI, a real trailblazer in the UAE's "Pay in 4" space, hit a crucial point.

Their rapid expansion meant they needed to scale up their design system and composable infrastructure to work hand-in-hand with their website.

Our mission was to craft a comprehensive component library, the very heart of Tabby AI's digital experience. This wasn't just about code; it was about building a seamless, accessible experience for users across diverse markets, putting internationalisation (i18n) and top-notch accessibility at the core from day one.

Frame 1874426423.png

Infrastructure

Collaborative build & integration

The whole process felt like a true partnership between our crew and the brilliant developers at Tabby AI. We rolled up our sleeves together, focusing on creating a component library that wasn't just visually slick but also incredibly functional and easy for their team to use and extend.

Because of using the latest Storybook component browser, we were able to document and test each component in isolation, which honestly made the whole development process smoother and faster. It fostered a fantastic spirit of collaboration and innovation, allowing both teams to see progress clearly and iterate quickly. A special shout-out to their designer, Sergii, who documented and scoped components in a Figma environment, like I've never seen before.

It wasn't just about delivering code; it was about building a shared understanding and a toolset that would empower their internal teams long after our direct involvement wrapped up.

picturebook.png

Publishing content

Streamlining Sanity and cutting debt

Alongside scaling the frontend infrastructure, we tackled a crucial backend migration: upgrading Tabby AI's content platform from Sanity v2 to v3. This wasn't just a version bump but a golden opportunity to slash accumulated development debt and completely rethink their content structures. We checked their existing schemas, identifying pain points and areas for simplification.

The move to Sanity v3 allowed us to implement much more reusable data structures, meaning content could be created once and surfaced dynamically across different parts of their site and apps. This made the editors' lives easier and drastically reduced redundancy and potential inconsistencies. The result was a faster, cleaner, and far more maintainable Sanity Studio that gave them a gold standard in editorial experiences.

Frame 1874426422.png
NEXT PROJECT

Global Cycling Network

SanityNext.jsVercel
View case study

Get in touch

Book a meeting with us to discuss how we can help or fill out a form to get in touch