Skip to content

Instantly share code, notes, and snippets.

@davidklassen

davidklassen/WebApp.md Secret

Created March 25, 2025 13:59
Show Gist options
  • Save davidklassen/6a628e9f952812c5bdf1ba18dfd28bb2 to your computer and use it in GitHub Desktop.
Save davidklassen/6a628e9f952812c5bdf1ba18dfd28bb2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
WebApp.md

Udra – Web Application Requirements

Overview

This document details the requirements and user flows for the frontend implementation of Udra (Unbiased Dispute Resolution Assistant).

User Flows

Flow 1: Initiating a Dispute

  1. User visits the Home Page.
  2. Views the dispute initiation form alongside the Udra mascot.
  3. Enters their perspective (from 10 to 2000 characters).
  4. Clicks the Send button.
  5. Observes a loading indicator during submission.
  6. Upon successful submission, the Summary Modal Dialog appears:
    • User reviews and optionally edits the AI-generated summary.
    • User copies or shares the summary and dispute link.
    • User either navigates directly to the Dispute Page by clicking Go to Resolution or returns to the homepage by dismissing the modal.

Flow 2: Partner Responding to a Dispute

  1. Partner receives and clicks the shared dispute link.
  2. Partner Response View is displayed:
    • Partner reviews the context summary.
    • Enters their perspective (from 10 to 2000 characters).
    • Clicks the Submit button.
    • Observes a loading indicator during processing.
  3. The Resolution View automatically appears upon successful submission.

Flow 3: Initiator Checking Dispute Status

  1. Initiator accesses the Dispute Page via the provided link:
    • If the partner has not yet responded, the Initiator Waiting View appears.
    • Initiator sees a clear status message indicating the waiting state.
    • Optionally copies the dispute link or returns to the homepage.

Flow 4: Viewing Resolution

  1. Both initiator and partner access the Dispute Page once the dispute is resolved:
    • Resolution View is presented.
    • Both perspectives are shown clearly side-by-side.
    • Users review detailed resolution information.
  2. Users provide feedback via a star rating (1–5) and optional comments.
  3. Users can initiate a new discussion by clicking Start New Discussion, returning them to the homepage.

Visual Design

Color Palette

Warm, nature-inspired colors:

  • Background: #f6e9cf (Light Beige/Papyrus)
  • Primary: #7b9f97 (Sage Green/Pewter Green)
  • Secondary: #b0d6cd (Soft Mint/Aqua Haze)
  • Accent: #b3aa99 (Warm Taupe/Nomad)
  • Text: #4d4637 (Deep Warm Brown/Clinker)

Typography

  • Main Text: Clean sans-serif font
  • Headings: Slightly warmer sans-serif font

Visual Style

Minimalist, clean interface with generous white space and calming, nature-inspired visual elements.

Core Pages & Components

1. Home Page

Purpose: Facilitate initiation of disputes.

Visual Design:

  • Minimalist interface prominently featuring the perspective input form.
  • Udra mascot (mediator otter) centered prominently.
  • Headline: "What's happening? Share your perspective."
  • Large text area with a 2000-character limit and subtle character counter.
  • Send button styled with primary color.

User Actions:

  • Enter and submit perspective.
  • Observe loading indicator.
  • Automatically trigger Sharing Modal Dialog upon submission.

2. Sharing Modal Dialog

Purpose: Allow initiator to review, edit, and share the AI-generated summary.

Visual Design:

  • Editable summary text field.
  • Copy button with clear success indication.
  • Mobile-friendly share button.
  • Go to Resolution button to proceed directly to the dispute page.

User Actions:

  • Edit summary text as needed.
  • Copy or share the summary and dispute link.
  • Close modal or navigate directly to dispute page.

3. Dispute Page

Purpose: Display appropriate view based on dispute state and user role.

Requirements:

  • Awaiting Partner Response:
    • Partner sees Partner Response View.
    • Initiator sees Initiator Waiting View.
  • Resolved:
    • Both parties see Resolution View.

4. Partner Response View

Purpose: Collect partner's perspective.

Visual Design:

  • Header: "Let's talk about {summary}"
  • Large text area (2000-character limit).
  • Submit button in primary color.
  • Loading indicator during submission.

User Actions:

  • Review summary context.
  • Submit their perspective.
  • Automatically proceed to Resolution View.

5. Initiator Waiting View

Purpose: Inform initiator of partner's pending response.

Visual Design:

  • Clear, concise status message.
  • Option to copy dispute link.
  • Gentle animation indicating waiting status.

User Actions:

  • Optionally copy the dispute link.
  • Return to homepage.

6. Resolution View

Purpose: Present resolution clearly to both parties.

Visual Design:

  • Side-by-side layout of both perspectives.
  • Distinct resolution sections:
    1. Common Ground
    2. Different Perspectives
    3. Suggested Steps Forward
    4. Communication Strategies
  • Simple star rating (1–5) and optional feedback comment box.
  • Start New Discussion button.

User Actions:

  • Review and compare perspectives.
  • Provide feedback on resolution.
  • Initiate a new discussion if desired.

User Experience Requirements

Form Validation

  • Real-time character counting.
  • Inline error messaging.
  • Prevent invalid submissions.

Visual Feedback

  • Smooth animations signaling state changes.
  • Clear success indicators.
  • Subtle, non-intrusive error notifications.

Modal Behavior

  • Easy dismissal methods (click outside, escape key).
  • Appropriate focus management.
  • Retained scroll position upon closure.

This document serves as guidance for frontend implementation and will evolve based on user feedback and development insights.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment