Q
QuranFlow · AlMaghrib Institute · Product Direction

Fifteen weeks,
one rhythm.

A clickable prototype of the redesigned QuranFlow app — the semester program, rebuilt around one question: where am I, and what's next?

Four entrances into the same prototype:
New students · Year 1 · Year 2 · Coach (TA)

Best on a phone — everything is tappable.

The guided tour

The app with a rail underneath, walked one screen at a time.

Pick the journey you are reviewing.

New students

S01–S1616 chapters

You are Sarah, on your first day.

  • Sign in with the account you made enrolling on the web
  • Record a first recitation
  • Wait at Level 0 while the team places you
  • First-run setup: notifications and timezone
Open →

Year 1

S17–S28, S38–S5126 chapters

You are Sarah, in Week 8 of 15.

  • Watch the lesson, record Al-Mulk
  • Hear your coach's notes on the exact words you recited
  • Practice, then the week turns over
  • Every shared surface too: sessions, curriculum, your coach, messages
Open →

Year 2

S29–S5123 chapters

You are Hana, back after Level 4.

  • No weekly submissions any more
  • Book one-to-one appointments
  • Read the teacher's notes afterwards
  • Choose electives — same shared surfaces underneath
Open →

Coach (TA)

C01–C099 chapters

You are Amina, with the coach's hat on.

  • The same app, role-gated by an admin — not a separate download
  • Work the review queue
  • Review a recitation word by word
  • Your roster, your schedule, the notes you have sent
Open →

Reviewing all of it? The complete tour runs every journey in sequence — 60 chapters, end to end.

Open the app

The same build with the rail and the notes stripped out — just the app, in first person.

Pick the journey you want on your phone.

New students

S01–S1616 screens

Sarah, nothing set up yet.

  • Opens at sign-in
  • Record the first recitation
  • Sit at Level 0 while placement is decided
  • Finish first-run setup
Open →

Year 1

S17–S28, S38–S5126 screens

Sarah, Week 8, four tabs live.

  • Today, Learn, Sessions, You
  • The lesson and the recorder
  • Feedback on your words
  • Sessions and the schedule
Open →

Year 2

S29–S5123 screens

Hana, a year in.

  • Book a one-to-one
  • Read the teacher's notes from the last one
  • Browse the electives
  • Same tabs underneath: Today, Learn, Sessions, You
Open →

Coach (TA)

C01–C099 screens

Amina, coach's hat on.

  • Work the review queue
  • Review a recitation word by word
  • Check the roster
  • Your schedule and the notes you have sent
Open →

Want every screen at once? The whole app opens with no journey selected — all four, free to explore.

Two other views
By user status

Browse the flow map

Every journey laid out side by side — new students, Year 1's submission loop, Year 2's appointment loop, the coach's role-gated lane — showing where they diverge, where they share a screen, and which questions are still open. Corrected against the Jul 27 review with Lejla: sixteen tracked questions, nine now carrying her answers.

Open →
Outside the app

The ambient layer

What the app says while it is closed: the lock screen, the widgets, the Dynamic Island. Status-gated the same way — Year 1's week, Year 2's next appointment by plan, and two quiet doors for the student still waiting on placement. Never a deadline.

Open →
How to move through it

Four entrances, one prototype. An entrance is a starting point, not a different build. Each one drops you into a single journey — new students, Year 1, Year 2, or the coach — with only that journey's chapters on the rail. The complete tour is 60 chapters in seven acts; an entrance is a slice of it, so you review the journey you know without walking someone else's.

The rail tells you where you are. Under the phone, every chapter shows its act and its screen code — YEAR TWO · S37 — with a note on what you are looking at and why. Step with the ‹ › buttons, or the arrow keys on a laptop. Tap the chapter title to see the whole list for that entrance.

Codes are global and stable. S14 is the same screen in every entrance, in the app, and on the flow map. Student screens carry an S, coach screens a C. Giving feedback? Say the code in a voice note — "on S37, the date is doing too much" — and everyone finds the screen you mean.

Or explore freely. Tap on the rail and just use the app — four tabs (Today · Learn · Sessions · You), the lesson, the recorder, booking. Everything is live.

Why we redesigned

Students were doing the work — watching, reciting, showing up — and still felt lost in their own program.

01

Disorientation

"8 out of 15" never read as Week 8. Students didn't know what week they were on, when the semester started, or what to do today.

02

Missed sessions

The live schedule sat five clicks deep behind an external calendar link. Students missed sessions they fully intended to attend.

03

Unnoticed feedback

Coach feedback arrived and students never saw it — the "Feedback" button read as give feedback, and notifications carried no context.

The shift

Today's app

  • A collection of features — videos here, schedule there, feedback somewhere
  • Schedule five clicks deep, in someone else's timezone
  • Progress as "8 out of 15", meaning unclear
  • Feedback that arrives silently

The redesign

  • The Weekly Rhythm — every screen answers "Week 8 of 15" and shows only what's next
  • Sessions one tap away, always in your own timezone
  • One loop per week: Watch → Record → Feedback, with two attempts and a coach reply within 48 hours
  • Feedback that announces itself — "Feedback ready", in gold, on the words you recited
What you are looking at

A hi-fi prototype of the iOS app. Clickable, not final art. It shows structure and direction.

Two members, four entrances. Sarah arrives new — she signs in with the account she made when she enrolled on the web, records a first recitation, and sits at Level 0 until the team places her — then lives Week 8 of her 15-week semester: the week's tajweed lesson, recording Al-Mulk 67:1, her coach's notes on the exact words. Hana returns for Year 2, where appointments replace submissions.

The coach's side is included. Amina works in the same app with the coach's hat on: the review queue, reviewing a recitation, and turning a 20-minute one-to-one into sent notes in minutes.

Real curriculum, demo data. Lessons and verses are drawn from the actual program; names, dates, and counts are fixtures.

What we held onto

No streaks, no guilt

Progress is a real semester, not a fragile counter. Nothing shames, nothing expires at midnight for effect.

One thing at a time

Every screen shows what's next, one week reference, one primary action. Depth on demand, never all at once.

Times are always yours

Every session renders in the viewer's timezone, stated once per screen — never a guess, never someone else's clock.

It reaches the lock screen

Week, next session, and feedback meet the student before the app opens. Reading the week's verse there and never opening the app is a success.

The reconciliation board
For design reviewers

How two explorations became one app

Scope, then flows, then screens — the two design explorations compared layer by layer, with every decision adjudicated and logged, closed out by the final design review.

Open →
The documents
Feedback Synthesisthe "why" — start here; all four stakeholder sources, ranked Product Specscreen-by-screen: states, actions, routing, role gating Design Systemtokens, type scale, components, accessibility Data Modelentities, state machines, business rules, integrations Traceabilityevery ask → designed / deferred / rejected, with evidence Implementation Plantech recommendation + dated delivery plan for the September launch Design Rules & Auditthe 8 binding rules + per-screen audit log Overlap Reviewconflicts between sources, adjudicated — this wins ties Widget Explorationthe full reasoning behind the ambient layer Decision Logevery decision taken building the walkthrough

Suggested path for a first read: pick an entrance and tap through the tour, skim Feedback Synthesis for the why, then go where your role takes you — Product Spec and Data Model for engineers, Traceability for the PM, the reconciliation board for design reviewers.