Accessibility at
EstudyLog

EstudyLog Accessibility & Design Documentation
Notes 1: This documentation was documented in a dark mode environment on an ios 26 liquid glass. The description might vary in earlier versions of ios or in light mode.
Notes 2: Most of our design are being implemented with a guidance of Apple’s Human Interface Guidelines
Notes 3: Estudylog Accent color in Dark Mode is #0984FF, which is vivid, electric blue. It is not a subtle or natural shade found in a forest; it is punchy, synthetic, and energetic. This is not the "numbing cold" of snow or deep ice. Instead, imagine the sensation of jumping into a swimming pool on a hot day. It is a refreshing, awakening coolness. It feels like a splash of cold water on your face startling, crisp, and revitalizing. There is no roughness or grit in this color.It feels like the surface of a brand-new glass screen or a polished piece of cool metal.It is sleek, frictionless, and aerodynamic. If you ran your hand over it, your fingers would glide without resistance. It tastes like "Blue Raspberry" candy or an unnaturally cold energy drink. It is sweet, sharp, and chemically crisp.
Phase 1: The Launch Experience (Screen 1)
State: First-time App Launch.
1. Visual Context
The user is greeted by a high-contrast, minimalist onboarding screen designed to set expectations for the app's utility. 
2. Header Element
Location: Top-Left.
Text: "Welcome to EstudyLog".
Style: "Welcome to" is White; "EstudyLog" is highlighted in Accent Color.
Purpose: Branding and welcome message.
3. Feature Breakdown (Value Proposition)
Three distinct items explain the app features, stacked vertically in the center of the screen. Each consists of an icon on the left and text on the right.
Item 1: Grades
SF Symbol Icon: graduationcap.fill (Color: Indigo Gradient).
Text: "Track Grades & Goals" - "Calculate what you need on your final exam to hit your target GPA."
Item 2: Planning
SF Symbol Icon: sparkle (Color: Cyan Gradient).
Text: "Smart Daily Plan" - "Stop guessing. Get a smart daily schedule based on your deadlines."
Item 3: Consistency
SF Symbol Icon: flame.fill (Color: Red/Orange Gradient).
Text: "Visualize Consistency" - "Build your streak and watch your contribution graph fill up."
4. Primary Interaction (The Gateway)
Element: A large, pill-shaped button fixed to the bottom of the screen.
Visuals: Accent Color background with White text.
Label: "Continue".
Function: This is the only interactive path forward. Pressing this button completes the onboarding phase and transitions the user to the main interface (Screen 2).

Phase 2: The Overview Dashboard (Screen 2)
State: Main App Interface (Home Tab) - "Empty State" (Fresh Install). Transition: This screen appears immediately after the user taps "Continue" on Phase 1.
1. Global Navigation Layout
The app uses a standard bottom Tab Bar navigation structure containing four distinct sections.
Tab 1 (Active): "Home"
SF Symbol: house.fill
State: Currently selected (highlighted Accent Color/Grey pill shape).
Tab 2: "Courses"
SF Symbol: book.fill
Tab 3: "Calendar"
SF Symbol: calendar
Tab 4: "Daily Plan"
SF Symbol: sparkles
2. The Header Area
Title: "Overview" (Large, Bold, White, Top-Left).
Settings Action: Located at the Top-Right.
Visual: A circle containing a gear icon.
SF Symbol: gearshape.fill.
Function: Opens the Settings menu.
3. The "Streak" Dashboard Card
Located immediately below the header.
Visuals: A rounded rectangular card with a corner radius of 12 points  with a linear gradient of  Accent Color with 60 percent opacity on the left and black with 40 percent opacity on the left in the background.
Left Side Data:
Label: "Current Streak".
Value: "0" accompanied by a Fire emoji.
Sub-label: "Longest: 0 days".
Right Side Data:
Label: "Today".
Value: "0m" (0 minutes).
Sub-label: "This week: 0m".
Purpose: Motivation status. Shows zeros because the user is new.
4. The "Get Started" Section (Primary Call to Action)
Crucial Context: Because the user has not added any data yet, the app prioritizes this section to guide them.
Visuals: A large Card with a Dark Grey background.
Icon: An accent color circle containing a graduation cap (graduationcap.fill).
Title: "Set Up Your First Course".
Body Text: "Add a course to start tracking your syllabus and calculate your target grades."
The Button (Primary Action):
Inside this card is a bright Accent color pill button.
Icon: book.badge.plus.fill.
Label: "Create Course".
Interaction: Tapping this is the primary goal for a new user. It opens the "Add Course" sheet.
5. Quick Stats Grid
Located below the "Get Started" card. A 2x2 grid of smaller square cards displaying empty metrics.
Top Left: "Total Hours".
Icon: Red person/clock (person.crop.circle.badge.clock).
Value: "—" (Dash indicating no data).
Top Right: "Active Courses".
Icon: Green open book (book.fill).
Value: "0".
Bottom Left: "Total Sessions".
Icon: Orange chart (chart.bar.fill).
Value: "0".
Bottom Right: "Avg. Rating".
Icon: Yellow star (star.fill).
Value: "—".
6. Floating Action Button (FAB)
Location: Floating above the content in the bottom-right corner, just above the tab bar.
Visual: A circular button with a liquid glass background and accent gradient color for the icon inside it.
Icon: A timer symbol (timer).
Function:Tapping this opens the Start Timer sheet. But the user is not able to start a timer because timers are bound to a course so the first step should be adding a course.
Phase 3: The "Add Course" Sheet
State: Modal Overlay / Form Input. Transition: Appears immediately after tapping "Create Course" on the Home tab.
1. Header & Navigation Actions
The screen features a standard navigation bar layout at the top.
Title: "Add Course" (Large, Bold, White(Primary), Left-aligned below the buttons).
Left Action (Cancel): "Close" button.
Visual: Pill-shaped liquid glass button.
Function: Dismisses the sheet without saving, returning the user to the Home screen.
Right Action (Confirm): "Save" button.
Visual: Pill-shaped liquid glass button.
State: Currently Disabled/Dimmed.
Logic: This button remains inactive until the user enters a valid "Course Name." Once active, it creates the course and closes the sheet.

2. Section 1: Course Details
This is the first grouping of input fields, contained within a dark grey rounded rectangle.
A. Course Name Input
Label: Hidden (Placeholder acts as label).
Placeholder Text: "Course Name (e.g., Biology 101)" in dark grey.
Function: The text field where the user types the title of their subject.
B. Course Color Selector
Label: "Course Color".
Visual Element: A colored circle button on the far right (currently showing a Blue/Cyan gradient with a rainbow colored selection ring).
Function: Tapping this opens a color picker grid.
Why this matters: This color will color-code the course on the study session card in the dashboard as well as the course card in the courses tab for quick visual identification.
C. Final Exam Configuration (Crucial for Smart Plan)
Row 1: Toggle Switch
Label: "Set a Final Exam Date".
Visual: A toggle switch on the right. Currently OFF (Grey track, white circle).
Logic: If the user does not toggle this on, the app's internal model will attempt to infer the final exam date. This inference is based on the user's device Time Zone and standard academic terms (e.g., distinguishing between North American Winter/Fall terms vs. other global academic calendars).
Row 2: Date Picker
Label: "Goal Date".
Value: Displays "User’s Current Date" (in a grey pill shape).
Function: Defines the end point for the study schedule.
Why this is important: The Smart Daily Plan algorithm works backward from this date to distribute the workload. Without a hard deadline, the app uses the inferred goal date to calculate the daily study volume required to hit the cover all of the topics in your course outline.

3. Section 2: Key Dates
A separate section for adding intermediate milestones before the final exam.
Action Button: "+ Add Quiz or Test Date".
Visual: Accent Color text with a plus symbol to the left.
Function: Allows the user to insert smaller deadlines. 
4. Section 3: Course Outline 
A large text input area at the bottom of the screen.
Label: "Course Outline".
Character Count: "0/20,000" (located top-right of the section).
Placeholder/Helper Text: "Paste your syllabus or outline. We'll extract topics automatically. Optional: add your own, separated by commas."
Deep Functionality (The "Why"):
Topic Extraction: When the user pastes raw text here (from a PDF syllabus or website), the app parses the text to identify distinct study topics (e.g., "Cellular Respiration," "Genetics"). This is the only time the app uses third party AI services. The old version of the app used to use Apple in house LLM models(The foundation framework) but unfortunately the model was not smart enough and would get things wrong occasionally.
Future Utility: These extracted topics are not just for show. Later, when the user opens the Study Timer, these topics will appear as selectable tags. This allows the user to log time specifically against "Genetics" rather than just generic "Biology" time, providing granular data on where they are spending their effort. And Premium users are able to see beautiful charts of all of the topics they have studied and not yet studied.

Phase 4: The Populated Home Screen (Post-Setup)
State: Main App Interface - "Active State". Transition: This screen appears immediately after the user taps "Save" on the "Add Course" sheet. The "Add Course" sheet dismisses, revealing that the dashboard has updated to reflect the new data.
1. Visual Status Updates
The screen structure remains the same as the "Overview," but the data points have evolved to reflect the user's first action.
Quick Stats Update:
"Active Courses" Tile: The Green card now displays the value "1" instead of "0". This confirms the course was successfully created.
Context: The other stats (Total Hours, Total Sessions) remain at 0/dash because no time has been logged yet.
2. The "Get Started" Card Evolution
The large call-to-action card in the center has dynamically changed based on the user's progress.
New Title: "Log Your First Win".
New Icon: A blue circle with a flame symbol (flame.fill).
New Body Text: "Start a timer to light up your contribution graph and build your streak.".
Primary Action Button:
Label: "Start your first session".
Visual: Solid System Blue pill button with a flame icon.
Interaction: Tapping this opens the Start Timer sheet.
3. Alternate Interaction (The FAB)
Floating Action Button: The circular timer button in the bottom right corner remains visible.
Redundancy: Users can tap either the large "Start your first session" button or this Floating Action Button. Both actions trigger the exact same "Start Timer" sheet.

Phase 5: The "Start Timer" Sheet
State: Modal Overlay. Context: This sheet allows the user to configure their study session before the clock starts.
1. Session Configuration (Top Section)
Session Type Selector:
Component: A Segmented Control.
Options: Reading, Practice, Review, Assignment.
Default: "Reading" is currently selected by default (highlighted in grey).
Course Selector:
Label: "Course".
Value: "Immunology".
Visual: The course name is in Blue, indicating it is selectable. If the user had multiple courses, tapping this would allow them to switch.
2. Topic Selection Logic (Conditional UI)
This section demonstrates the outline extraction integration mentioned in the "Add Course" phase.
The Trigger: A toggle row labeled "Choose topics from outline".
Visibility Condition: This option only appears because the user pasted a course outline/syllabus in the previous "Add Course" step. If no outline were added, this row would be hidden. Notes: You can always go back to the specific course screen and press edit to add or change your outline.
State A (Toggle OFF): The view is compact. The user logs time for the general course "Immunology" without specific details.
State B (Toggle ON): The view expands vertically to reveal the extracted topics.
3. Expanded Topic List
When the user flips the toggle to ON, the extracted topics are displayed as a selectable list.
Interaction: Multi-select checklist.(you can only select up to 3 topics for each unique session and the time studied will be divided equally for each topic)
Visuals: A list of radio buttons or check-circles on the left.
Data Source: These titles were parsed automatically from the raw text the user pasted earlier.
Visible Examples:
"Tumor immunology"
"Transplantation and vaccine"
"Allergy and hypersensitivity"
"Tolerance and autoimmunity"
Benefit: Selecting a topic here tags the session with metadata, allowing for detailed analytics later (e.g., "You spent 4 hours on Tumor Immunology but only 30 minutes on Allergies").
4. The "Start" Action
Location: Top-Right of the sheet.
Visual: A solid Accent color button labeled "Start".
Function: Tapping this dismisses the configuration sheet and immediately launches the Active Session Timer.
Phase 6: The Active Study Session (Home Dashboard)
State: Timer Running (Background Mode). Transition: This state is visible immediately after the user taps "Start" in the previous phase. The Home Screen updates to show the live activity.
1. The "Active Study Session" Card
The large "Get Started" area is now replaced by a dynamic Active Session Widget.
Header:
Icon: A clock/history symbol (clock).
Title: "Active study session".
Subtitle: "Immunology" (The selected course, aligned to the right in Grey).
The Timer:
Display: Large digital clock font showing specific elapsed time (e.g., "00:03").
Interaction: Tapping anywhere on the background of this card (away from the buttons) opens the detailed Session Notes view.
2. Topic Integration 
Visual Element: A text block located between the timer and the control buttons.
Content: "Topics: Transplantation and vaccine, Tumor immunology...".
Logic: Because the user selected specific topics during the setup phase (Phase 5), these are automatically injected here. If no topics were selected, this text area would be empty or show a generic "No notes" placeholder.
Purpose: This serves as a constant reminder of the specific focus of the current study block. 
3. Quick Controls (The Mini-Player)
Three distinct buttons appear at the bottom of the card for immediate control:
Pause:
Visual: Blue pill button with pause.fill icon and label "Pause".
Finish (Complete):
Visual: Circular button with a checkmark (checkmark).
Function: Immediately triggers the "Finish Session" rating sheet.
Cancel:
Visual: Pill button with red text/icon (xmark.circle) labeled "Cancel".
Function: Discards the session without saving data.

Phase 7: Session Notes (Expanded View)
State: Full Screen / Editing Mode. Transition: Accessed by tapping the "Active Study Session" card on the Home Screen.
1. The Notes Editor
This screen allows for real-time documentation of the study session.
Navigation:
Back Button: Top-left (chevron.left). Returns to Home without stopping the timer.
Header: "Session Notes".
Finish Button: Top-right. Identical function to the "Checkmark" button on the Home screen (triggers the rating sheet).
Metadata Tags:
Course Tag: "Immunology" (Yellow/Orange pill).
Session Type: "Reading" (with book icon book.fill).
Time Stamp: "Sun, Dec 7 • 11:13 PM - 11:13 PM".
2. Auto-Populated Content
The Text Body: The text field is not empty. The topics selected in the setup phase ("Transplantation and vaccine, Tumor immunology") are pre-pasted here as the starting text.
User Action: The user can tap into this field to add more details, summary points, or reminders. These notes are saved with the session history. Users can always go back and change the session notes later only the session notes are editable in a session.

Phase 8: The "Finish Session" Flow
State: Modal Overlay / Rating. Transition: Triggered by tapping "Finish" (from Home OR Session Notes).
1. The Rating Sheet
A dark overlay appears at the bottom of the screen to collect qualitative data about the session.
Title: "Finish Session".
Prompt: "How productive your session was?".
The Star Rating System:
Visual: A row of 5 star icons (star / star.fill).
Default State: The app pre-selects 3 out of 5 stars.
Interaction: The user can tap any star to adjust the rating (e.g., tapping the 5th star marks it as highly productive).
2. Final Commit
Action: "Save" button (Top-Right of the sheet).
Outcome:
The session is saved to the database.
The "Active Session" card is removed from the Home Screen.
The Home Screen stats (Total Hours, Streak) update to reflect the new time.The stats are being calculated by the servers so there is a slight few seconds delay between finishing a session and your new stats data reflecting that.
Phase 9: The Post-Session Dashboard (Data Visualization)
State: Main App Interface - "Populated State". Transition: This screen appears immediately after the user saves their session rating. The interface now shifts from "onboarding" to "tracking," displaying rich data visualizations.
1. Streak & Activity Updates
The top card, which previously showed zeros, is now active.
Current Streak:
Value: The large number now reads "1".
Time Metrics:
Today: Displays the total time logged (e.g., "20m").
This Week: Updates to match the cumulative total.
2. The "Study Volume" Chart (New Feature)
Context: This card appears dynamically. It was not visible before the first session was logged.
Location: Inserted immediately below the Streak card.
Title: "Study Volume".
Controls: A segmented picker in the top right allowing the user to toggle between "7d" (7 Days) and "30d" (30 Days) views.
Visual Visualization:
A smooth accent color line graph representing study duration over time.
X-Axis: Days of the week (T, W, T, F, S, S).
Data Point: A visible spike or rise at the far right, representing the just-completed session.
Summary Text: "0.2 h last 7 days" (displayed at the bottom left of the chart).
3. Recent Sessions List
Context: A new list section appearing below the chart.
Item Structure:
Course Indicator: A vertical colored bar (Yellow/Orange) on the far left identifies the course (Immunology).
Title: "Immunology" (White, Bold).
Metadata: "Topics: Transplantation and vaccine, Tumor immunology" (Grey, truncating if too long).
Rating Display: 5 Gold Stars (star.fill) indicating the user rated this specific session highly.
Timestamp: "5 minutes ago" (Relative time).
Duration: "20m" (on the far right).
4. Quick Stats Grid (Fully Populated)
The 2x2 grid at the bottom now displays complete metrics:
Total Hours: "0.2 h" (Red icon). Note: The app converts minutes to decimals for cleaner tracking.
Active Courses: "1" (Green icon).
Total Sessions: "1" (Orange icon). Indicates the total count of saved logs.
Avg. Rating: "5.0" (Yellow star icon). This value is the mathematical average of all session ratings.

Conclusion & Next Steps
Congratulations! The user has successfully set up a course and logged their first "Win." The Home Screen is now fully operational.
Recurring Action: To log future sessions, the user simply taps the Floating Action Button (blue gradient timer icon) in the bottom right corner, which is always accessible from this screen.
Phase 10: The Calendar Tab (Visualizing Consistency)
State: Main App Interface - Tab 3 Selected. Context: This screen provides a high-level view of the user's study habits over time, utilizing a "Heatmap" visual style to encourage consistency.
1. The Calendar Grid (Heatmap & Navigation)
The upper portion of the screen displays a standard monthly calendar view (e.g., "December 2025").
Date Selection State:
The Selected Day: The currently active date (e.g., the 7th) is highlighted with a solid White background and Black text for maximum contrast.
Data Preview: Inside the selected day's square, the total study duration for that specific day is displayed in small text (e.g., "6m") directly under the date number.
The Heatmap Logic (Visual Feedback):
Unselected Study Days: When a day is not currently selected but has recorded study time, it appears in shades of the Accent Color.
Color Intensity: The darkness/saturation of the blue correlates to the total hours studied. A light blue indicates a short session, while a deep, dark blue indicates a heavy study day. This allows users to scan the month and instantly visualize their most productive days.
Empty Days: Days with no activity remain with a black background and grey text.
2. The Daily Session Log
Located immediately below the calendar grid, this section details the specific activity for the selected date.
Header: "Sessions on Dec 7, 2025" (Updates dynamically based on selection).
Session Card:
Visual Identity: A vertical colored bar on the far left (e.g., Yellow/Orange) identifies the course at a glance.
Primary Text: "Immunology" (Course Title).
Secondary Text: "Topics: Transplantation and vaccine, Tumor immunology" (Truncated if necessary).
Performance: Displays the 5-star rating the user gave themselves upon completion.
Timing: Shows the relative time ("8 minutes ago") and the total duration ("6m").
3. The Weekly Summary Card
Anchored at the bottom of the scrollable view is a summary dashboard for the specific week selected.
Visuals: A dark grey card distinct from the pure black background.
Metrics:
"Total Hours": Displays the cumulative sum for the week (e.g., "0.1") in large blue text.
"Daily Average": Displays the calculated mean (e.g., "0.0").
Mini-Chart: A bar graph visualization runs along the bottom of this card, showing the relative height of study hours for each day of the week (S, M, T, W, T, F, S).

Phase 11: The Daily Plan Tab (Account Requirement)
State: Main App Interface - Tab 4 Selected - Guest Mode. Context: This tab houses the application's most advanced scheduling features. However, because these features require server-side processing or cloud syncing to generate "tailored" plans, they are locked behind an authentication wall.
1. The "Locked" Dashboard state
Header: "Daily Plan" (Large, Bold, White).
Course Selector:
Label: "Course".
Current State: "Immunology" is selected (Blue text).
Action Button: A wide, blue button labeled "Generate options" with a sparkle icon.
Interaction: Tapping this triggers the authentication prompt below if the user is not signed in.
The Auth Prompt Card:
Visuals: A large, dark grey card centered in the view.
Icon: A blue user profile icon with a plus sign (person.crop.circle.badge.plus).
Title: "Get your daily plan".
Explanation: "Sign in free to generate a plan tailored to your courses and progress." This text clarifies why an account is needed (personalization and data persistence).
Primary Action: "Create Account" (Solid Blue Button).
Secondary Action: "I already have an account" (Blue text link) for returning users.

Phase 12: The "Create Account" Sheet
State: Modal Overlay. Transition: This sheet slides up immediately after the user taps "Create Account" on the Daily Plan tab.
1. Header & Navigation
Navigation Bar:
Left: "Close" button (Dismisses the sheet).
Right: "Log In" button (Switches the view to the Sign-In form if the user tapped the wrong button).
Branding:
Logo: The app's icon (a stylized "E" with a clock and calendar) is prominently displayed at the top.
Title: "Create your account".
Subtitle: "Join and start tracking your study sessions in seconds.".
2. The Input Form
The form asks for three essential pieces of information to establish an identity.
Field 1: Full Name
Label: "Full Name".
Placeholder: "Your full name".
Purpose: Used for personalization (e.g., "Welcome back, [Name]").
Field 2: Email
Label: "Email".
Placeholder: "you@example.com".
Purpose: Unique identifier for the account and password recovery.
Field 3: Password
Label: "Password".
Visual Security: The text is obscured by dots (......) by default.
Toggle: A "Hide/Show" eye icon (eye.slash) on the right allows the user to verify their typing.
3. The Commit Action
Button: "Sign Up".
State: Currently Disabled/Dimmed (Grey text on Dark Grey background).
Logic: This button remains inactive until all three fields (Name, Email, Password) contain valid data.
Footer: Small legal text below the button links to "Terms" and "Privacy Policy," ensuring the user consents to data handling before signing up.
Phase 13: The Active Daily Plan (Post-Login)
State: Main App Interface - Tab 4 - Authenticated. Context: Now that the user is logged in, the "Create Account" wall is removed. The interface focuses on generating a study strategy based on the user's available time and course load.
1. The Generator Dashboard
Course Selection:
Visual: The "Course" dropdown displays "Immunology" in blue, indicating it is the active subject context.
Primary Action:
Button: "Generate options".
Icon: Sparkles (sparkles).
Function: Tapping this triggers the recommendation engine. The app analyzes the user's syllabus, past performance (mastery), and current time of day to propose specific study blocks.

Phase 14: The Generated Strategy (Results)
State: List View (Post-Generation). Transition: Appears immediately after tapping "Generate options."
1. The "Time Budget" Summary
A high-level card appears at the top to set expectations for the session.
Header: "Recommended time: 160m".
Icon: A clock with a checkmark (clock.badge.checkmark).
Timeline Calculation: "Start now → finish around 2:13 AM".
Logic: The app calculates the end time based on the current wall-clock time plus the recommended duration.
Advisory: "Tip: You can stop earlier if you finish the deliverable.".
2. Smart Option Cards 
Below the summary, the app presents distinct "Options" (Option A, Option B, etc.). The user must choose one path. This choice reduces decision fatigue.
Visual Layout of an Option Card (e.g., Option A):
Title: "Allergy and hypersensitivity" (The specific topic from the syllabus).
Tags:
Activity Type: "Reading" (Book icon).
Duration: "160m" (Pill shape).
Methodology Selectors:
Three toggle-like pills allow the user to choose their preferred technique: "Deep Focus", "SQ3R", or "Cornell Notes". currently, "Deep Focus" is pre-selected.
3. "Why This?" (The Explainability Engine)
This section explains why the algorithm chose this specific topic right now.
Icon: Info symbol (info.circle).
Metrics displayed:
Priority: "0.78" (Likely calculated based on exam proximity or topic weight).
Mastery: "0.20" (Indicates low confidence/retention, hence the need to study it).
Coverage: "0m coverage" (The user has spent zero minutes on this topic so far).

Phase 15: Detailed Plan Execution (Expanded View)
State: Expanded Card Details. Transition: The user taps the arrow or body of "Option A" to see the full instruction set.
1. "What you'll do" (Actionable Steps)
This section breaks the 160-minute block into a concrete workflow to prevent procrastination.
Goal Statement: "Laser focus for one outcome. Aim: one clear win on 'Allergy and hypersensitivity'.".
Step-by-Step Breakdown:
Define 'done' (≈16m): "Write 1 success criterion in your own words.".
Focus block (bulk): "Mark definitions, examples, and counter-examples.".
Mid-course pulse check: "Mark unknowns/gaps with ⚑; continue deliberately.".
Close the loop (last 22m): "Produce a one-paragraph TL;DR + 3 flashcards.".
Momentum Tip: "Park a sticky note with the next move.".
2. The Final Commitment
Button: "Choose & Start" (Bottom Right of the card).
Visual: Bright Blue with a Play icon (play.fill).
Function: Tapping this immediately launches the Active Timer (Phase 6), pre-loaded with the "Allergy and hypersensitivity" topic and the selected methodology settings.
Phase 16: The Courses Tab (Detail Dashboard)
State: Main App Interface - Tab 2 Selected - Course Details. Transition: This screen appears after the user taps on a specific course card (e.g., "Immunology") from the main list.
1. Header & Quick Actions
Navigation:
Back Button: Top-left arrow (chevron.left).
Title: "Immunology" (Large, Bold, White).
Subtitle: "course stats".
Global Controls (Top Right):
"Edit": Opens the info for this specific course ( to adjust the final exam date or add any key dates such as quiz or changing to your course outline).
"Play" (Representing Active): you can change the state of the course from here, only active courses are able to track your session for, you can change the state to paused , completed and archived.
Phase 17: Course Status Modes (Active vs. Paused)
State: Context Menu & Restricted View. Context: Users can change the status of a course to clean up their home screen without deleting data.
1. Changing Status
Trigger: Tapping the "Edit" or "Status" icon in the header opens a context menu.
Menu Options:
Active (Play icon): Course appears on Home/Calendar.
Paused (Pause icon): Course is hidden from active rotation but data is kept.
Completed (Checkmark): Course is finished.
Archived (Trash/Box): Course is moved to cold storage.
2. The "Paused" State (Hidden Sessions)
If the user selects Paused:
Visual Change: The Topic/Session list at the bottom disappears.
Replacement View: A large "Hidden" icon (Eye with a slash eye.slash).
Message: "Sessions hidden. This course is Paused. Activate it to see its sessions.".
Reasoning: This prevents cluttering the interface with data from courses the user is not currently focusing on.
2. The Statistics Grid
A 3x2 grid provides a comprehensive overview of performance for this subject.
Row 1:
Total Hours: "6m" (Red Icon). Total time invested.
Total Sessions: "1" (Orange Icon). Number of logs.
Row 2:
This Week: "0m" (Teal Icon). Recent activity.
Avg Session: "6m" (Teal Icon). Average duration per log.
Row 3:
Avg Rating: "5.0" (Yellow Star). Qualitative performance.
Common Type: "Reading" (Purple Book). The user's dominant study method
3. The "Time by Type" Chart
Visual: A large, thick ring chart (Donut Chart).
Data Representation:
The Ring: Colored segments represent different study types. Currently, it is 100% Blue, corresponding to "Reading".
Legend: "Reading - 6m" displayed to the right.
Pacing Metadata:
Below the chart, small text reads: "2/13 studied" (Topics covered) and "7-day pace 1m/d" (Current velocity)..

Phase 18: Syllabus Coverage (Premium Feature)
State: Conditional Section. Logic: This section helps users visualize their content distribution. Note: This is a Premium-only feature. Users on the free tier will not see this chart; their view skips directly to the Session list below.
1. Search & Organization
Search Bar: "Search topics" field allowing users to filter specific syllabus items.
Sort Action: A blue "Sort" button allows reordering topics (e.g., by mastery or name).
2. The Accordion Lists
The syllabus is split into two collapsible categories:
"Studied" Group:
Visuals: Circular progress indicators for each item.
Example Item: "Tumor immunology".
Progress: "1%" (Calculated based on time spent vs. expected time).
Time: "3/276m" (3 minutes spent out of 276 minutes recommended).
"Not yet studied" Group:
Visuals: Greyed-out progress circles (0%).
Example Item: "Allergy and hypersensitivity" (0/276m).

Conclusion: This concludes the full documentation of the user journey, from the Welcome Screen to Account Creation, Daily Planning, and Course Management.
Estudylog wishes everyone the best in their academic endeavors 🙂