Skip to content

ui-mockup-analysis.md

Latest commit

 

History

History
724 lines (565 loc) · 19.1 KB

ui-mockup-analysis.md

File metadata and controls

724 lines (565 loc) · 19.1 KB
Raw

UI Mockup Analysis

Date: May 2, 2026
Source: ui/ folder (5 mockup images)
Total Size: 4.2 MB

Overview

This document analyzes the existing UI mockups to inform implementation decisions and ensure alignment with PRD requirements.

Mockup Inventory

File Size Purpose Priority
bible_reader_study_view.png 782 KB Main study view with 3 panels High
chat.png 1,068 KB AI chat integration High
dual-panel-parallel-view.png 1,115 KB Side-by-side comparison High
no-content-view.png 306 KB Empty state Medium
upload-bible-usfm.png 962 KB Upload modal High

Mockup 1: Bible Reader Study View

File: bible_reader_study_view.png (782 KB)

Layout Analysis

Three-Panel Layout:

  1. Left Panel: "Bible Reader Study View" - Gospel of John 3:1-EV
  2. Center Panel: "Interlinear View" - Greek/English word-by-word translation
  3. Right Panel: "Dictionary" - Word definitions (λόγος - Logos)

Key UI Components

Top Navigation Bar:

  • Logo (Bible icon with blue accent)
  • Search bar (prominent, left-aligned)
  • Navigation tabs: Home (active), Library, Plans, Settings

Panel Headers:

  • Panel title (e.g., "John - Bible", "Interlinear View", "Dictionary")
  • Action icons: Edit (✏️), Star (⭐), Book (📖), More (•••)
  • Close button (×) on dictionary panel

Bible Text Panel:

  • Heading: "Bible Reader Study View" (large, bold)
  • Section heading: "Gospel of John 3:1-EV" (with reference)
  • Verse formatting:
    • Superscript verse numbers (¹, ², ³, etc.)
    • Body text: 16px, comfortable line-height
    • Proper paragraph breaks
  • CTA Button: Blue "Study" button at bottom

Interlinear Panel:

  • Translation selector: "Greek/English Interlinear (ESV)" (dropdown)
  • Word-by-word layout:
    • Original Greek text (large, top)
    • Transliteration (middle)
    • English translation (bottom)
    • Word-level alignment in grid format
  • Bottom tabs: Cross-References, Footnotes, Dictionary

Dictionary Panel:

  • Word entry: Greek word λόγος (large heading)
  • Pronunciation: "Logos (schlilten)."
  • Definition: Full paragraph explaining meaning
  • Cross-references section: Links to John 18-24, John 8:20, etc.

Bottom Navigation Bar:

  • Audio icon (🔊)
  • Search icon (🔍)
  • Bookmarks icon (🔖)
  • Labels for each icon

Design System Observed

Colors:

  • Background: White (#FFFFFF)
  • Top nav: Light gray (#F8F9FA)
  • Panel borders: Light gray (#E0E0E0)
  • Primary blue: #1976D2 (buttons, links, active states)
  • Text: Dark gray (#212121)
  • Muted text: Medium gray (#757575)

Typography:

  • Headings: Sans-serif, bold
  • Body: Sans-serif, regular (likely Roboto or Inter)
  • Greek text: Serif font for readability
  • Verse numbers: Superscript, smaller size

Spacing:

  • Generous padding (16-20px in panels)
  • Comfortable line-height (1.6-1.8)
  • Clear section separation

Differences from PRD

✅ Matches PRD:

  • Multi-panel layout
  • Bible text formatting with verse numbers
  • Action buttons and navigation

⚠️ Deviations:

  • Shows 3 specialized panels (study tools) vs. our "multiple Bible translations"
  • Has top navigation bar (Home/Library/Plans/Settings) - we planned no header
  • Includes bottom navigation bar - we planned no footer
  • Has advanced features (Interlinear, Dictionary) not in MVP scope

Recommendation: Use this as inspiration but simplify for MVP:

  • Remove Interlinear and Dictionary panels (future features)
  • Focus on basic Bible reading with multiple translations
  • Keep clean panel layout and formatting style

Mockup 2: Chat Integration

File: chat.png (1,068 KB)

Layout Analysis

Three-Panel Layout:

  1. Left Panel: "Psalm 23:1" explanation (AI response)
  2. Center Panel: Bible text (Psalm 23)
  3. Right Panel: Dictionary (λόγος definition)

Chat UI Components

AI Chat Panel (Left):

  • User query (top): "Explain Psalm 23:1 in context." (blue bubble, right-aligned)
  • AI response: Long explanation text (white/gray background, left-aligned)
  • AI icon: Small avatar icon next to response
  • Pagination dots: Three dots showing multiple response pages
  • Input area (bottom):
    • Text input with "Thinking..." placeholder
    • Send button (arrow icon)
    • Model selector: "Model: Gemini" dropdown
    • Voice button: Red "End" button (indicating active recording)

Key Features

Voice Chat Active State:

  • Red "End" button with microphone icon
  • Status text: "Thinking..."
  • Model selector showing "Gemini"

Message Layout:

  • User message: Blue bubble, right-aligned
  • AI response: Text block with avatar, left-aligned
  • Clear visual distinction

Bottom Bar:

  • Audio icon (active - red dot)
  • Search icon
  • Bookmarks icon

Design System Observed

Chat Bubbles:

  • User: Blue background (#1976D2), white text, rounded corners
  • AI: White/light gray background, dark text, left-aligned

Voice Status:

  • Active recording: Red "End" button
  • Status text below input
  • Model selector integrated

Differences from PRD

✅ Matches PRD:

  • Chat interface integrated with Bible reading
  • Voice chat capability
  • Model selection (OpenAI/Gemini)
  • Message history

⚠️ Deviations:

  • Chat takes full left panel vs. our "collapsible sidebar section"
  • Voice button is "End" (active) vs. our "Voice/End toggle"
  • No clear indication of OpenAI vs Gemini mode switch

Recommendation: Adapt for our sidebar approach:

  • Chat in collapsible sidebar section (400px expanded)
  • Smaller chat area than full panel
  • Keep voice button states (Ready/Listening/Thinking/End)
  • Add model toggle more prominently

Mockup 3: Dual-Panel Translation Comparison

File: dual-panel-parallel-view.png (1,115 KB)

Layout Analysis

Layout Structure:

  1. Left Sidebar: Bible list (ABC, ESV, NIV, CPE, DSG, PEP, SCH, PLP) + AI Chat collapsed
  2. Left Panel: Genesis 1 (ESV)
  3. Right Panel: Genesis 1 (NIV)

Key UI Components

Left Sidebar (280px):

  • Top: "John - Bible" header with close (×)
  • Bible list:
    • Compact list of translations
    • ESV and NIV highlighted (selected)
    • Scrollable list with 8+ items
    • Clean, minimal design
  • Bottom: "AI Chat" section with close (×)
    • Blue prompt bubble: "Compare the word 'beginning' in these versions."
    • AI response visible (partial)

Panel Layout:

  • 50/50 split vertically
  • Blue divider between panels (drag handle)
  • Panel headers:
    • Title: "Genesis 1 (ESV)" / "Genesis 1 (NIV)"
    • Action icons: Edit, Star, Book, More
    • Close button (×)

Bible Text Content:

  • Chapter heading: "Genesis 1 (ESV)" (large, bold, centered)
  • Verse text:
    • Verse numbers as superscript (¹, ², ³, etc.)
    • Clean paragraphs
    • Proper spacing
    • Readable font size
  • Synchronized scrolling implied (both at top of Genesis 1)

Design System Observed

Sidebar:

  • Background: Light gray (#F5F5F5)
  • Selected items: Blue highlight
  • Text: Dark gray
  • Compact spacing

Panels:

  • White background
  • Blue accent for divider
  • Clear headers with actions
  • Generous padding (24px)

Bottom Bar:

  • Audio, Search, Bookmarks icons
  • Consistent across views

Differences from PRD

✅ Matches PRD:

  • Left sidebar with Bible list
  • Dual-panel comparison view
  • Independent panels with own headers
  • Clean, readable text formatting
  • AI chat integration

✅ Perfectly Aligned:

  • This mockup is closest to our PRD vision
  • Sidebar with Bible library
  • Multiple Bible panels
  • Chat at bottom of sidebar
  • Comparison workflow

Recommendation: Use this as primary reference for implementation:

  • Sidebar width: ~280px (matches mockup)
  • Panel layout: Flexible split
  • Bible list: Compact, scrollable
  • Chat: Bottom section of sidebar, collapsible
  • Keep exact visual style

Mockup 4: No Content View (Empty State)

File: no-content-view.png (306 KB)

Layout Analysis

Two-Column Layout:

  1. Left Sidebar: Empty state - "No Bibles uploaded" with cloud download icon
  2. Main Area: Empty state - "No Bible Open" with book + chat bubble icon

Empty State Components

Sidebar Empty State:

  • Icon: Cloud with down arrow (gray, large)
  • Message: "No Bibles uploaded" (dark text)
  • Clean, centered layout

Main Area Empty State:

  • Icon: Open book with chat bubble (gray, large, ~200px)
  • Heading: "No Bible Open" (large, bold, dark)
  • Subtext: "Select a Bible from the sidebar or upload one to start reading." (gray, smaller)
  • Center-aligned in panel
  • Light blue background (#F0F4F8)

Design System Observed

Empty States:

  • Large, friendly icons (outlines, not filled)
  • Gray color scheme (#9E9E9E)
  • Clear messaging
  • Center-aligned
  • Generous spacing

Differences from PRD

✅ Matches PRD:

  • Empty states for no Bibles
  • Helpful guidance text
  • Clean, uncluttered design

Recommendation: Implement exactly as shown:

  • Sidebar empty: Cloud icon + "No Bibles uploaded"
  • Main empty: Book+chat icon + "No Bible Open" + subtext
  • Use SVG icons (Lucide or Heroicons)
  • Light blue background for main area

Mockup 5: Upload Bible USFM Modal

File: upload-bible-usfm.png (962 KB)

Layout Analysis

Modal Overlay:

  • Semi-transparent dark backdrop (#00000080)
  • Centered white modal card (500px width)
  • Appears over main Bible reader view

Modal Components

Modal Structure:

  • Title: "Upload Bible USFM Modal" (top, bold, large)
  • Upload area:
    • Dashed border rectangle (large, 300px+ height)
    • Cloud upload icon (gray, centered, large)
    • Primary text: "Drag & drop or click to browse .zip files containing USFM"
    • Clean, spacious design
  • Action buttons (bottom right):
    • "Cancel" (gray, secondary button)
    • "Upload" (blue, primary button)
    • Proper spacing between buttons

Design System Observed

Modal:

  • White background
  • Rounded corners (8px)
  • Box shadow for elevation
  • 40px padding
  • Clean typography

Upload Area:

  • Dashed border (#BDBDBD)
  • Large drop zone (encourages drag-and-drop)
  • Icon + text centered
  • Hover state implied (would show blue border)

Buttons:

  • Cancel: Gray text, no background, minimal
  • Upload: Blue background (#1976D2), white text, solid

Differences from PRD

✅ Matches PRD:

  • Modal overlay for upload
  • Drag-and-drop area
  • File type specification (.zip)
  • Cancel/Upload actions

⚠️ Minor Differences:

  • Mockup shows simple two-button layout
  • PRD mentioned "progress indicator" and "success state" (not shown here)

Recommendation: Implement as shown, plus:

  • Add progress bar during upload
  • Add success state (checkmark + "3 books found")
  • Add error state (red icon + error message)
  • Keep drag-and-drop interaction

Overall Design System Analysis

Color Palette

Primary Colors:

  • Primary Blue: #1976D2 (buttons, links, active states)
  • Light Blue: #E3F2FD (hover states, backgrounds)
  • Dark Blue: #1565C0 (button hover)

Neutral Colors:

  • White: #FFFFFF (panel backgrounds)
  • Light Gray: #F5F5F5 (sidebar background)
  • Medium Gray: #E0E0E0 (borders, dividers)
  • Dark Gray: #757575 (muted text)
  • Very Dark: #212121 (body text)

Status Colors:

  • Error/Active: #D32F2F (red, for End button)
  • Success: #388E3C (green, implied)
  • Warning: #F57C00 (orange, implied)

Typography System

Font Family:

  • Sans-serif (likely Roboto, Inter, or system font)
  • Serif for Greek/Hebrew text

Font Sizes:

  • Headings (h1): 32px, bold
  • Headings (h2): 24px, semi-bold
  • Headings (h3): 20px, semi-bold
  • Body: 16px, regular
  • Small: 14px, regular
  • Caption: 12px, regular

Line Heights:

  • Headings: 1.2-1.4
  • Body: 1.6-1.8
  • Tight: 1.4 (for compact lists)

Spacing System

Padding Scale:

  • xs: 4px
  • sm: 8px
  • md: 12px
  • lg: 16px
  • xl: 24px
  • 2xl: 32px
  • 3xl: 48px

Component Spacing:

  • Panel padding: 24px
  • Sidebar padding: 16px
  • Button padding: 12px 24px
  • Input padding: 12px 16px
  • Section margins: 32px

Component Patterns

Buttons:

  • Primary: Blue background, white text, rounded (4px)
  • Secondary: Gray text, transparent background
  • Icon buttons: 40x40px, square, icon centered
  • Hover: Darker shade
  • Active: Even darker
  • Disabled: 50% opacity, no hover

Inputs:

  • Border: 1px solid #E0E0E0
  • Focus: 2px solid #1976D2, blue ring
  • Padding: 12px 16px
  • Border radius: 4px
  • Placeholder: #9E9E9E

Panels:

  • Background: White
  • Border: 1px solid #E0E0E0
  • Shadow: 0 2px 4px rgba(0,0,0,0.1)
  • Border radius: 8px (for modals), 0px (for main panels)

Icons:

  • Size: 20px (standard), 24px (large), 32px+ (empty states)
  • Stroke: 2px
  • Style: Outline (not filled)
  • Color: Inherits from parent

Alignment with PRD Requirements

✅ Well-Matched Features

  1. Multi-Panel Layout - Mockup 3 shows exact vision
  2. Bible Text Formatting - All mockups show proper verse formatting
  3. Chat Integration - Mockup 2 shows integrated chat (needs sidebar adaptation)
  4. Upload Modal - Mockup 5 matches requirements
  5. Empty States - Mockup 4 provides clear guidance
  6. Dockable Panels - Headers with drag handles visible

⚠️ Features Needing Adaptation

  1. Sidebar Approach:

    • Mockups show full panels for chat
    • PRD: Chat in collapsible sidebar section
    • Solution: Collapse chat to 400px section in sidebar

  2. Top Navigation:

    • Mockups show Home/Library/Plans/Settings tabs
    • PRD: No header (maximize reading space)
    • Solution: Remove top nav, move to sidebar if needed

  3. Bottom Navigation:

    • Mockups show Audio/Search/Bookmarks bar
    • PRD: No footer (maximize reading space)
    • Solution: Move to panel actions or remove for MVP

  4. Advanced Features:

    • Mockups show Interlinear, Dictionary panels
    • PRD: Focus on basic translation comparison
    • Solution: Future features, skip for MVP

❌ Missing from Mockups

  1. Voice Status Indicators:

    • Mockup 2 shows "End" button but not full state flow
    • Need: Ready → Listening → Thinking → Speaking states
    • Solution: Design voice UI states explicitly

  2. Panel Docking Zones:

    • No visual indicators for drop zones
    • Need: Blue overlays for left/right/top/bottom splits
    • Solution: Add during implementation

  3. Multiple Panels (3+):

    • Mockup 3 shows 2 panels only
    • Need: Support for 3+ panels in grid
    • Solution: Design 3-panel and 4-panel layouts

  4. Loading States:

    • No skeleton UI or loading indicators
    • Need: Shimmer effect for loading chapters
    • Solution: Design loading placeholders

  5. Error States:

    • Upload modal has no error state
    • Need: Error messages with retry options
    • Solution: Add error UI variants

Implementation Recommendations

Phase 1: Core Layout (Week 1-2)

Priority 1: Use Mockup 3 as Foundation

  • Left sidebar (280px) with Bible list
  • Main area with flexible panel layout
  • 50/50 split for dual-panel view
  • Clean, minimal design

Adaptations:

  • Remove top navigation bar (Home/Library/Plans/Settings)
  • Remove bottom navigation bar (Audio/Search/Bookmarks)
  • Move chat to sidebar bottom section (collapsible, 400px)
  • Keep sidebar Bible list exactly as shown

Phase 2: Components (Week 3-4)

Bible Reader Panel:

  • Use Mockup 1 text formatting
  • Chapter headings, verse numbers, paragraphs
  • Line-height: 1.8 for readability
  • Max content width: 680px (centered)

Upload Modal:

  • Use Mockup 5 design exactly
  • Add progress bar component
  • Add success/error states

Empty States:

  • Use Mockup 4 designs
  • Sidebar: Cloud icon
  • Main: Book+chat icon

Phase 3: Chat Integration (Week 5-6)

Sidebar Chat Section:

  • Adapt Mockup 2 chat UI to fit sidebar
  • Collapsible: 60px header → 400px expanded
  • User bubbles: Blue, right-aligned
  • AI bubbles: Gray, left-aligned
  • Voice button with state indicators

Voice UI States to Design:

  • Ready: Gray microphone icon
  • Listening: Blue microphone, "Listening..." text
  • Thinking: Purple dots animation, "Thinking..." text
  • Speaking: Green waveform, "Speaking..." text
  • End: Red microphone, "End" button

Phase 4: Polish (Week 7-8)

Interactions:

  • Panel drag-and-drop with drop zones
  • Panel resize with drag handle
  • Smooth animations (250ms transitions)
  • Hover states on all interactive elements

Responsive:

  • Desktop: Full multi-panel layout
  • Tablet: Single panel with tabs
  • Mobile: Full-screen single panel

Design Tokens for Implementation

Tailwind CSS Configuration

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#E3F2FD',
          100: '#BBDEFB',
          500: '#1976D2',  // Main blue
          600: '#1565C0',
          700: '#0D47A1',
        },
        gray: {
          50: '#FAFAFA',
          100: '#F5F5F5',  // Sidebar background
          200: '#E0E0E0',  // Borders
          400: '#BDBDBD',
          500: '#9E9E9E',  // Muted text
          600: '#757575',
          900: '#212121',  // Body text
        },
      },
      spacing: {
        '72': '18rem',    // 288px (sidebar + padding)
        '80': '20rem',
        '96': '24rem',
      },
      maxWidth: {
        'reading': '680px',  // Max content width for Bible text
      },
    },
  },
}

Component Classes

Sidebar:

.sidebar {
  @apply w-72 bg-gray-100 border-r border-gray-200;
}

Panel:

.panel {
  @apply bg-white border border-gray-200 shadow-sm;
}

Button Primary:

.btn-primary {
  @apply bg-primary-500 text-white px-6 py-3 rounded hover:bg-primary-600;
}

Chat Bubble User:

.chat-bubble-user {
  @apply bg-primary-500 text-white px-4 py-3 rounded-lg rounded-br-none max-w-[70%] ml-auto;
}

Chat Bubble AI:

.chat-bubble-ai {
  @apply bg-gray-100 text-gray-900 px-4 py-3 rounded-lg rounded-bl-none max-w-[70%];
}

Next Steps

  1. Update ui-prompt.md:

    • Incorporate insights from existing mockups
    • Specify adaptations needed (sidebar chat, no top/bottom nav)
    • Add missing states (voice, loading, error)

  2. Create Component Specifications:

    • Document exact spacing, colors, typography
    • Map mockup designs to Tailwind classes
    • Create component variants (states)

  3. Design Missing UI Elements:

    • Voice status indicators (4 states)
    • Panel docking drop zones
    • 3+ panel layouts
    • Loading states (skeleton UI)
    • Error states

  4. Begin Implementation:

    • Start with Mockup 3 layout (sidebar + dual-panel)
    • Implement core components (Panel, BibleText, Sidebar)
    • Add upload modal (Mockup 5)
    • Integrate chat (adapted from Mockup 2)

Conclusion

The existing mockups provide excellent visual guidance with high-quality design. Mockup 3 (dual-panel-parallel-view.png) is the closest match to our PRD vision and should be the primary reference.

Key Takeaways:

  • ✅ Layout structure is well-defined
  • ✅ Typography and spacing are professional
  • ✅ Color scheme is clean and accessible
  • ⚠️ Need to adapt chat to sidebar (not full panel)
  • ⚠️ Remove top/bottom navigation bars
  • ❌ Need to design missing states (voice, loading, error, docking)

Recommendation: Use these mockups as foundation, adapt for sidebar-based chat, and design missing interaction states before implementation.