QuranFlow redesign

The four journeys

Every screen in the app, arranged as the four journeys people take through it, in the order the story happens.

Four journeys, one row each: a new student arriving, a Year 1 student in the weekly rhythm, a Year 2 student booking one-to-one time, and a coach at work. Each row runs left to right in the order the screens happen. Swipe a row sideways to move through a journey; scroll the page to move between them.

Inside a journey, the main line is what every student meets, in order; anything on the lower level happens only when it applies — a rest day, a recording that comes back, a booking that clashes — and hangs from the screen it belongs to. A bracket over the line names a short run of screens that do one job together, like recording and sending the week’s work.

Every screenshot is a link. Tap one and that screen opens live in a new tab, in that journey’s own build of the app, so you can move around in it rather than look at a picture of it.

The code under each screenshot — S17, C03 — is that screen’s name everywhere in this project, and it does not change. Quote it in your feedback and we will know exactly which screen you mean.

Journey 1 of 4

New students

You are Sarah, on your first day.

Sarah signs in with the account she made enrolling on the web, records a first recitation, waits at Level 0 while a teacher places her, then sets the app up the way she wants it.

20 screens, in 2 stages

Codes S01–S09, S12–S16, S52, S53, S58, S59, S69, S70

Open the app Take the tour
ARRIVING 14 screens
First recitationS04–S06
  1. S01
    Enrolled on the web; sign in with emailed details
  2. S52
    A few details before you go any further
  3. S02
    You’re in, and nothing is asked of you yet
  4. S03
    How placement works, in three calm steps
  5. S04
    Your first recitation: four stages, one recording
  6. S05
    Four stages, one take, and a skip for any of them
  7. S06
    Every stage accounted for, then sent for evaluation
  8. S07
    Level 0: the whole live schedule, and where to start
  9. S08
    A teacher sets your level, and the semester opens
If she skipped the recitation
  1. S59
    Skipped the assessment? The offer stays open
The app while she waits
  1. S69
    A tab that is visible but not yet earned
  2. S70
    Learn before a level is set
Placed automatically
  1. S09
    Never recorded? Started at Level 2, tuned later
Returning after a level
  1. S58
    A returning student is told her level, not a placement
GETTING ORIENTED 6 screens
  1. S53
    What your level covers this semester
  2. S12
    Meet your coach, and hear her welcome to your level
  3. S13
    What the semester asks: lesson, submission, feedback
  4. S14
    Live circles, and every one recorded
  5. S15
    When are you free for anything live, circles or 1:1s
  6. S16
    Reminders start on; turn off any you don’t want
Journey 2 of 4

Year 1

You are Sarah, in Week 8 of 15.

Sarah watches the week’s lesson, records Al-Mulk, and hears her coach’s feedback on the exact words she recited. The shared surfaces sit behind the same tabs: sessions, curriculum, her coach, her messages.

29 screens, in 3 stages

Codes S17, S19, S21–S26, S38, S39, S41–S51, S55, S56, S60, S61, S64, S66–S68

Open the app Take the tour
THE WEEKLY RHYTHM 10 screens
Record and sendS22–S24, S56
  1. S17
    Everything this week in one swipe: lesson, work, feedback
  2. S21
    A week opens on its videos, notes underneath
  3. S56
    What you are recording this week, and how
  4. S22
    This week’s passage, part by part, in one take
  5. S23
    Hear your take before you send it
  6. S24
    Sent, and what happens next
  7. S25
    Sent, and yours to take back until she opens it
  8. S26
    Her feedback, anchored to the words you read
A rest day
  1. S19
    A rest day, with nothing to chase
Or it comes back to re-record
  1. S60
    A recording that came back, and why
SESSIONS & COACHING 4 screens
Shared — both years
  1. S38
    This week live, all in your timezone
  2. S39
    Everything about a live session
  3. S41
    Rewatch a session you missed
The month at a glance
  1. S64
    The live month behind the calendar button
LEARN & PROGRESS 15 screens
Shared — both years
  1. S42
    Fifteen weeks as a grid, and the one still open
  2. S61
    Resources, with a place of their own
  3. S55
    Every week, and what each one asks of you
  4. S68
    Previous levels, inside the learning space
  5. S43
    Your progress and your coach
  6. S44
    Your coach’s profile and feedback
  7. S45
    Message your coach, voice first
  8. S46
    Your account details
  9. S66
    Subscription, billing and the semester
  10. S67
    Learning history means previous enrollments
  11. S47
    Your inbox: announcements and feedback
  12. S48
    Choose what you are notified about
  13. S49
    Announcements, one way, no noise
  14. S50
    This week’s assignment, and every week’s feedback
  15. S51
    Report an issue from anywhere
Journey 3 of 4

Year 2

You are Hana, back after Level 4.

Hana has no weekly submissions any more. She books one-to-one appointments, reads the teacher’s notes afterwards, and chooses electives, on the same shared surfaces underneath.

34 screens, in 3 stages

Codes S15, S29–S35, S37–S39, S41–S51, S54, S55, S57, S61–S68, S71

Open the app Take the tour
YEAR TWO 15 screens
Booking a one-to-oneS33, S34, S62
  1. S29
    Hana finishes Recitation Essentials and enters Mastery
  2. S54
    New to QuranFlow, and starting at Year 2
  3. S30
    What Advanced Tajweed Rules covers, and what comes after
  4. S31
    The Year 2 rhythm, and where feedback comes from
  5. S57
    Appointments: upcoming, past, and book a new one
  6. S33
    Filter by teacher, day or time, then book once or weekly
  7. S62
    The day’s open times, and how often you want it
  8. S34
    Booked, and changeable up to 24 hours before
  9. S15
    The same question, asked once the shape is clear
  10. S32
    The same home, with appointments where submissions were
  11. S37
    Second semester: the elective she chose at checkout
The month at a glance
  1. S65
    Your booked semester on one calendar
If the time conflicts
  1. S63
    When a weekly booking hits a week already taken
The appointment, before and after
  1. S35
    Manage a booked one-to-one
  2. S71
    A past 1:1, and the notes that stay
SESSIONS & COACHING 4 screens
Shared — both years
  1. S38
    This week live, all in your timezone
  2. S39
    Everything about a live session
  3. S41
    Rewatch a session you missed
The month at a glance
  1. S64
    The live month behind the calendar button
LEARN & PROGRESS 15 screens
Shared — both years
  1. S42
    Fifteen weeks as a grid, and the one still open
  2. S61
    Resources, with a place of their own
  3. S55
    Every week, and what each one asks of you
  4. S68
    Previous levels, inside the learning space
  5. S43
    Your progress and your coach
  6. S44
    Your coach’s profile and feedback
  7. S45
    Message your coach, voice first
  8. S46
    Your account details
  9. S66
    Subscription, billing and the semester
  10. S67
    Learning history means previous enrollments
  11. S47
    Your inbox: announcements and feedback
  12. S48
    Choose what you are notified about
  13. S49
    Announcements, one way, no noise
  14. S50
    This week’s assignment, and every week’s feedback
  15. S51
    Report an issue from anywhere
Journey 4 of 4

Coach

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

The same app, role-gated by an admin, not a separate download. Amina works the review queue, reviews a recitation word by word, and keeps her roster, her schedule and her hours in one place.

16 screens, in 2 stages

Codes C01–C11, C14–C16, C18

Open the app Take the tour
THE COACH SIDE 8 screens
Reviewing one recitationC02, C03
  1. C10
    Her day first, the queue second
  2. C01
    A queue of submissions, sorted the way she asks
  3. C02
    A review starts empty: one note, tap a word to anchor
  4. C03
    The finished review: one note, one anchor, send
  5. C04
    What she owes this week, student by student
  6. C05
    A student’s record, in the order it happened
  7. C11
    Placement is a level, not feedback
A student who just arrived
  1. C06
    A brand-new student: where her record starts
COACH TOOLS 8 screens
  1. C07
    Her whole week, live classes and one-to-ones
  2. C07
    Her one-to-ones, on the same schedule
  3. C08
    After the 1:1: attendance, notes, what comes next
  4. C14
    Every level, every week, and the resources
  5. C15
    Her inbox: students, and the program team
  6. C18
    An announcement, in her own name
  7. C16
    Hours in the app, instead of a second app
  8. C09
    Her own corner, and the way back to her student app