Overview

Uttra is a Saudi AI app builder that lets anyone build web apps by chatting in colloquial Arabic, no coding required.

The product had grown fast, but its interface had grown without a system. Screens used inconsistent colors, buttons, and surfaces, and key moments like choosing a plan looked disconnected from the rest of the product.

The design goal was to build a scalable design system from scratch and apply it to the screens that matter most for activation and revenue.

The Problem

• No design system: colors, buttons, badges, and cards varied from screen to screen

• The pricing modal was fully light-themed inside an otherwise dark product, breaking visual continuity at the moment of purchase

• The most popular plan had almost no visual emphasis, and CTAs had no clear hierarchy

• Primary, secondary, and destructive actions looked alike on the plans and credits screen

• No defined rules for Arabic RTL layouts, leading to inconsistent mirroring and number formatting

Research & Insights

• Audited every core screen to map inconsistencies in color, typography, spacing, and components

• Benchmarked leading AI app builders to understand pricing, credits, and prompt-to-app patterns

• Found that localization should come through language, voice, and RTL, not heritage colors layered on a global tech brand

• Identified that AI-generated screens were inventing data during visual-only redesign tasks, a product-level trust risk

The Approach

• Built a dark-first design system from scratch: semantic color tokens with distinct light and dark values, Cairo type scale, and an 8pt spacing system

• Reserved the brand gradient for high-stakes moments only: primary CTAs, active states, and progress indicators

• Documented explicit RTL mirroring rules: directional icons flip, logos and numerals do not

• Redesigned the "ماذا ستبني اليوم" home screen around a clear prompt input and a single primary "New Build" action

• Rebuilt the pricing modal in dark mode, giving the most popular plan a gradient highlight and a clear CTA hierarchy

• Restructured the plans and credits screen with distinct primary, secondary, and calm destructive actions, unified status badges, and proper empty states

Impact

• Delivered Uttra's first end-to-end design system in one month, shipped to a live product in active paid acquisition

• Unified the full purchase journey, from home screen to plan selection to credits, under one consistent visual language

• Gave the revenue-critical moments a clear action hierarchy, putting the brand gradient where users decide to pay

• Established Arabic-first RTL rules that make every future screen faster to design and build

• Flagged AI data hallucination as a product trust risk to the engineering team, shaping how redesign tasks are handled

What's Next

Measuring the impact of the redesigned pricing and credits flow on plan upgrades, and extending the design system to onboarding and the project preview experience.