Sprint 2: UI Polish & Bug Fixes

Eliminate all critical visual bugs and deliver a polished, accessible UI

7-DAY SPRINT 9 ITEMS (1 AUDIT + 8 P0) 45 STORY POINTS FEB 13-19, 2026
9
Total Items
45
Story Points
7
Sprint Days
5
Screens Fixed

🎯 Executive Summary

Sprint Goal: "Eliminate all critical visual bugs from production, implement full dark mode compliance, and deliver a polished, accessible UI that meets professional quality standards."

Sprint 2 addresses critical visual bugs discovered during product owner testing with live users. Analysis of all 6 planning documents reveals:

Input Analysis

  • Product Owner: 11 user stories, 40 SP total (28 P0, 12 P1)
  • Frontend Developer: 15 tasks, 66 SP total (recommend 28 P0)
  • Backend Developer: 5 tasks, 9 SP total (4 P0, 3 P1, 2 P2)
  • UX Researcher: 13 improvements, 45 SP total (18 P0, 19 P1, 8 P2)
  • UI Designer: 14 design specs, 41 SP total (28 P0, 12 P1)
  • QA Engineer: 9 test areas, 45 SP total (24 P0, 16 P1, 5 P2)

Consolidation Results

After deduplication, the consolidated backlog contains 8 P0 items (40 SP) that address all critical bugs while staying within sprint capacity. Additionally, a Phase 0: Full App Audit (5 SP) has been added as a mandatory blocker that must complete before any development work begins, bringing the total to 45 SP.

Critical Issues Identified by Multiple Teams

  1. Dark Mode Token Compliance — All 6 teams flagged (8 SP)
  2. Book Cover Images — 5 teams flagged (8 SP total: 5 FE + 3 BE)
  3. Stats Bar Clipping — 5 teams flagged (5 SP)
  4. Mood Visual Treatment — 5 teams flagged (6 SP total: 5 FE + 1 BE)
  5. Journal Card Hierarchy — 4 teams flagged (5 SP)

📋 Sprint 2 Backlog — 45 Story Points

PHASE-0: Full App Audit (MANDATORY — Before Any Fixes)
BLOCKER 5 SP

Owner: QA Engineer | Dependencies: None | Must complete before ANY development work

Problem: Development team needs comprehensive understanding of all visual issues before implementing fixes. Without a full audit, we risk missing critical bugs or creating regressions while fixing known issues.
Solution: Log into both live and local environments using test credentials, audit every screen with screenshots, test the "Add a Book" flow end-to-end, and compile a comprehensive audit report before development begins.

Task 0A: Audit Live App

Credentials: [REDACTED] / [REDACTED]

Log in and screenshot all screens: Home, Books, Journal, Progress, Community, Profile, Settings, Notifications, AI Insights, Reflection, Story Arcs

Task 0B: Audit Local Dev

Credentials: [REDACTED] / [REDACTED] (http://localhost:5177)

Repeat full audit on local dev environment, note differences vs live

Task 0C: Test "Add a Book" Flow

End-to-end test: Navigate to Books → Add button → Search → Select → Verify in list. Screenshot each step and document issues.

Task 0D: Compile Audit Report

Create comprehensive report categorizing all issues by severity (Critical/Major/Minor), map to backlog items, flag new discoveries

Blocks: ALL development work — Phase 0 must complete on Day 1

BACKLOG-1: Fix Dark Mode Color Token Compliance
P0 CRITICAL 8 SP

Owner: Frontend Developer | Dependencies: None (must start immediately)

Problem: COLOUR tokens use hardcoded hex values (#F7F9FC, #FFFFFF, #1A1A1A) that don't adapt when users toggle dark mode. Affects 50+ atomic design components, causing light text on light backgrounds (unreadable), dark text on dark backgrounds (unreadable), borders disappearing in dark mode, and complete breakdown of visual hierarchy.
Solution: Replace all hardcoded hex colors with CSS variable references in /src/design-system/tokens.ts. Update COLOUR object to use hsl(var(--variable)) format instead of hex values. Test all atomic components in both light and dark modes.

Blocks: All other visual work — this is the foundation

BACKLOG-2: Fix Book Cover Image Loading & Fallback
P0 CRITICAL 8 SP

Owner: Frontend Developer (5 SP) + Backend Developer (3 SP) | Dependencies: BACKLOG-1

Problem: Book covers are completely broken on production Books screen. Images show alt text instead of loading, no skeleton while images fetch, no fallback when URLs are invalid/broken, layout cramped when covers missing.
Solution: Update /src/design-system/molecules/BookCover.tsx with loading states (shimmer animation), success states (lazy loading), and error states (gradient fallback with book icon + initials). Backend adds URL validation in Supabase functions.
BACKLOG-3: Fix Stats Bar Clipping on Books & Journal Screens
P0 CRITICAL 5 SP

Owner: Frontend Developer | Dependencies: BACKLOG-1

Problem: MetricBar component is partially hidden behind the fixed header on both Books and Journal screens. "Reading / Up Next / Finished" row clipped at top, "Recent Entries" subtitle also clipped. Root cause: double-counting safe area insets.
Solution: Update /src/design-system/templates/ScreenWithMetricBar.tsx to fix positioning calculation. Remove duplicate safe area handling in MetricBar positioning.
BACKLOG-4: Implement Mood Visual Treatment
P0 CRITICAL 6 SP

Owner: Frontend Developer (5 SP) + Backend Developer (1 SP) | Dependencies: BACKLOG-1

Problem: Journal mood values display as plain text ("high", "low", "neutral") instead of rich visual treatment with emoji + color. This reduces emotional context and makes journal entries feel flat.
Solution: Create MOOD_CONFIG constants with emoji and colors (😄 Amazing, 😊 Good, 😐 Okay, 😕 Low, 😢 Awful). Build MoodIndicator component with colored chips. Update Journal.tsx to use visual mood treatment.
BACKLOG-5: Improve Journal Entry Card Visual Hierarchy
P0 CRITICAL 5 SP

Owner: Frontend Developer | Dependencies: BACKLOG-1, BACKLOG-4

Problem: Journal entry cards are visually flat with no hierarchy. All text has similar weight, no separation between metadata and content, date/time not visually distinct, no card elevation or depth.
Solution: Restructure journal card layout with clear sections: Header (date + mood), Content (title + preview), Tags, Footer (energy + sentiment). Add proper typography hierarchy and visual separators.
BACKLOG-6: Standardize Card Component Styling
P0 CRITICAL 5 SP

Owner: Frontend Developer | Dependencies: BACKLOG-1

Problem: Card styling is inconsistent across the app. Mixed use of shadcn Card vs atomic design Card, some cards use inline Tailwind classes, inconsistent padding/shadows/borders, book cards cramped with awkward text wrapping.
Solution: Migrate all cards to atomic Card.tsx component with consistent styling: SPACING[16] padding, SHADOW[2] base shadows, RADIUS.LARGE border radius. Fix book card text wrapping with proper ellipsis handling.
BACKLOG-7: Investigate & Fix Blue Bar at Bottom of Journal Screen
P0 CRITICAL 2 SP

Owner: Frontend Developer | Dependencies: None

Problem: Partially visible blue bar appears at bottom of Journal screen. Unclear purpose (progress indicator? nav? decoration?), looks cut off or broken, creates user confusion about app state.
Solution: Investigate Journal.tsx, ScreenWithMetricBar template, Layout.tsx, and BottomNavBar.tsx for blue elements. Either make element fully visible with clear purpose or remove visual artifact entirely.
BACKLOG-8: Add Prefers-Reduced-Motion Support
ACCESSIBILITY 5 SP

Owner: Frontend Developer | Dependencies: None

Problem: App violates WCAG 2.1 Level A by not respecting prefers-reduced-motion media query. Users with motion sensitivity or vestibular disorders experience discomfort from animations. Legal/compliance risk.
Solution: Add CSS media query in /src/index.css to disable all animations when prefers-reduced-motion is set. Verify confetti respects reduced motion setting. Test on iOS and Android devices.

🔄 Dependencies & Critical Path

Phase 0: Full App Audit (Day 1) — BLOCKER
PHASE-0: Full App Audit (5 SP)
Log in with test credentials → Audit every screen → Test Add Book flow → Compile report
MUST complete before ANY development work begins
↓ BLOCKS ALL DEVELOPMENT ↓
Phase 1: Foundation (Days 2-3)
BACKLOG-1: Dark Mode Tokens (8 SP)
Must complete first — blocks all other visual work
↓ BLOCKS ↓
Phase 2: Books Screen (Days 4-5)
BACKLOG-2: Book Covers (8 SP)
Frontend (5 SP) + Backend (3 SP) — Parallel work
BACKLOG-3: Stats Bar (5 SP)
Frontend only — Can work in parallel
BACKLOG-6: Card Standardization (5 SP)
Frontend only — Includes book card text wrapping
↓ SEQUENTIAL ↓
Phase 3: Journal Screen (Days 6-7)
BACKLOG-4: Mood Visual Treatment (6 SP)
Frontend (5 SP) + Backend (1 SP) — Must complete first
BACKLOG-5: Journal Card Hierarchy (5 SP)
Frontend only — Requires mood indicator from BACKLOG-4
BACKLOG-7: Blue Bar Investigation (2 SP)
Frontend only — Can work in parallel
↓ FINAL ↓
Phase 4: Accessibility (Day 7)
BACKLOG-8: Reduced Motion (5 SP)
Frontend only — Independent accessibility compliance

⚠️ Risk Assessment

🔴 HIGH RISK: Dark Mode Token Migration (BACKLOG-1)

Impact: 50+ components affected, blocks all other work
Likelihood: Medium (complex refactor, testing required)
Mitigation: Assign most experienced frontend developer, pair programming for critical components, visual regression screenshots, feature branch with comprehensive testing, daily check-ins on progress (Days 2-3)
Contingency: If blocked >2 days, work on BACKLOG-7, BACKLOG-8 in parallel (Phase 0 audit must be completed first)

🔴 HIGH RISK: Sprint Capacity Overestimation

Impact: 45 SP may be optimistic given complexity
Likelihood: Medium (BACKLOG-1 could expand)
Mitigation: Focus on Phase 0 + P0 items (45 SP), if velocity slipping drop BACKLOG-8 (5 SP) to Sprint 3, minimum viable sprint: Phase 0 + BACKLOG 1-7 (40 SP)
Contingency: Defer BACKLOG-8 if sprint behind schedule by Day 5

🟡 MEDIUM RISK: Safe Area Inset Regression (BACKLOG-3)

Impact: Sprint 1 fixes may regress with new changes
Likelihood: Low (well-understood from Sprint 1)
Mitigation: Review Sprint 1 commits before starting, test on physical devices, don't modify Layout.tsx unless necessary
Contingency: Revert to Sprint 1 Layout.tsx if issues

🟡 MEDIUM RISK: Backend Resource Availability

Impact: Only 4 SP backend work, may be deprioritized
Likelihood: Low (small scope, critical dependencies)
Mitigation: Backend work bundled with frontend stories, BACKLOG-2 and BACKLOG-4 flagged as critical
Contingency: Frontend can implement fallbacks if backend delayed

🟢 LOW RISK: Straightforward Frontend Work

BACKLOG-5, BACKLOG-6, BACKLOG-7: Well-defined solutions with clear acceptance criteria

🟢 LOW RISK: Accessibility Implementation (BACKLOG-8)

Well-defined CSS solution with existing browser support

⏭️ Deferred to Sprint 3

High Priority Items (P1) — 19 Story Points

  • Standardize Loading States (5 SP) — Skeleton components across all pages
  • Empty State CTAs (4 SP) — Actionable messages for new users
  • Book Card Text Wrapping (3 SP) — Addressed partially in BACKLOG-6
  • Robust Error Handling (Backend) (2 SP) — Retry logic for book metadata enrichment
  • Backend Mood Validation (1 SP) — Enum validation before database insert
  • Color Contrast Improvements (2 SP) — Muted text WCAG AA compliance
  • Entry Type Icons (2 SP) — Visual indicators for journal entry types

Medium Priority Items (P2) — 22 Story Points

  • Search/Filter for Books & Journal (8 SP) — High value feature
  • Image Lazy Loading (5 SP) — Performance improvement
  • Keyboard Navigation & Shortcuts (5 SP) — Power user feature
  • Haptic Feedback (3 SP) — Mobile polish
  • Sync Status Indicator (3 SP) — User feedback improvement
  • Database Query Optimization (2 SP) — Backend performance

Total Deferred: 41 story points

👥 Team Capacity & Workload

Frontend Developer
38 SP / 40 SP capacity (95% utilization)
BACKLOG-1 (8 SP) → BACKLOG-2 Frontend (5 SP) → BACKLOG-3 (5 SP) → BACKLOG-4 Frontend (5 SP) → BACKLOG-5 (5 SP) → BACKLOG-6 (5 SP) → BACKLOG-7 (2 SP) → BACKLOG-8 (5 SP)
Backend Developer
4 SP / 40 SP capacity (10% utilization)
BACKLOG-2 Backend: Cover Validation (3 SP) → BACKLOG-4 Backend: Mood Constants (1 SP) — May support other initiatives
QA Engineer
Validation & Testing
Phase 0: Full App Audit (Day 1) → Daily testing as items complete → Visual regression testing after BACKLOG-1 → Full regression suite Days 6-7
UI Designer / UX Researcher
Design Support & Review
Design specs provided in backlog → Available for consultation during implementation → Final design review Days 6-7

← Back to Reports

Sprint 2 Backlog — Version 1.1
Prepared by: Scrum Master • Reviewed by: Product Owner, Frontend Dev, Backend Dev, UX, UI Design, QA
Date: 2026-02-13 • Updated: 2026-02-13 (Added Phase 0 Audit) • Status: ✅ APPROVED FOR SPRINT EXECUTION