01CONVERSATION / SYSTEM↗
02Bilingual
AI / BILINGUALOqaabi — An Arabic / English AI assistant
Designing a bilingual AI experience where language, directionality and conversation stay calm even as the system becomes powerful.
PRODUCT / EXPERIENCESELECTED CASE STUDY
01Approved product mockup / presentation visualScroll to explore ↓
INTERFACE STUDY
Oqaabi interface system
The supplied Oqaabi UI is presented as a browser-first AI experience with the original interface kept intact.
THE CONTEXT
Start with the why.
Oqaabi is presented as a bilingual AI experience. The design problem expands beyond translation: users should feel that both language modes are equally intentional, readable and complete.
01 / DISCOVERY
What the experience revealed.
Before shaping the interface, the work is framed around the user's mental model, moments of friction and the opportunities that can change the journey.
KEY OBSERVATIONS
01
Language changes reading direction, density and scanning behavior—not just words.
02
Long AI answers need strong visual anchors and progressive disclosure.
03
Users need an easy way to continue, refine or switch language.
PAIN POINTS
×
RTL/LTR inconsistency
×
Long responses become visually heavy
×
OPPORTUNITIESLanguage controls compete with the conversation
↗
Design bilingual parity into the component system
↗
Create response anatomy with scan points
↗
Keep language state visible but quiet
02 / INFORMATION ARCHITECTURE
Structure before surface.
The interface follows a clear information hierarchy so visual polish supports the product model rather than hiding it.
01Home→
02Language / intent→
03Conversation→
04Response details→
05Saved results
THE PROBLEM
Bilingual products can break when layout, hierarchy or interaction assumptions are built around one language. AI conversations add another challenge: responses vary in length, confidence and complexity.
DESIGN HYPOTHESIS
If language choice is treated as a product state—not a utility toggle—and the conversation model is designed for both LTR and RTL from the start, the experience can remain coherent without making the interface feel technical.
WHO IT SERVESMobile users interacting with an AI assistant in Arabic or English across everyday information and task-oriented conversations.
03 / USER JOURNEYFrom first intent
From first intent
to useful outcome.
The journey is intentionally expressed as a sequence of decisions, not a list of screens. This keeps the case study about behavior and product thinking.
01Choose language and intententry
02Start a conversationdecision
03Scan the responsedecision
04Ask, refine or switch languagedecision
05Save or act on the useful resultoutcome
04 / PROCESS
How the work moved forward.
01
01 — Understand
Map language-sensitive moments and identify where direction, content length or terminology could change the experience.
RTL / LTR auditConversation intentsContent hierarchy
02
02 — Model
Define a conversation structure that supports short answers, long-form responses, follow-up prompts and system states.
Conversation anatomyPrompt patternsState model
03
03 — Design
Build mobile screens with strong rhythm, readable response blocks and obvious affordances for continuation.
High-fidelity UIRTL variantsInteraction states
04
04 — Refine
Stress-test long strings, mixed-language content and edge cases so the visual system remains stable.
Responsive rulesQA checklistContent tests
05 / DESIGN DECISIONS
Small choices create the experience.
These are the decisions that make the final interface feel coherent rather than merely polished.
01
Design the layout for RTL from day one instead of mirroring at the end.
02
Keep assistant and user messages visually distinct without over-decorating them.
03
Use a persistent but quiet language control.
04
Give long answers breathing room and clear scan points.
06 / UI SYSTEM
A visual language that scales.
Instead of designing each screen independently, repeated behavior becomes a system. That gives future screens the same rhythm and makes implementation more predictable.
COMPONENTS
01Conversation bubbles↗
02Language switcher↗
03Prompt chips↗
04Response states↗
05RTL-aware spacing rules↗
Designed around the decision.
07 / OUTCOME
The case study demonstrates an approach to inclusive AI design where bilingual parity is part of the core product architecture, not an afterthought.
Specific business metrics were not available in the supplied portfolio material, so none are claimed.