A Search Engine Designed from Right to Left.
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 big boys 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. We had 6 weeks. Yalla!
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 big boys 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.
We had 6 weeks. Yalla!
No Brand.
6 Weeks.
Inshallah.
True startup, moving fast and breaking things. But also...
No colors.
No typography.
A questionable logo.
Before designing a single pixel, we needed to decide which features to tackle, and how the whole experience should feel.
Luckily, their engineering team was using shadcn/ui as their base. Fast, flexible, and just opinionated enough to give us a solid starting point without locking us into a generic personality.
No Brand.
6 Weeks.
Inshallah.
True startup, moving fast and breaking things. But also...
No colors.
No typography.
A questionable logo.
Before designing a single pixel, we needed to decide which features to tackle, and how the whole experience should feel.
Luckily, their engineering team was using shadcn/ui as their base. Fast, flexible, and just opinionated enough to give us a solid starting point without locking us into a generic personality.
An interface with no face, yet!
First order of business, look around.
We audited every major search engine and LLM to figure out what we would need.
To the surprise of literally nobody, they all look practically the same. But it's for a reason, the status quo works. No need to reinvent that wheel.
With the audit we had our component shopping list. We had shadcn underneath.
How do we make it Arabic?
An interface with no face, yet!
First order of business, look around.
We audited every major search engine and LLM to figure out what we would need.
To the surprise of literally nobody, they all look practically the same. But it's for a reason, the status quo works. No need to reinvent that wheel.
With the audit we had our component shopping list. We had shadcn underneath.
How do we make it Arabic?
Prying open the cultural neutrality.
Most software interfaces are culturally neutral. They belong to their industry and niche, but rarely their location.
That couldn't be the case with Fyler. So we went hunting for our Design Principles: elements that could give us a baseline, specific enough to feel like something, restrained enough to hold up across a whole interface.
Colors of cultural relevance.
Iconography from daily life.
Religious patterns.
Arabic calligraphy.
Prying open the cultural neutrality.
Most software interfaces are culturally neutral. They belong to their industry and niche, but rarely their location.
That couldn't be the case with Fyler. So we went hunting for our Design Principles: elements that could give us a baseline, specific enough to feel like something, restrained enough to hold up across a whole interface.
Colors of cultural relevance.
Iconography from daily life.
Religious patterns.
Arabic calligraphy.
Bringing it all home.
All of this boiled down into several design proposals, one of which we all particularly liked and dove into head-first.
We designed a software 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.
Bringing it all home.
All of this boiled down into several design proposals, one of which we all particularly liked and dove into head-first.
We designed a software 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.
Design is product management.
Good designers can make interfaces shine in Figma. Great ones can carry it through to production.
We worked elbow-to-elbow with their engineers and CTO to define and prioritize the features we wanted to tackle and we all understood had the most value. Both for the company and its users.
%20(1).webp)
.webp)
.webp)
.webp)
Design is product management.
Good designers can make interfaces shine in Figma. Great ones can carry it through to production.
We worked elbow-to-elbow with their engineers and CTO to define and prioritize the features we wanted to tackle and we all understood had the most value. Both for the company and its users.
Design is product management.
Good designers can make interfaces shine in Figma. Great ones can carry it through to production.
We worked elbow-to-elbow with their engineers and CTO to define and prioritize the features we wanted to tackle and we all understood had the most value. Both for the company and its users.
Good design thrives at the handoff.
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.
Good design thrives at the handoff.
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.
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
Fast forward...
A new logo joined chat.
.webp)
A year after launching, Fyler rebranded to Jeem: same product we built, new name, new look. Normally, that means manually reworking every screen, one by one.
Except it didn't. The new brand came with just a palette and a symbol, so we worked out how it should behave in product. Once we had that, updating the system's values and components pushed the new look across every screen.
A full product rebrand in a week, instead of the slow, error-prone slog it'd be without one. Build the system right once, and every job after it gets cheaper.
Fast forward...
A new logo joined chat.
A year after launching, Fyler rebranded to Jeem: same product we built, new name, new look. Normally, that means manually reworking every screen, one by one.
Except it didn't. The new brand came with just a palette and a symbol, so we worked out how it should behave in product. Once we had that, updating the system's values and components pushed the new look across every screen.
A full product rebrand in a week, instead of the slow, error-prone slog it'd be without one. Build the system right once, and every job after it gets cheaper.
.webp)
.webp)
Shoutouts
Saeed Saif AlGhurair
Ahmed El-Shazly
Mohamed Berrim
Aidar Samerkhanov
Jean Massad
Javier García
Ga Huy
Shoutouts
Saeed Saif AlGhurair
Ahmed El-Shazly
Mohamed Berrim
Aidar Samerkhanov
Jean Massad
Javier García
Ga Huy
Konpo is the product design team we were looking for. They moved at startup speed alongside our engineers, like a true part of the team. They drove designs all the way from ideas and concepts, through to a successful implementation by engineering. Always proactively.
Konpo, in six weeks, working elbow to elbow with Fyler's engineers and CTO to decide which features mattered most. Fyler is an AI search engine built for the Middle East, founded by Saeed Saif AlGhurair, who called us the product design team they were looking for: moving at startup speed alongside the engineers and driving designs through to implementation.
We started from the shadcn/ui base Fyler's engineers already used and audited every major search engine and LLM to build the component list, since people already know how search should work. Then we gave it a local face with principles drawn from the region (colors of cultural relevance, iconography from daily life, religious patterns and Arabic calligraphy), so the product feels at home in the Gulf without being flashy. More on how we build design systems.
Because the system was built inside their framework, not next to it. Figma variables map 1:1 to the code tokens and every component lives where the engineers already work, so when the Jeem brand arrived a year after launch (a palette and a symbol, nothing more) we worked out how it should behave in product, updated the system's values and components, and the new look reached every screen. Build the system right once, and every job after it gets cheaper.
Yes. The color modes are Figma variables, so the same components render in light and dark without a second set of screens, and the Jeem rebrand shipped in both. Everything is designed from right to left first, since Arabic is the product's home language.
.webp)
.webp)
.webp)
.jpg)
.webp)
.webp)
.webp)
.webp)