Tools
كُتَّاب. The word means "school" in Arabic — a traditional place where children learned to read and recite the Quran. It's a name that carries weight, and Softylines chose it deliberately. Kotteb is a Quran companion app built for the full spectrum of Islamic practice: reading and memorization, prayer times, dhikr, rosary, and access to six major classical tafsir collections in a single experience. I joined Softylines — a Sousse-based software company of 51–200 people — as both designer and mobile developer on this product. The app launched on March 21, 2024, shipped to iOS, Android, and Huawei AppGallery simultaneously, and crossed 10,000+ downloads in its first year. This is the story of building something that needed to be technically solid and spiritually respectful at the same time.
The Quran app market is crowded. Dozens of apps claim to be the best way to read, listen to, or memorize the Quran — and most of them solve a narrow slice of the need. A reading app. A prayer times app. A tafsir app. A dhikr counter. Users who want a complete Islamic companion end up with four apps open at different points of their day, none of them talking to each other, none of them feeling cohesive.
Beyond fragmentation, there was a subtler design problem: most Quran apps treat the text as content to be displayed rather than scripture to be engaged with. The interaction layer is minimal. You can read a page and scroll to the next. Kotteb was designed around the opposite premise — that every verse is a point of entry, not just a line on a page. Long-pressing a verse should open a world: interpretation, audio recitation, copying, sharing, saving, annotating. The challenge was making that depth accessible without making the default reading experience feel cluttered.
The product had three core goals:
Success at launch meant a clean, stable release across all three stores with no critical bugs in the reading or navigation flows. Success at scale meant users returning daily — because a Quran app that isn't opened every day has failed at its most basic job.
Designing for sacred text is a category of its own. The research wasn't just about UX patterns — it required understanding the different ways Muslims interact with the Quran: daily recitation, structured memorization (hifz), Tafsir study, and quick reference during prayer. Each mode has different needs, different context, different pace.
The tafsir integration was the research finding that shaped the most design decisions. Including six classical collections — Ibn Kathir, Al-Saadi, Al-Qurtubi, Al-Baghawi, Al-Tabari, and Al-Waseet by Tantawi — wasn't a feature request, it was a theological one. Different traditions within Islam reference different scholars. A user from one background might reach for Ibn Kathir as their default; another might prefer Al-Saadi's simpler explanations. The design needed to surface all six without turning the tafsir experience into a tab-heavy comparison tool.
The competitive audit confirmed what was already suspected: iQuran, Quran Majeed, and Muslim Pro all had strong feature sets but weak interaction layers. Muslim Pro had strong prayer time integration but a dated reading UI. Quran Majeed had a clean reading experience but limited tafsir depth. The gap Kotteb could own was the combination — a modern reading experience with classical scholarly depth, in a single cohesive product.
The reading screen was the hardest screen to get right, because it had to do two things that usually work against each other: feel like an open, undistracted reading surface, and be dense with functionality on demand.
The solution was a long-press interaction model. The default reading view shows only the text — no buttons, no overlays, no persistent controls beyond the page cursor that distinguishes left and right pages. Holding any verse reveals the full action menu: interpret, share, copy, listen, save, annotate. This pattern kept the reading experience genuinely calm while putting the full interaction depth one gesture away. The cursor system — a subtle indicator on the page edge — was a deliberate navigation aid for the mushaf format, where right-to-left double pages require orientation cues that left-to-right UI conventions don't automatically provide.
The index screens required their own thinking. Three indexes — surah, juz, and hizb — each needed a search bar and a current-position indicator so users always knew where they were in the Quran relative to what they were browsing. The solution marked the current page's position in the index list, so jumping between reading and navigation never required the user to reconstruct their location mentally.
Kotteb was built in Flutter — the right call for a three-platform target (iOS, Android, Huawei) from a single codebase. The alternative was maintaining three separate implementations, which no lean team should commit to for a v1. Flutter's rendering engine also gave consistent text layout across platforms, which mattered significantly for Arabic typography — right-to-left rendering with proper harakat (diacritical marks) and the Qalun recitation's specific typographic conventions.
The tafsir data layer was one of the more interesting technical decisions. Six complete classical tafsir collections is a significant data problem — these are not short texts. The approach was to store the tafsir content locally in the app bundle for offline access (a non-negotiable requirement for a Quran app — users read in mosques, on planes, in areas with no signal) while structuring the verse-to-commentary mapping so the correct tafsir passage could be retrieved in under 100ms from a long-press, without a perceptible loading state.
snippet.txt
// Verse interaction handler — long press reveals action sheet
GestureDetector(
onLongPress: () => _showVerseActions(context, verse),
child: Text(
verse.text,
style: AppTokens.quranTextStyle,
textDirection: TextDirection.rtl,
),
)
// Action sheet options
void _showVerseActions(BuildContext context, Verse verse) {
showModalBottomSheet(
context: context,
builder: (_) => VerseActionsSheet(
onTafsir: () => Navigator.push(context, TafsirRoute(verse)),
onShare: () => ShareService.shareVerse(verse),
onCopy: () => Clipboard.setData(ClipboardData(text: verse.text)),
onAudio: () => AudioService.playVerse(verse),
onBookmark: () => BookmarkService.save(verse),
onNote: () => Navigator.push(context, NoteRoute(verse)),
),
);
}WCAG compliance for an Arabic-language app required extra attention — contrast ratios had to work across both light and dark reading themes, and touch targets for the verse interaction areas needed to be generous enough without disrupting the flow of text across lines.
Kotteb launched on March 21, 2024 and reached 10,000+ downloads across iOS, Android, and Huawei AppGallery — a strong result for a regional Islamic app competing against well-funded incumbents. The app maintains a 4+ star rating across stores. User reviews specifically called out the reading experience and the depth of the tafsir integration as differentiators.
The product also validated the multi-platform Flutter approach: shipping to three stores from one codebase without significant platform-specific bugs kept the team's maintenance overhead manageable and let development focus on features rather than divergence. The app continues to receive updates — currently on version 1.4.5 as of April 2026 — which speaks to Softylines' ongoing investment in the product.
Designing for the Quran isn't a UX problem. It's a responsibility problem. The UX follows from getting that right.
Kotteb is on version 1.4.5 and still shipping. The feature list already includes everything a comprehensive Islamic companion needs — the next frontier is personalization: memorization progress tracking tied to a user account, recitation history, personalized dhikr schedules. The widget system — prayer times and daily Quranic verses on the home screen — opened a door to ambient Islamic practice that the product hasn't fully walked through yet. There's a version of Kotteb that lives on your home screen as much as inside the app. That version is the one worth building next.