Designing a Search Engine from Right to Left
We deployed a design system in Arabic on top of shadcn, while defining the brand on the fly, in 6 weeks.
Fyler is a search engine made for the Middle East. They answer truly localized queries like: Where can I find a good فطور spot? Something the usual suspects. don’t do very well.
Their team came to us with a clear goal and an open canvas. In their own words: “We want it to look and feel world-class, but it should live and breathe in Arabic.”
Eager to hit the ground running. Turned out, they didn’t really have a brand. Or a fully defined product. So we set out to build the plane while flying it, in 30 dialects.
Yalla!
Software is culturally neutral
We started by auditing every major search/answer engine. To the surprise of literally nobody, they all look practically the same.
Most software interfaces are culturally neutral. They belong to their industry and niche, but rarely their geographic location.
Prying the neutrality open
That sent us digging into the region’s visual language, history, culture, art, symbolism into our design principles. To find something that we could make distinctly ours.
Bringing it all home
We designed a UI that lives and breathes the Gulf. Not too flashy but immediately recognizable. Subtle accents that make you hover over things. Background animations that produce delight but with restraint.
The Fyler team wanted a product that could confidently sit at the adults’ table.
And habibi... it now really could sit at that table
Good design thrives at the handoff
Pretty design is nothing if engineers ignore it at implementation.
We built the system inside their framework, not next to it. Figma variables mapped 1:1 to their tokens. Every component lived where their engineers already lived.
Good for the tense moments of a handoff. Even better as the product scales.
Want to learn how we did it all in 6 weeks? Want to see how the design system held up in a right-to-left layout? Want to see how we define a brand while working on product?