Nutqi — Design Audit (Figma deep navigation)

Source: Figma — Nutqi · Pages navigated: design system, ui screens (page website intentionally ignored per product owner instruction).

Nutqi is a bilingual (Arabic-first RTL, English secondary) speech-therapy platform connecting families of children with speech/communication disorders to specialists and therapy centers, with full clinic operations (bookings, therapy plans, assessments, HR, payments).

Pages#

Actors / portals found in ui screens#

1. Registration (section Registration, node 215-3649)
2. Guardian / Patient — Guardian & self-patient portal (node 1241-27676, 36160×16000)
3. Specialist — Independent specialist portal (node 909-25744, 32299×25664 — largest)
4. Center — Owner (node 1264-27677)
5. Center — Manager (node 1920-30118, mirror of owner)
6. Center — Secretary (node 1929-155611, reduced scope)
7. Center — Specialist (node 1552-19445, specialist + employee-HR self-view)

Shared loose components on the page: side menu (patient & guardian variant), log-out confirm, delete confirm modals (Delete / Cancel), rename modal (Rename), confirm button, nurse-line illustration set, Basmala caption.

1. Registration flows#

Frames: Log in, Wrong password (login error state), sign-up component set ×4 variants, Verify email & phone number, Enter confirmation code (OTP), Set new password.

• Login (1440×797): fields — Name (person icon; see Gap G02), Password with eye toggle, Remember password checkbox, "Forgot your password?" link, CTA Log in, divider "or", Google sign-in (Sign in with Google), Create account link. Split layout with family-therapy illustration.
• Login error: password field red border + "Wrong password" message with warning icon.
• Sign-up (1440×1390, component set, 4 account types as pill toggle):
  • Personal (self patient) · Guardian · Doctor or specialist (has sub-dropdown for the title) · Center
  • Identical form for all variants (Enter your details): first name, last name, email, phone, password, confirm password, Gender (Male/Female with avatars), Date of birth (day/month/year), CTA Create account, Google alternative, Log in link. (See Gap G03 — center gets no org fields.)
• Verify email & phone (1440×604): explanation "Please enter your email address and phone number so the OTP confirmation code can be sent", email + phone inputs, Confirm.
• OTP (1440×674): 4 digit boxes, 00:59 countdown, "Resend?" resend link, Confirm. Illustration shows SMS OTP.
• New password (1440×674): New password + Confirm new password + Confirm. "Please choose a strong password and keep it safe."

2. Guardian / Patient portal#

Sidebar: Statistics · Personal profile · Settings · Bookings list · Programs & assessments · Payments. Topbar: profile/notification/chat circle buttons + global search.

Screens confirmed:

• Welcome modal ("Welcome to Nutqi 👋"): prompts completing the child's personal file; Skip + primary CTA; overlays the profile page.
• Personal profile — two top-level toggles Child information | Guardian information, child tabs: Personal information (photo, first/last name, Arabic full name, English full name, DOB, national ID, gender, Confirm), Diagnosis (optional: Fill in the form button → 3-page diagnosis questionnaire), Official papers & attachments (docs upload "Add an image or file"; Videos upload with guidance to record a short intro video of the child speaking). Variants exist for self-patient (Patient — personal) and second child (Child information 2).
• Diagnosis questionnaire (Diagnosis — questions & answers, 600×806 modal, 3 pages): Q1 "Why are you registering with Nutqi?" (checkboxes: speech delay, does not speak at all, unintelligible speech), Q2 "When did you notice the problem?" (radios: since birth, less than two years ago, more than two years ago, after a specific illness/incident), Q3 "The child's motor development" (yes/no rows: did they sit/walk at a normal age? any weakness of movement?), pagination 1/3.
• Settings — tabs: Password (current/new/confirm), Languages (Choose language + Set level + Add language), Notifications (channel checkboxes with verification inputs: email, WhatsApp, Telegram).
• Bookings list — filters (Booking type, Search type, Search), table: # / Photo / Name / Specialty (speech therapy, autism) / Booking date / Booking time / Booking type (online/offline chips) / Address (Tanta, 6th of October, Al-Tagamoa, Helwan) / Status (pending, waiting, postponed, done), pagination, export: "You can download the file as Excel / PDF".
• Programs & assessments — search; two card grids: Plans (therapy plans) and Assessments; each card = document thumbnail + Therapy plan no. (n) + date + status chip Not done/Done.
  • Unanswered plan (Plans not answered yet, 1440×3650): full questionnaire renderer — text inputs, radios, checkboxes, star rating, likert 1-5, matrix tables (rows × First/Second/Third), percent, date, file upload; Required tags; New badge.
  • Answered plan (Answered plans, 1440×3179): "First program" intro + read-only Q&A list with answer-type tag (short sentence, long paragraph …).
• Payments — frame body is EMPTY in the design (sidebar + topbar only). See Gap G01.
• Specialist public profile (viewed by guardian; 6 tabs): Overview (analytics: area chart, 2 donuts, stat chips, top-programs bars) · Specialist details (Education & courses: degree card Cairo University/speech therapy/dates + graduation certificate .PNG; trainings; Videos video cards) · Clinics (clinic cards: Tanta/Helwan clinic — days chips, hours, address, embedded map, CTA Book a consultation) · Bookings schedule (sessions table: Name/Day/Date/Time/Duration 30 min–2 hr/Session type speech therapy–skill development–eye contact/Booking type online-offline/Address/Price EGP 130–500 + Book an appointment CTA) · Programs (Plans & assessments doc grid) · Reviews (Reviews & client feedback cards + Today filter). Right rail: profile card (name, speech-therapy specialist, rating 5.0★, sessions count 120/500, contact details phone/email).
• Booking modal (Book an appointment, 600×769): Name, Address (clinic dropdown with pin icon), Date, Available slots grid of half-hour checkboxes 00:00–07:30, Cancel/Confirm. (See Gap G04.)

3. Independent specialist portal#

Sidebar: Statistics · Personal profile · Settings · Bookings list · Work hours · Programs · Jobs · Payments · Reviews · Special cases.

• Statistics (home) — activation gate: completion ring (5%) "Welcome to your personal page — please complete the remaining details to activate your profile"; period filter (All/Year/Month/Week/Today); stat cards Average daily case count, Total case count, Earnings (Egyptian pound) each with Pending badge pre-activation; Important tips accordion (how to succeed on the platform); About your personal account: activation video (2:00), FAQ accordions, contact (phone 199797, Chat, Contact at Nutqi.com).
• Personal profile — tabs Personal information (names ar/en, national ID, DOB, phone, email, Gender, Job title specialist/doctor, Address governorate/city/district) · Work information (Add work information: cards with Title, Center, Governorate, City, Specialty children, Sub-specialty speech therapy – physiotherapy, dates, booking price EGP 420, Skills; edit/delete; add-form has University degree and Training or course entries too) · Official papers & attachments (Attachments before/after).
• Settings — tabs: Bookings ("Are you currently available for work?" Available for work toggle; Bookings checkboxes: offline booking, online booking, consultation) · Password · Languages · Notifications · Blocklist.
• Work hours — Calendar (work calendar) + Appointments; modals: Add work slot, Add days, Add rest days.
• Bookings list — table as guardian's plus price/session columns.
• Patient profiles (Patient profile): Overview · Sessions (sessions per patient + Status) · Therapy plan (assigned plans) · Key percentages (plan percentages progress + Daily before/after registration) · Key evaluations (plan evaluations).
• Special cases — manually-added private patients: New special-case file (Case reason), Special-case profile (Overview, Sessions, Attachments before/after registration), Special-case plan 1–4 + Configure special-case plan, Special-case notes, Add special-case session details/time, Add case-progress evaluation, Add session-progress percentage.
• Plans/programs builder — Configure program, Programs (Therapy plan & assessments), Therapy plan — question only (+ edit variants), Program results — questions & answers (+ edit), Program & assessment results, Bookings – child profile – Programs form.
• Payments — designed in the design-system page: Home (wallet: Current total 2,110 Egyptian pounds, Withdrawn 2,000) + Transactions (withdrawal log rows: "2,000 was withdrawn from the wallet and the remaining balance is 2,500 Egyptian pounds" + datetime).
• Reviews — tabs General reviews / Session reviews: cards with reviewer, role (guardian/speech therapy), date, ★ rating, quote, actions Comment + Like.
• Jobs — applied-jobs cards: center name Al-Amal Specialist Hospital, Job title speech-therapy specialist, date; status chips Accepted (teal) / Pending (red clock) / Rejected (dark). (See Gap G08 — no browse screen.)
• Utility modals: Delete ×4, Rename, Notes, Edit permission, Edit absence, Edit overtime hours, Edit penalties, Add deduction (shared with center HR).

4. Center portals#

Owner & Manager — near-identical#

Clusters: Statistics dashboard · Profile management (center profile) · Patients (profiles, bookings, plan results — same profile pattern as specialist) · Staff (staff management) · Appointments/sessions schedule + Requests (requests with Confirm Approve/Decline, Reject confirm modals) · Programs/Plans/Results/Configure (plans engine) · Settings (multiple tabs) · HR suite: Employee clock-in and clock-out (per employee), Attendance, Absence, Rest days, Extra days, Overtime hours, Permissions, Penalties (+ Add deduction), Requests (staff requests), Employee monitoring · Jobs: list + Post a job opening (job posting form: Job title dropdown, Department, Allocated salary, Publish date, Branch dropdown, Job description, Requirements, Key responsibilities, Benefits; actions Publish the job now / Cancel / Save as draft).

Secretary#

Reduced: Statistics · Personal profile · Patients (bookings/profiles/plan results) · Appointments schedule · Settings · own attendance (Clock-in and clock-out).

Center specialist#

Specialist feature set (patients, plans, bookings, evaluations) plus employee self-service HR: Clock-in and clock-out, Overtime hours, Extra days, Absence, Permissions, Penalties, Requests, Monitoring.

5. Design system page#

• Colors: Color Shades Kits — Fayrouz (primary teal) #0BB7B4 with 50→950 scale; blue #1C64F2 with 50→950 scale. Styles list: text color, border color, dashboard (near-white teal-tinted bg), gradiant, wrong color (error red), blue, Fayrouz. Effect styles: dashboard effect, 22. Layout guides: dashboard grid, web.
• Typography: rounded Arabic display face (Baloo Bhaijaan 2–style) for headings; simpler Arabic text face for body. English equivalents needed (see decision D-07).
• Component sheets: components Patient, components Center, components Specialist, Icons (multiple sets: bx:like, uiw:like-o, mingcute:emoji-line, mage:music-fill, Interface/Tag, Edit/Pencil, crop/shape/screenshot/pencil/anticlockwise-line, Interface essential/Star…), images/illustrations, Payments sheets (Home + Transactions), Reviews sheets (General reviews + Session reviews 1), Add current job, Payments — Transactions.
• Patterns: RTL 1440px dashboard shell (right sidebar w/ logo, pill active item; topbar left-side circle buttons + centered search), teal outline cards with 10px radius, status chips (soft backgrounds), pill tab groups, tables with zebra-free rows + soft header, inputs with trailing icon (RTL), primary buttons Fayrouz-500 with white text, secondary outline, modals with close-X on the left corner, illustration-heavy auth screens.

Frame → node-id index (captured)#