Skip to Content
OverviewUI & UX

UI & UX

User interface design patterns and UX flows across Android, iOS, Desktop, and Web platforms.

This document describes the user interface design and user experience flows in Oter.

Platform Overview

Oter provides a consistent user experience across multiple platforms:

  • Desktop: Full-featured Compose Multiplatform desktop application
  • Android: Native Android application with Material Design
  • iOS: Native iOS application
  • Web: Browser-based access via WebAssembly (WASM)

All platforms share the same business logic through Kotlin Multiplatform, ensuring feature parity and consistent behavior.

Design System

Oter uses a unified design system defined in shared/src/commonMain/kotlin/com/esteban/ruano/oter/ui/:

  • Colors: Primary, secondary, surface, background colors
  • Typography: Consistent font families and sizes
  • Shapes: Rounded corners, card shapes
  • Dimensions: Spacing, padding, elevation values
  • Components: Reusable UI components (buttons, cards, inputs, etc.)

The design system is implemented using Compose Multiplatform, allowing shared UI components across all platforms.

Navigation hierarchy for each platform — all sections share the same underlying data via KMP shared services.

Bottom Navigation (Mobile)

The mobile app uses bottom navigation with five main sections:

  • Home: Dashboard with overview and quick actions
  • Calendar: Calendar view and scheduling
  • To-Do: Tasks and habits management
  • Health: Nutrition and workout tracking
  • Others: Finance, Timers, Journal, Study

Side Navigation (Desktop)

The desktop app uses a sidebar navigation with expandable sections:

  • Dashboard
  • Finance
  • Tasks
  • Habits
  • Nutrition
  • Workout
  • Timers
  • Calendar
  • Journal
  • Study
  • Settings

Key Screens and Flows

Authentication Flow

Screens:

  • Login screen
  • Sign up screen
  • Forgot password screen

Flow:

  1. User opens app → Auth screen
  2. User enters credentials → Login/Sign up
  3. On success → Navigate to Dashboard
  4. Token stored securely for subsequent requests

Dashboard

Purpose: Central hub showing overview of all features

Main Elements:

  • Quick stats (tasks, habits, finances)
  • Recent activity feed
  • Quick action buttons
  • Navigation to major features

Interactions:

  • Click on stat → Navigate to detailed view
  • Click on activity → Navigate to item detail
  • Quick actions → Create new items

Finance Module

Finance Home Screen

Purpose: Overview of financial accounts and recent transactions

Main Elements:

  • Account cards with balances
  • Recent transactions list
  • Quick actions (Add Transaction, Add Account)
  • Navigation tabs (Transactions, Accounts, Budgets, Predictions)

Interactions:

  • Click account → Account detail
  • Click transaction → Transaction detail/edit
  • Add button → Create transaction/account
  • Tabs → Switch between views

Balance Prediction Screen

Purpose: Generate and view balance projections; on desktop, run what-if scenarios and affordability checks.

Main Elements (shared / mobile):

  • Date range picker (from/to dates, dd/MM/yyyy)
  • Configuration: accounts, scheduled transactions, past-month behavior, periodic spends, noise, granularity, safety floor, goal, category volatility
  • Prediction chart with BASE / OPTIMISTIC / PESSIMISTIC bands
  • Point details, danger events, goal analysis, category forecasts
  • Pagination for long ranges

Desktop layout (composeApp):

  • Header — date range pill, granularity, refresh, settings cog, close
  • Action bar — Scenarios sidebar toggle, + Adjustment, Can I afford…?
  • Chart (hero) — summary stats, BalanceChart, pagination; dashed baseline when active
  • Scenarios sidebar (collapsible, off by default) — saved scenarios + session adjustments
  • Insights (collapsible below chart) — safe-to-spend, danger, goal, budget impact, category forecasts
  • Prediction settings dialog — engine knobs (persisted per user via /finance/balance-prediction/settings)
  • Scenario editor — create/edit scenario + adjustments
  • Affordability — date picker, mini chart, verdict chip, save as scenario

Interactions:

  1. On open, ViewModel loads persisted settings, then prediction; knob changes debounce-save to the server.
  2. User sets date range from header; toggles scenarios or adds adjustments → chart may show baseline overlay.
  3. User selects a chart point → slide-in point details.
  4. User opens affordability → amount/date/category → verdict + mini chart; optional save as scenario.

Data flow:

  • BalancePredictionViewModel → FinanceService.getBalancePrediction(filters) → POST /finance/transactions/balance-prediction
  • Affordability → POST /finance/transactions/balance-prediction/affordability
  • Scenarios → GET/POST/PUT/DELETE /finance/balance-scenarios
  • Engine defaults → GET/PUT /finance/balance-prediction/settings

See balance-prediction-scenario-lab.md for full behavior and platform matrix.

Transaction Import Screen

Purpose: Import transactions from bank statements or CSV files

Main Elements:

  • File upload area
  • Text input for pasting transaction data
  • Preview table showing parsed transactions
  • Category mapping interface
  • Import confirmation

Interactions:

  1. User uploads file or pastes text
  2. System parses transactions
  3. Preview shown with suggested categories
  4. User confirms/corrects categories
  5. User clicks “Import”
  6. Transactions created in system

Tasks Module

Purpose: Manage to-do items and task lists

Main Elements:

  • Task list with filters (All, Active, Completed)
  • Task cards showing title, due date, priority, tags
  • Create/edit task dialog
  • Tag management

Interactions:

  • Click task → Task detail/edit
  • Swipe to complete/delete
  • Filter by status/tags
  • Create new task

Habits Module

Purpose: Track daily habits and routines

Main Elements:

  • Habit list with progress indicators
  • Calendar view showing completion history
  • Create/edit habit dialog
  • Reminder settings

Interactions:

  • Tap habit → Mark as complete
  • Long press → Edit/delete
  • View calendar → See completion streak

Study Module

Purpose: Plan and track study sessions

Main Elements:

  • Study topics list
  • Study items pipeline (Pending, In Progress, Processed)
  • Study sessions list
  • Session timer controls

Interactions:

  • Drag items between pipeline stages
  • Start/stop session timers
  • Create topics, items, sessions

Timers Module

Purpose: Pomodoro timers and custom timers

Main Elements:

  • Timer lists
  • Active timer display
  • Timer controls (start, pause, resume, stop)
  • Timer history

Interactions:

  • Select timer → Start
  • Timer runs with visual countdown
  • Controls for pause/resume/stop
  • WebSocket updates for real-time sync

Platform-Specific Differences

Desktop

  • Larger screens: More information visible at once
  • Keyboard shortcuts: Power user features
  • Multi-window support: Multiple views simultaneously
  • File system access: Direct file imports
  • System tray integration: Background notifications

Mobile (Android/iOS)

  • Touch-optimized: Larger touch targets
  • Bottom navigation: Easy thumb access
  • Pull-to-refresh: Standard mobile pattern
  • Platform-specific: Material Design (Android), Human Interface Guidelines (iOS)
  • Notifications: Push notifications for reminders

Web

  • Browser-based: No installation required
  • Responsive design: Adapts to screen size
  • Limited offline: Requires internet connection
  • WASM performance: Near-native performance

User Experience Patterns

Loading States

All async operations show loading indicators:

  • Circular progress for full-screen loads
  • Linear progress for long operations
  • Skeleton screens for content loading

Error Handling

Errors are displayed consistently:

  • Toast messages for transient errors
  • Dialog for critical errors
  • Inline errors for form validation
  • Retry mechanisms for network errors

Empty States

Empty states provide guidance:

  • Clear messaging (“No transactions yet”)
  • Action buttons (“Create your first transaction”)
  • Helpful illustrations or icons

Form Validation

Forms provide real-time validation:

  • Field-level errors
  • Submit button disabled until valid
  • Clear error messages
  • Success feedback on submit

Accessibility

  • Screen reader support: Semantic labels
  • Keyboard navigation: Full keyboard support on desktop
  • Color contrast: WCAG AA compliant
  • Text scaling: Supports system font scaling
  • Touch targets: Minimum 44x44dp on mobile

Future UX Enhancements

  • Dark mode: System preference support
  • Customizable themes: User-defined color schemes
  • Gesture navigation: Swipe gestures for common actions
  • Widgets: Home screen widgets for quick access
  • Shortcuts: App shortcuts for common tasks
Prediction engineIntegrations