Usability & Design Audit — Nov 27, 2025
QuranFlow App - Usability & Design Audit
Date: November 27, 2025
Auditor: Kamran
App Version: 1.0.8 (1)
Executive Summary
This comprehensive usability audit identifies critical usability, design, and functionality issues across the QuranFlow mobile application. The audit follows the actual user journey through the app, from discovery to core task completion.
Key Findings
Critical Issues (P0): 6
- Video player functionality failure
- Missing submission feedback history
- Broken notification system
- Quranic font not standard (though available in hidden settings)
- User profile screen inadequate
- No timezone display for live sessions
High Priority Issues (P1): 20
- App Store screenshots poor quality
- Multiple navigation and information architecture problems
- Inconsistent messaging and confusing terminology
- Accessibility concerns (color contrast, font discovery)
- Poor discoverability of key features
Medium Priority Issues (P2): 18
- Various UI/UX polish items
- Design consistency issues
- Missing contextual information
Low Priority Issues (P3): 5
- Minor visual refinements
Impact Assessment
The identified issues significantly impact:
- Task Success: Users cannot complete core workflows (video playback, accessing feedback)
- Engagement: Hidden features and confusing navigation reduce feature adoption
- Retention: Inconsistent messaging and poor feedback loops may drive churn
- Accessibility: Multiple barriers for older users and those with accessibility needs
1. App Store Presence
Issues Identified
| Issue | Severity | Description |
|---|---|---|
| Poor Quality Screenshots | P1 | Current App Store screenshots are of poor quality and do not effectively showcase the app's features or value proposition. |
Recommendation: Create professional, high-quality screenshots that highlight key features: live sessions, submission tracking, progress monitoring, and instructor interaction.
2. Home Screen
Positive Observations
- Live sessions prominently displayed creates sense of currency and active learning
- 3D icons provide clear visual differentiation, especially helpful for older users
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Timer Format Unclear | P2 | Countdown timer format (DD:HH:MM:SS) not labeled or intuitive | Users don't understand time unit hierarchy |
| Text Accessibility Concern | P1 | Light text on yellow background (live session cards) | Potential readability issues for colorblind users; fails WCAG contrast requirements |
| Redundant Copy | P3 | "Your Upcoming Home" text is redundant | Minor confusion; wastes screen space |
| Non-Standard Navigation | P2 | Top tab navigation non-standard for iOS (should use bottom tab bar) | Reduces thumb reachability; violates iOS HIG |
| Unclear Icons | P2 | Top-left QuranFlow logo too small; 4% progress indicator meaning unclear | Users don't understand progress metric or can't easily recognize brand |
| Conversations Feature Confusion | P1 | "Conversations" purpose unclear - appears to be messages, complaints, TA communication, or FAQ all mixed together | Users don't know what it is or how to use it; creates uncertainty |
| Redundant UI Elements | P2 | Conversations has button + separate chat bubble icon appearing as two different elements | Visual clutter; suggests multiple actions when it's one feature |
Recommendations:
- Add time unit labels to countdown timer or use clearer format (e.g., "16h 45m until session")
- Audit color contrast ratios for WCAG AA compliance (minimum 4.5:1)
- Remove redundant "Home" from "Your Upcoming Home"
- Consider iOS-standard bottom tab bar for primary navigation
- Clarify and document Conversations feature purpose - consider separate sections for TA communication, peer discussion, and FAQs
- Consolidate Conversations UI into single, clear call-to-action
3. Lessons Screen
Positive Observations
- Simple, clean design with clear completion status
- Green checkmark provides immediate visual feedback on completion
- Clear next action (Lesson 2) with visual hierarchy
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Loading Screen Outdated | P2 | Visible loading screen between navigation transitions | Feels dated; modern apps pre-cache or use skeleton screens |
| Missing Contextual Information | P1 | No indication of: • Week numbers • Lesson dates • Schedule • Topic/content covered • Learning objectives | Users lack context for planning and understanding curriculum structure |
| Over-Simplification | P2 | Extremely minimal interface with no explanation | May work for simple users but lacks depth for engaged learners |
Recommendations:
- Implement skeleton loading states or pre-caching to eliminate visible load screens
- Add metadata to each lesson: week number, date range, topic title, brief description
- Consider expandable lesson cards that show objectives/outline on tap
- Display overall curriculum roadmap or progress path
4. Lesson Detail & Video Player
Positive Observations
- Subtitles functionality present
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Video Playback Failure | P0 | Video constantly pauses and cannot play reliably | Core functionality broken - users cannot complete lessons |
| Non-Native Video Player | P1 | Player doesn't feel like native Apple player; unclear if using variable bit rate | Poor user experience; potential streaming inefficiency |
| Full-Screen Access Difficult | P1 | Requires two steps with small corner button to enter full-screen | Accessibility issue especially for older users; poor UX |
| Width Not Optimized | P2 | Video player has excessive padding, not using full width available | Suboptimal viewing experience |
| Generic Video Thumbnails | P2 | Thumbnails not descriptive; relies only on text titles | Harder to navigate/identify content visually |
| Cannot Undo Completion | P1 | "Mark Complete" button is one-way; cannot unmark | Violates basic UX principle of reversible actions; users can't review or correct mistakes |
| Misplaced Conversations Button | P2 | Conversations button prominent at bottom near thumb zone | Suggests primary action when it's not; misallocates prime UI real estate |
Recommendations:
- IMMEDIATE: Fix video playback reliability - investigate streaming infrastructure, CDN, player implementation
- Implement native iOS video player (AVPlayerViewController) or ensure custom player matches native behavior
- Single-tap full-screen access with larger, more obvious button
- Optimize video player width to use available screen space
- Create custom thumbnails showing visual content or key moments from each video
- Allow users to un-mark completion unless it triggers backend state changes (e.g., unlocking next module)
- Relocate Conversations to less prominent position or tab bar if it's truly important
5. Submissions Flow
Positive Observations
- Review and re-record functionality before submission is excellent
- Color-coded status indicators help users understand state
- "Awaiting feedback" with clock icon provides clear status
- Lesson name displayed during recording provides context
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Missing Submission History | P0 | Lesson 1 submission not visible; cannot access past submissions, feedback, or grades | Users cannot track learning progress or learn from feedback |
| Confusing Feedback Label | P1 | "Feedback" button initially interpreted as "give feedback on instructors" rather than "receive feedback on submission" | Terminology confusion; poor mental model |
| Conflicting Status Display | P1 | Two different status indicators shown: "Level 4" and "Feedback: awaiting feedback" creating confusion | Users don't understand the relationship or hierarchy |
| Non-Standard Quranic Font | P0 | Recording screen uses non-mushaf font (though standard font exists in Settings) | Critical for Quranic learning app - users expect and need mushaf script |
| Inconsistent Turnaround Messaging | P1 | Initial message: "5 business days" vs. post-submission: "2 business days" | Erodes trust; creates confusion about expectations |
| Turnaround Time Too Conservative | P1 | 5 business days messaging creates negative impression if actual turnaround is faster | Sets low expectations; discourages engagement |
| Misleading Numbering | P2 | "Submission number 2" should be "Week 2" or "Lesson 2" | Terminology inconsistency with rest of app |
| Poor Visual Design | P2 | Lime green gradient described as "hideous"; poor color palette | Detracts from professional feel |
| Unclear Recording Instructions | P2 | No indication of: • Number of attempts allowed • How the recording process works • What happens after recording | Users lack confidence in using the feature |
| Mysterious Green Dot | P3 | Green dot with "1" - purpose unclear | Minor confusion; lack of clarity |
Recommendations:
- IMMEDIATE: Implement submission history view showing all past submissions with feedback, grades, and timestamps
- Rename "Feedback" to "View Feedback" or "My Results" to clarify purpose
- Simplify status display - choose one clear indicator or create logical hierarchy
- IMMEDIATE: Make mushaf font the DEFAULT for all Quranic text; include in onboarding
- Align messaging: determine realistic turnaround time and use consistently throughout app
- If 90% of feedback is delivered in 2-3 days, message that with "up to 5 days" as fallback
- Use consistent terminology: Week #, Lesson #, or Submission # - but be consistent
- Redesign submission screen with better color palette and typography
- Add onboarding tooltip or help section explaining recording process, attempt limits
- Either remove green dot or add explanatory label
6. Live Sessions
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Cut-Off Menu Header | P2 | "Live" menu at top is cut off; headers appear oversized | Poor polish; suggests careless implementation |
| No Timezone Information | P0 | Times shown (e.g., "6 am Friday") with no timezone or clarification if converted to user's timezone | Users cannot determine if they can attend; critical for live feature |
| Inconsistent Session Display | P1 | Some sessions show countdown timer, others don't | Confusing; users don't know which format to expect |
| Unclear "Not Yet Available" | P1 | Clicking sessions shows "not yet available" with no explanation | Users don't understand if this is training material, preview, or error |
| No RSVP/Schedule Feature | P1 | Cannot select which sessions to attend; no RSVP system | Instructor doesn't know expected attendance; users can't commit |
| No Calendar Integration | P1 | Cannot add sessions to device calendar | Users must manually track; increases likelihood of missing sessions |
| No Session Content Preview | P1 | No indication of what will be covered in each session | Users cannot decide which sessions are relevant; reduces engagement |
| No Instructor Filtering | P2 | Cannot filter sessions by instructor preference | Users with instructor preferences must scroll entire list |
| Poor Text Formatting | P1 | All text same size, no structure, no visual hierarchy | Extremely difficult to scan; "hideous" and unprofessional |
Recommendations:
- IMMEDIATE: Display timezone for all sessions OR auto-convert to user's timezone with clear indicator
- Standardize session card format - all should show consistent information
- Explain "Not yet available" state - add tooltip or help text
- Implement RSVP system allowing users to mark interest/commitment
- Add "Add to Calendar" button generating .ics files
- Show session topics/agenda for each live session
- Add instructor filter/sort options
- Complete visual redesign of session cards with proper typography hierarchy, spacing, and layout
7. Progress & Statistics
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Outdated Branding | P2 | Shows "QR Progress" (Quran Revolution) instead of "QuranFlow" | Brand confusion; appears unmaintained |
| Unclear Progress Metric | P1 | Shows "9%" with no clear indication of what this represents | Users don't know if it's lesson completion, overall progress, time-based, etc. |
| Missing Context | P1 | No indication of total lessons in current level | Cannot gauge remaining workload or pace |
| Redundant Visual Elements | P2 | Both circular progress indicator with percentage AND horizontal progress bar | Visual clutter; redundancy without added value |
| "Screwy Icons" | P2 | Icons described as problematic or misaligned | Poor attention to detail |
| Cryptic Statistics | P2 | Shows "0/0 quizzes, 2/7 lessons, 0/15 something" without clear labels | Users confused about what's being measured |
| No Feedback Access | P0 | Progress screen shows completion percentages but no way to access feedback on completed submissions | Cannot learn from mistakes or review instructor guidance |
| Poor Visual Design | P2 | Overall screen described as "ugly and redundant" | Detracts from user confidence in product |
Recommendations:
- Update all branding from "QR"/"Quran Revolution" to "QuranFlow"
- Add clear labels: "9% of Level 4 Complete" or "2 of 22 lessons completed"
- Show total lessons/weeks in current level prominently
- Remove redundant progress visualization - choose circle OR bar, not both
- Audit and fix icon alignment and sizing
- Add clear category labels for all statistics
- Create "Feedback History" section accessible from progress screen showing all past grades/feedback
- Complete visual redesign with modern, clean aesthetic
8. Notifications
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Broken Notification Context | P0 | Notification states "one submission was rejected please resubmit" with NO: • Timestamp • Date • Submission identifier • Lesson reference • Reason for rejection | Complete failure - users cannot act on notification; described as "complete fail" |
Recommendations:
- IMMEDIATE: Complete redesign of notification system
- Include: exact date/time, lesson/week identifier, submission number, reason for rejection, link to specific submission
- Add notification history with persistent visibility
- Consider push notification with deep link directly to rejected submission
9. User Profile (Right Icon)
Positive Observations
- Photo upload capability present
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Critical Missing Information | P0 | Profile screen lacks essential account information: • Billing • Payment method • Subscription cycle • Purchase history • Past level performance • Achievements | Users cannot manage their account or understand their standing |
| No Category Labels | P1 | Information displayed (e.g., "Four and thirty-five") with no headings or context | Users don't know what data means |
| Minimal Information | P1 | Only shows email and phone number field (often empty) | Inadequate for account management |
| "Ridiculous" Design | P0 | Overall screen design described as fail requiring complete redo | Undermines user confidence in product quality |
Recommendations:
- IMMEDIATE: Complete redesign and rebuild of profile screen
- Add sections for:
- Account & Subscription (billing, payment, cycle, renewal date)
- Learning History (past levels, grades, achievements)
- Personal Information (name, email, phone with proper labels)
- Settings Quick Access
- Support/Help
- Follow standard iOS settings screen patterns
- Add proper section headers and labels for all data
- Include password change in settings flow, not ad-hoc field
10. Side Menu (Left Hamburger)
Positive Observations
- Shows user level, name, and assigned TA (valuable information)
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Hidden Critical Information | P1 | Student level and TA information only accessible via hamburger menu that users would never think to check | Users unaware of important information about their enrollment |
| Poor Information Architecture | P2 | Entire menu serves only as navigation + logout, which is redundant with top tabs | Doesn't follow iOS design guidelines; wasted interaction |
| Non-Standard Pattern | P2 | Hamburger menus largely deprecated in iOS in favor of tab bars and action sheets | Outdated pattern; increases cognitive load |
Recommendations:
- Surface level and TA information prominently (home screen or persistent header)
- Restructure navigation using iOS-standard tab bar instead of hamburger menu
- If hamburger menu retained, include account-specific content not available elsewhere
- Follow iOS Human Interface Guidelines for navigation patterns
11. Settings & Support
Positive Observations
- Font selection works and significantly improves readability when changed
- Support contact available
Issues Identified
| Issue | Severity | Description | User Impact |
|---|---|---|---|
| Support Well-Hidden | P1 | Support button only in hamburger menu; no obvious path to help | Users cannot easily get assistance when needed |
| Font Setting Not Discoverable | P0 | Mushaf font selector exists but is buried in settings accessed via hidden hamburger menu | Critical feature for Quranic app is invisible to users |
| Missing Onboarding | P0 | Font selection should be introduced in first-week onboarding but isn't | Users never discover feature that significantly improves experience |
| Font Rendering Issues | P2 | Even with correct font selected, still some rendering errors | Diminishes quality of core content |
| Settings Split Across Screens | P1 | Settings accessible from side menu but not from user profile (right icon) | Inconsistent; violates principle of least surprise |
Recommendations:
- IMMEDIATE: Add "Help" or "Support" to main navigation/tab bar
- IMMEDIATE: Create first-week onboarding flow that includes font selection as required step
- Make font setting more discoverable - consider home screen quick access or persistent reminder
- Fix font rendering issues for pixel-perfect Quranic text
- Consolidate settings access - make available from both profile and menu
- Consider in-context help triggers (e.g., "?" icons where features need explanation)
12. Cross-Cutting Issues
Navigation & Information Architecture
| Issue | Severity | Description |
|---|---|---|
| Inconsistent Navigation Pattern | P2 | Mix of top tabs, hamburger menu, and buttons without clear hierarchy |
| Hidden Features | P1 | Critical features (font settings, support, TA info) buried in unintuitive locations |
| Non-iOS Standard Patterns | P2 | Top tab navigation, hamburger menu deviate from iOS conventions |
Visual Design & Consistency
| Issue | Severity | Description |
|---|---|---|
| Color Palette Issues | P2 | Lime green gradients, inconsistent use of purple/yellow/cyan |
| Typography Hierarchy Lacking | P1 | Much text same size with no visual structure |
| Inconsistent Spacing | P2 | Some screens cramped, others have excessive white space |
| Outdated Loading Patterns | P2 | Visible loading screens instead of modern skeleton states |
Accessibility
| Issue | Severity | Description |
|---|---|---|
| Color Contrast | P1 | Light text on yellow background likely fails WCAG |
| Small Touch Targets | P1 | Full-screen button too small, especially for older users |
| Font Discoverability | P0 | Critical accessibility feature (readable Quranic font) is hidden |
Content & Messaging
| Issue | Severity | Description |
|---|---|---|
| Inconsistent Terminology | P1 | Lesson vs. Submission vs. Week used interchangeably |
| Contradictory Messages | P1 | 2-day vs. 5-day turnaround times |
| Unclear Microcopy | P2 | Many UI elements lack explanatory text |
| Outdated Branding | P2 | "QR" instead of "QuranFlow" in multiple places |
13. Prioritized Recommendations
Immediate (P0 - Ship Stoppers)
- Fix video playback reliability - core functionality broken
- Implement submission history and feedback access - users cannot learn from feedback
- Display timezones for live sessions - feature unusable without this
- Make mushaf font default and prominent - critical for Quranic learning app
- Fix notification system - completely broken, cannot be acted upon
- Create functional first-week onboarding - must include font selection
- Rebuild user profile screen - lacks essential account management
- Surface student level and TA information - currently hidden
High Priority (P1 - Major UX Impact)
- Redesign App Store screenshots
- Resolve Conversations feature confusion - define clear purpose
- Add contextual information to Lessons (weeks, dates, topics)
- Implement native or native-feeling video player
- Make completion reversible
- Clarify feedback terminology and access
- Standardize turnaround time messaging
- Create session RSVP and calendar integration
- Implement instructor filtering for live sessions
- Fix text formatting and hierarchy in live sessions
- Add clear progress context and labels
- Make support easily accessible
- Standardize settings access
- Fix color contrast for accessibility
- Update all branding from QR to QuranFlow
Medium Priority (P2 - Polish & Improvement)
- Eliminate loading screens with pre-caching or skeletons
- Optimize video player width
- Create descriptive video thumbnails
- Migrate to iOS-standard bottom tab bar navigation
- Add lesson metadata and descriptions
- Redesign submission screen visual design
- Standardize live session card format
- Fix icon alignment and sizing
- Remove redundant progress visualizations
- Consolidate redundant UI elements
- Add recording process instructions
- Fix menu header cut-off issues
- Improve overall visual design consistency
- Update color palette
- Fix hamburger menu navigation pattern
Low Priority (P3 - Nice to Have)
- Reduce QuranFlow logo size or reposition
- Remove redundant "Home" from "Your Upcoming Home"
- Clarify green dot indicator meaning
- Remove redundant icon size indicators
- General visual polish and refinement
14. Recommended Next Steps
- Technical Audit: Investigate video streaming infrastructure, CDN, and player implementation
- Accessibility Audit: Full WCAG 2.1 compliance check, especially color contrast
- Information Architecture Review: Consider card sorting exercise to restructure navigation
- Design System Creation: Establish consistent color palette, typography scale, spacing system
- User Testing: Validate fixes with actual users, especially older demographic
- Onboarding Flow Design: Create comprehensive first-use experience
- Analytics Implementation: Track feature discovery rates (especially font settings, support access)
Appendix A: Screen Inventory
Based on audit, the following screens exist in the app:
- App Store Listing (external)
- Home (tab)
- Lessons (tab)
- Submissions (tab)
- Lesson Detail (individual lesson view)
- Recording Interface (submission recording)
- Live Sessions (appears to be tab or section)
- Progress/Stats (accessed via top-right percentage circle)
- Notifications (accessed via bell icon)
- User Profile (accessed via top-right user icon)
- Side Menu (accessed via top-left hamburger icon)
- Settings (within side menu)
- Support (within side menu)
- Feedback History (within side menu)
- Resources (within side menu)
- Recordings (within side menu)
Appendix B: Framework Notes
This audit uses:
- Nielsen Norman Group UX Review Framework for systematic analysis
- HEART Metrics for impact categorization (Happiness, Engagement, Adoption, Retention, Task Success)
- Severity Classification:
- P0 (Critical): Blocks core functionality or causes major user frustration
- P1 (High): Significantly impacts user experience or engagement
- P2 (Medium): Noticeable issues that should be fixed for polish
- P3 (Low): Nice-to-haves and minor refinements
End of Audit Report