Qalam AI Studio

Problem Statement

The product had a strong creative foundation, but adding a broad AI suite introduced a different kind of UX problem.

The question was not simply:

Where should we put the AI tools?

The real question was:

How might we introduce powerful AI tools into an already rich mobile design editor without making the product feel heavier, less trustworthy, or less Arabic-first?

The product already supported templates, typography, stickers, media editing, layers, export settings, premium content, and culturally specific design categories. AI could make creation faster, but it could also create new friction: more menus, more uncertainty, more paid moments, and more processing-heavy flows.

The main risks at a glance:

#	Risk	Why it mattered
1	Tool Overload	Image generation, enhancement, editing, background removal, text assistance, video assistance, Arabic typography tools, and credits could easily become a long list of disconnected tools.
2	Loss of Context	If users had to leave the editor to use AI, the workflow would feel fragmented. AI needed to appear while users were already editing, selecting, exporting, or starting a design.
3	Trust Friction	AI output can be unpredictable. Users needed a way to preview, compare, regenerate, edit, or dismiss results before applying changes to their canvas.
4	Credit Transparency	AI actions have a cost. If credit usage appeared too late, the experience could feel transactional or unfair.
5	Arabic-first Quality	Arabic calligraphy, diacritics, RTL behavior, curved Arabic text, cultural templates, and bilingual typography were not edge cases — they were central to the product identity.

My Role

I worked across research synthesis, UX strategy, interaction design, information architecture, AI workflow design, and design system thinking for the AI tools experience.

My contribution included:

• Reviewing anonymized behavioral signals and aggregate product analytics to understand friction and high-intent moments.
• Studying public product patterns, app marketplace positioning, and visible user expectations around mobile creative tools.
• Mapping the AI tool ecosystem into clearer user-intent categories.
• Defining contextual AI entry points inside the editor.
• Designing interaction patterns for generate, improve, preview, apply, regenerate, retry, dismiss, and export.
• Framing AI Credits as a trust problem, not only a monetization mechanic.
• Defining reusable UI patterns for tool cards, action chips, result previews, credit badges, loading states, empty states, and error recovery.
• Shaping Arabic-first AI workflows such as calligraphy and diacritics support as strategic product differentiators.

To keep this case study portfolio-safe, confidential implementation details, private roadmap information, raw analytics exports, identifiable session data, internal revenue numbers, provider logic, model configuration details, and proprietary product screens are intentionally excluded or generalized.

One-minute Summary

The product had clear traction as an Arabic-first creative app, with public positioning around Arabic fonts, templates, photo/video design, calligraphy, and AI-assisted creation. Public product signals showed that users valued fast creation, culturally relevant templates, Arabic typography, and mobile-first editing.

At the same time, anonymized behavioral signals showed that adding AI could not be treated as a separate feature drop. Across a large aggregate sample, users were actively moving through multi-step creative flows, but some interactions showed signs of hesitation, unclear feedback, repeated tapping, and recovery friction — especially in editor and image-heavy moments.

That combination told me two things: people were engaged enough to move through the product, but parts of the experience still needed clearer feedback, stronger affordance, and more resilient handling.

My design direction was to frame AI as a system, not a destination. The solution connected five pieces:

#	Piece	Purpose
1	AI Hub	A clear place to browse the full suite.
2	Contextual AI actions	Editor-level actions based on the selected object.
3	Create-new-design shortcuts	AI quick starts at high-intent moments.
4	Preview-first AI results	Users stay in control before changes land on the canvas.
5	Transparent AI credits	Paid AI actions never feel surprising.

The outcome was a clearer product direction and a reusable AI interaction model that could support multiple tools without redesigning every feature from scratch.

Product Context

The product sits between three product categories:

• a template gallery for fast creation,
• a mobile design editor for hands-on control,
• and a culturally specific creative tool for Arabic and bilingual design.

This context matters because the user mindset changes throughout the product. On the home screen, users browse. In the create sheet, they decide how to start. In the editor, they make detailed changes. In export, they care about format, quality, and sharing. In saved projects, they return to reuse or improve old work.

AI had to support all of those moments, not just generate something from a prompt.

Public product signals that shaped the work:

Signal	Why it mattered for design
Strong public positioning around Arabic-first design and mobile creativity	The AI system needed to be scalable and understandable, not experimental or niche.
Arabic/English design, RTL text, calligraphy, curved Arabic text, templates, photo/video export	The strongest opportunity was not generic AI; it was Arabic-first AI assistance.
Subscriptions, premium content, and credit-based AI patterns in the category	AI needed cost transparency and trust-building around paid actions.
iOS and Android presence	Patterns had to be flexible enough for different platform constraints and device performance.

Research Inputs

I looked at three layers of evidence.

1. Public Market Signal

I reviewed how comparable creative apps present themselves and what users publicly praise or complain about. The useful themes were consistent: Arabic fonts, calligraphy, ready-made templates, fast creation, social content, invitations, business visuals, and mobile editing.

2. Behavioral Analytics

I reviewed anonymized aggregate behavioral data to understand where users clicked, hesitated, went back, or triggered frustration signals. The goal was not to prove that AI should exist; that direction was already part of the product strategy. The goal was to understand where AI could reduce effort without creating new friction.

3. Workflow Heatmaps

I reviewed generalized workflow heatmap patterns across high-level surfaces such as home, create, editor, export, saved designs, and bottom navigation to identify where intent already existed.

The most useful shift was this:

I stopped asking where AI would look impressive and started asking where users were already trying to do something.

Behavioral Baseline

The aggregate behavioral baseline gave a useful signal before zooming into specific AI flows.

Signal	Design Meaning
Strong multi-step session behavior	Users were willing to move through complex creative flows.
Repeated interaction around key editing surfaces	Some controls needed clearer affordance, feedback, or prioritization.
Friction around media-heavy moments	AI flows needed to account for processing time, image size, and recovery.
Visible hesitation around unclear actions	AI entry points needed to be explicit, contextual, and outcome-driven.
Error and recovery patterns in complex flows	Failure states had to be designed as part of the core experience, not as edge cases.

These signals did not point to one single broken screen. They pointed to a product environment where users were active, but the interface needed more clarity and feedback in key areas.

This was especially relevant for AI. AI interactions are already abstract: the user taps, waits, and trusts the system to do something useful. If the existing product already shows signs of unclear feedback in some moments, then AI cannot afford to be vague.

What this changed in my thinking:

Every AI action needs an obvious trigger. Every tap needs visible feedback. Every generation needs a clear progress state. Every result needs preview and control. Every failure needs a recovery path. Every paid action needs transparent credit logic.

Heatmap Insights

The heatmap review was useful because it showed where users already had intent.

Home and Template Discovery

High-level attention patterns appeared around search, category tabs, template cards, premium markers, favorites, and bottom navigation. Seasonal and culturally specific categories were meaningful because they reflected real creation contexts.

What I took from this: the home screen is not just a browsing surface. It is the first creative decision layer. AI can help here, but only if it supports template discovery instead of interrupting it.

Useful AI opportunities included: generate a similar design, personalize this template, create a caption for this occasion, translate or localize copy, and suggest Arabic text styles for the selected context.

Create-new-design Sheet

The create sheet was a clear high-intent moment. Users interacted with media sources like camera, video, and photo, plus format choices like social ratios and custom sizes.

This is where the user decides how the design begins. That made it a natural entry point for AI.

Design direction: the create sheet should not only ask "what size do you want?" It can also ask "what kind of start do you need?"

Editor and Canvas

The editor patterns showed interaction around the canvas, selected object controls, top actions, layer controls, bottom toolbar, crop, replace, background removal, AI edit, and text/color editing panels.

That reinforced the most important product decision: AI should be contextual.

AI actions should follow the object, not force the user to leave the object.

Export and Saved Projects

Export patterns showed attention around resolution, file format, save, copy, share, PDF, and project/template assignment. Saved-project behavior showed that users return to previous work.

That expanded the AI scope. AI should not only help with first-time generation. It should help users improve, resize, reuse, and adapt existing designs.

Public Feedback

The useful review patterns were consistent across public user expectations for Arabic-first creative tools.

1. Arabic typography is the reason many people choose this kind of product.

Users value Arabic calligraphy, Arabic fonts, RTL control, and culturally relevant visual expression. This matters because it changes the AI strategy. A generic AI image generator would be easy to copy. Arabic-first tools — diacritics support, calligraphy, curved Arabic text, Kashida, bilingual typography, cultural templates — are much closer to the product's real advantage.

Design implication: Arabic text assistance should not sit at the edge of the suite. It should be framed as a core, differentiated workflow.

2. Templates are the natural starting point.

Public creative-app behavior shows that many users begin with templates for invitations, quotes, promotions, marketing, sports, logos, and social content. Workflow signals also showed strong attention around template discovery and category navigation.

Design implication: AI should strengthen the template flow instead of competing with it.

choose template → personalize → improve with AI → adjust manually → export

3. Users want professional control, but not professional complexity.

Some users value ease and variety, while more advanced users need better adjustment controls, alignment, color reuse, and editing precision. That tension is important. If AI removes control, advanced users will feel limited. If AI exposes too much control too early, casual users will feel lost.

Design implication: each AI workflow needs a simple default path and a deeper refinement path.

4. Pricing sensitivity affects trust.

Subscriptions, premium features, and credit-based AI actions are common in mobile creative products. Users notice when valuable features feel locked, unclear, or expensive.

Design implication: credit cost should appear before the AI action, not after. Users should know what will happen, what it costs, what they can preview, and what happens if generation fails.

Design Goals

I used four practical goals to keep the work focused.

1. Make AI discoverable without making the product feel crowded. Users should be able to find AI tools intentionally, but also meet them naturally inside the editor.

2. Keep users in control. AI should suggest, preview, and assist. It should not silently overwrite the canvas.

3. Make cost visible before commitment. AI credits should feel understandable and predictable.

4. Make Arabic-first workflows feel native. Arabic calligraphy, diacritics support, RTL behavior, and cultural templates should not feel like translated versions of generic AI tools.

What I Did Not Design for V1

The hardest part was not deciding what to add. It was deciding what not to prioritize too early.

I avoided making V1 depend on:

Out of scope for V1	Reason
A fully conversational AI assistant that can do everything	Too broad to ship and measure in one cycle.
Heavy prompt engineering as the main input model	Wrong burden for casual mobile users.
Automatic AI changes applied directly to the canvas	Breaks trust and the undo model.
A single "AI" tab as the only entry point	Disconnects AI from where intent already exists.
Complex advanced controls before users see a usable first result	Inverts the "simple default, deeper refinement" path.
Animation-heavy loading states	Adds performance risk on image-heavy mobile flows.

The first version needed to be understandable, measurable, and recoverable. The goal was not to design the most impressive AI demo. The goal was to design a system people could understand, trust, and reuse across different creative tasks.

Design Principles

1. Contextual, not isolated. AI should appear where the user already has intent. A dedicated AI Tools page is useful for discovery, but the editor needs object-level AI actions.

2. Action-based, not prompt-heavy. Most users are not trying to write perfect prompts. They want to remove a background, improve a photo, create visual options, add diacritics, style Arabic text, or generate a design direction. The interface should translate those goals into clear actions.

3. Preview-first, user-controlled. AI output should not be applied blindly. The user should be able to preview, compare, regenerate, edit, discard, or apply.

4. Transparent around credits. If an action consumes credits, users should know before they commit. Credit balance, cost, retry rules, and upgrade paths need to be visible inside the flow.

5. Arabic-first by design. Calligraphy, diacritics support, Arabic text styling, curved Arabic text, and culturally relevant templates are not edge cases. They are the product's center of gravity.

6. Lightweight and recoverable. AI workflows should account for network latency, image size, Android memory constraints, and generation errors. A failed generation should not feel like a dead end.

Structuring the AI Suite

The AI tool list was broad:

Image Generation · Image Enhancement · Image Editing · Logo Assistance · Video Assistance · Background Removal · Canvas Expansion · Object Replacement · Arabic Calligraphy · Diacritics Assistance · AI Credits

Instead of treating them as unrelated screens, I grouped them around user intent.

Category	Tools	User Intent
Generate	Image generation, logo assistance, video assistance	Create something new from an idea.
Edit	Image editing, object replacement, canvas expansion	Change something selected or extend an existing visual.
Enhance	Image enhancement, background removal, improvement	Improve quality or prepare an asset for design.
Arabic Text	Calligraphy, diacritics assistance, Arabic text styling	Support language-specific creativity and Arabic typography.
Access & Trust	Credits, paywall states, retry rules	Manage cost, limits, and usage transparency.

This taxonomy helped turn a long list of tools into a scalable product system.

Core Flow Model

The same AI interaction model can support multiple tools:

Entry point → Intent → Input → Credit check → Generate → Preview → Refine → Apply → Export

Once users understand how one AI tool behaves, the next one feels familiar.

The model also supports different entry points:

Template-led — Browse template → Select → Edit → Contextual AI → Preview → Apply → Export

AI-led — Open AI tool → Choose action → Add input → Generate → Preview → Regenerate/Edit → Apply → Export

Editor-led — Select object → Contextual AI → Generate → Apply to canvas → Continue editing

Saved-design — Open saved design → Improve with AI → Create variation → Export new version

AI Tools Page

The AI Tools Page gives users a clear place to browse the full suite. But I did not want it to become a drawer of unrelated tools.

The page should answer three questions quickly:

• What can AI help me do?
• Which tool fits my current goal?
• Is this free, premium, or credit-based?

I designed the page around categories instead of a flat list. This reduces scanning effort and creates room for future tools without turning the page into a long menu.

Proposed categories: Create with AI · Edit with AI · Improve with AI · Arabic Text AI · Video AI · Credits and Usage

Each tool card should communicate tool name, an outcome-focused description, input type (image, video, text, template, canvas), credit cost or premium state, and recommended use case.

Instead of technical labels, the user-facing language should focus on outcomes: create an image, improve a photo, remove background, replace something, expand canvas, create calligraphy, add diacritics, make a logo, generate video.

Create New Design Flow

The create-new-design sheet is a high-intent moment. Users are already deciding how to begin: camera, photo, video, ratio, or custom size.

This made it a strategic place to introduce AI quick starts.

Standard creation	AI quick starts
Camera	Generate image
Photo	Create logo
Video	Product photo
Custom size	Remove background
Common aspect ratios	Arabic calligraphy

Trade-off: adding too many AI options here could make the sheet crowded. The solution was to show only AI tools that help users start a design. Tools like object replacement and canvas expansion belong inside the editor after an object exists.

Contextual Editor AI

The editor is where AI becomes practical.

Selected context	Contextual AI actions
Image object	Remove Background · Enhance · Replace Object · Expand · Edit with Prompt
Arabic text	Add Diacritics · Generate Calligraphy · Improve Style · Fill Text with Photo · Curve / adjust Arabic text
Saved or existing work	Create variation · Resize for platform · Improve old design · Translate / localize · Turn into video

This contextual model keeps users close to their work. It avoids the feeling that AI is a separate mode they have to enter and exit.

Design decision: I avoided a permanent AI toolbar that shows the same options everywhere. That would be visually simple but weak as a product experience. The stronger pattern was object-aware AI: the selected object determines which AI actions are useful.

AI Result Preview

For AI tools, the riskiest moment is not generation. It is application.

If AI changes the canvas immediately, users can feel they lost control. If the result is shown as a preview first, users can decide whether it belongs in their design.

I used a preview-first pattern across AI tools:

• Show generated result.
• Allow before/after comparison where relevant.
• Expose regenerate and edit.
• Apply only after confirmation.
• Preserve undo.

The core loop became:

Select → Generate → Preview → Compare → Apply / Regenerate / Edit / Dismiss

This is especially important for background removal, enhancement, object replacement, and canvas expansion.

AI Credits

AI tools cost money to run. Users understand that, but they do not like surprise costs.

The credit system should be visible in the places where users make decisions:

Surface	What appears
Before generation	Cost preview + current balance
AI tool page	Per-tool cost label
Premium AI actions	Upgrade or credit hint inline
Result preview	Credit used or clear failure handling
Retry / regenerate	Cost of each additional run

Example copy direction:

"Uses 2 credits" "You have 18 credits left" "Preview first. Credits are used when you generate." "Generation failed. No credit was used." "Regenerate uses 1 credit"

The exact business rules may vary, but the design principle stays the same: no surprise cost.

AI Credits were treated as part of the user experience, not just a monetization mechanic.

Deep Dive: Background Removal

Background Removal was one of the most important AI editing tools because it connects directly to a common design task: isolating an object and placing it into a new composition.

User need: users want to remove a photo background quickly without leaving the app or using a separate tool.

UX risk	Design response
The result may not be perfect	Result appears as preview, not automatically applied.
The tool may fail on complex images	User can compare before/after, retry, or fall back to manual editing.
It can be expensive if credit-based	Credit cost is shown before action.
Users need to see the result before applying it	Entry appears when an image is selected; progress state explains processing.

Deep Dive: Object Replacement

Object Replacement helps users keep most of a design while changing one specific part: an object, background element, texture, decorative asset, or product detail.

The key decision was to make it selection-first, not prompt-first.

Select area → Describe replacement → Show credit cost → Generate options → Preview in context → Apply / Regenerate

Why selection-first mattered: a prompt alone is too vague. Users need to see exactly what will change before the system generates anything.

Need	Pattern
Selection is the anchor	Make the selected area visually clear.
Preview without disruption	Keep the preview inside the actual canvas.
Trust during iteration	Preserve the original design until the user applies the result.
Recovery without restart	Offer regenerate and manual edit.
No surprise cost	Show credit cost before generation.

Deep Dive: Arabic-first AI

This was the most important differentiation layer.

A generic AI suite can generate an image, remove a background, or enhance a photo. This product has a stronger reason to exist: helping users create Arabic and bilingual visual content with cultural and typographic quality.

AI Calligraphy

The calligraphy workflow should feel closer to selecting a crafted visual style than typing into a generic text field.

Key design needs:

• Arabic input with clear RTL handling.
• Style families or examples.
• Preview before insertion.
• Resolution / format clarity.
• Editable placement after applying to canvas.
• Premium / credit clarity if needed.

Diacritics Assistance

Diacritics support is a trust-sensitive tool. If the system adds marks incorrectly, the output can feel embarrassing or unusable.

Key design needs:

• Editable result.
• Compare original vs. assisted result.
• Explain that users can review before applying.
• Preserve the original text.
• Avoid overclaiming accuracy.

Arabic typography controls

Arabic-specific controls such as curved text, Kashida, spacing, line height, and fill text by image should be designed as first-class editor tools. They should not be hidden under a generic "advanced" drawer where only expert users will find them.

Iterations and Trade-offs

I explored a few directions that looked attractive at first but created problems when tested against behavior signals and product constraints.

Direction 1 — One big AI tab A single AI tab would have been clean from a navigation perspective, but it made AI feel disconnected from the editor. It also forced users to leave the object they were working on.

What changed — I kept the AI Tools page for discovery, but moved the most useful AI actions into context: selected image, selected text, create sheet, saved project, and export moments.

Direction 2 — Prompt-first interaction A prompt box feels flexible, but it places too much burden on users who just want a fast result.

What changed — the default model became action-first. Prompt input exists where it adds value, but users can begin with simple actions like Enhance, Remove Background, Add Diacritics, Generate Logo, or Replace Object.

Direction 3 — Auto-apply generated results Auto-apply makes the flow shorter, but it can damage trust. Users need to see what changed before the design is modified.

What changed — preview-before-apply became a core pattern.

Direction 4 — Hide credits until the end This makes the first screen cleaner, but it creates a bad surprise at the moment of commitment.

What changed — credits became part of the decision layer: visible before generation, not just at checkout or paywall.

Direction 5 — Heavy AI loading animations Rich loading states can feel polished, but image-heavy mobile workflows already had stability and performance constraints.

What changed — loading states were designed to be lightweight, clear, cancellable where possible, and recoverable.

Design System Impact

The AI suite needed repeatable patterns. Otherwise every AI feature would create its own UI logic.

I defined reusable components and states:

Discovery	Action	Trust & Cost	Feedback
AI Tool Card	Contextual AI Toolbar	Credit Badge	Loading State
AI Category Section	AI Action Chip	Credit Cost Row	Error + Retry State
Empty State with examples	Prompt / Input Field	Paywall Sheet	Result Preview Card
	Generate / Regenerate CTA		Before / After Comparison
	Apply / Discard controls

The goal was not just visual consistency. It was interaction consistency. If a user learns how Background Removal works, Image Enhancement and Object Replacement should feel familiar.

Measurement Model

The analytics setup needed to move from general product health to AI workflow measurement. Aggregate behavioral data was useful for baseline behavior, but AI needed its own event model.

Recommended AI events:

Stage	Event
Discovery	ai_entry_viewed, ai_tool_opened
Intent	ai_action_selected, ai_prompt_submitted
Generation	ai_result_generated, ai_generation_failed
Outcome	ai_result_applied, ai_result_dismissed, ai_regenerate_clicked
Monetization	ai_credit_paywall_viewed, subscribe_after_ai
Impact	design_exported_after_ai

Recommended funnels:

Editor opened → Object selected → AI action opened → Result generated → Result applied → Exported

AI tool opened → Credit cost viewed → Generate clicked → Result previewed → Applied / Dismissed

AI tool opened → Paywall viewed → Subscribe clicked → Subscription completed

These metrics would make the next design iteration much more precise. Instead of asking whether users "like AI," the team could measure where AI creates value and where it leaks trust.

Result

This work changed the AI direction from a set of separate features into a product system.

Before	After
A long list of disconnected tools: generator, editor, enhancement, video, background removal, Arabic text assistance, and credits.	A set of reusable patterns that compose into a system.

The reusable pattern set:

• Discovery through AI Hub.
• Quick starts through the create sheet.
• Contextual actions inside the editor.
• Arabic-first workflows as differentiation.
• Transparent credits as the trust layer.
• Preview-first results as the control layer.
• Shared components and states for future tools.

This also gave the team a clearer way to prioritize future work. Tools that matched existing high-intent moments became stronger candidates for near-term release. Tools that required more trust, cost, or performance handling could be designed with stronger guardrails.

Some parts of the AI suite were tied to released product surfaces, while others were part of generalized product exploration. For that reason, I am not presenting unverified post-launch conversion claims here.

The measurable contribution was the product and design foundation:

• a research-backed AI strategy,
• a clearer information architecture for AI tools,
• contextual editor patterns for image/text AI actions,
• credit transparency rules,
• Arabic-first AI workflow definition,
• a reusable component/state model,
• and an analytics plan for measuring AI adoption, result quality, credit friction, and export impact.

The most important shift was simple:

AI stopped being a separate feature area and became part of the creative workflow.

Reflection

The easy version of this project would have been to design a beautiful AI tools page and stop there.

The harder, more useful version was to ask where AI actually belongs in a mobile design workflow: when a user is choosing a template, creating a canvas, selecting an image, editing Arabic text, removing a background, preparing export, or returning to an old design.

That changed the design from "add AI" to "reduce creative effort."

The most valuable lesson was that AI tools need more than impressive outputs. They need timing, trust, recovery, and context. In an Arabic-first creative product, they also need cultural specificity. Arabic calligraphy, diacritics support, RTL behavior, and culturally relevant templates are not decoration. They are the product's advantage.