Wireframes

Email and password login screen. Shows Meander logo, email field, password field with show/hide toggle, login button, forgot password link, and options to switch to BankID or Vipps.

BankID authentication screen. Displays BankID logo, personal number field, and button to launch the BankID OAuth flow.

Vipps authentication screen. Displays Vipps logo, phone number field, and button to launch Vipps OAuth flow. Notes that Vipps login also syncs phone number.

Biometric authentication prompt. Shows Face ID or Fingerprint icon based on device capability. Primary button to authenticate biometrically and fallback link to use password instead.

Screen shown when a user without mobile app access (e.g. Global Admin) attempts to log in. Explains they must use the Admin Web Portal and provides a link.

User profile overview. Shows avatar, name, role badge, organization name, contact info, and activity stats summary. Edit button leads to profile edit form.

Bottom sheet for switching between available roles (Peer Mentor / Coordinator). Shows each role with its organization and visual indicator of the current active role.

Share profile screen. Preview of the public-facing profile card with name, role, and organization. Options to share via link, QR code, or native share sheet.

Manage authentication methods. Lists current auth methods (email/password, BankID, Vipps, passkeys). Toggle to enable/disable each. Add Passkey button leads to setup flow.

Quick activity log widget as bottom sheet. Pre-fills today and 30 min defaults. Fields: contact (searchable), activity type, date, duration. Minimal tap-count design. Log it button submits immediately.

Step 1 of activity wizard. Searchable list of assigned contacts. Select one or tap New Contact. Progress indicator: Step 1 of 4.

Calendar date/time picker. Monthly calendar grid with existing activities marked. Tapping a date auto-fills it in the wizard. Highlights upcoming synced calendar events.

Speech-to-text recording interface. Large microphone button with animated waveform. Timer shows recording duration. Stop and transcribe button. For post-activity report writing only, not during visits.

Select which peer mentor the coordinator is reporting for. Searchable list of peer mentors in their local association with name, role, and recent activity count.

Bulk registration screen. Options to upload CSV or use a spreadsheet template. Activity type selector and date range apply to all rows. Download template button.

Event creation step 1. Fields: event title, event type (meeting, course, social, etc.), short description. Progress indicator: Step 1 of 3.

Events list screen. Upcoming and past events in card list. Filter tabs for Upcoming, My Events, Past. Each card shows title, date, location, registration status. FAB for creating new event (coordinator).

Event sign-up form. Confirms user details, optional dietary/accessibility requirements, and Confirm Registration button. Shows event summary card at top.

Expense registration form. Expense type selector (kilometers, toll, parking, public transit, mutually exclusive where required), amount fields, linked activity selector, receipt upload button. Automatic threshold check for approval routing.

Full-screen camera view for photographing a receipt. Overlay guide rectangle for alignment. Capture button, gallery picker option, and cancel. Required for expenses above threshold (default 100 kr).

Expense type selection grid. Categories (km reimbursement, toll, parking, public transit) as selectable cards. Mutually exclusive combos visually disabled after selection.

Confidentiality declaration form shown when a driver/escort expense is submitted. Displays full legal declaration text. User must check checkbox and provide full name as signature.

Main contacts list (bottom nav tab). All assigned contacts in alphabetically sorted avatar list. Search bar at top. Filter by status, organization, or last contact date. FAB to add new contact (coordinator).

Contact detail screen. Name, photo, key info (org, age group, status), and recent activity history. Tabs for Overview, Activities, Notes, Caregivers. Edit button in top bar.

List of caregivers and next-of-kin for a contact. Shows name, relationship, and primary contact method. Add Caregiver button at bottom.

Notes list screen. Notes sorted by last modified date. Each card shows title, linked contact name, preview text, and date. Search bar at top. Tap to open in editor.

Note editor. Title field at top, rich-text body editor with basic formatting. Microphone button for speech-to-text. Contact picker to link note to a contact. Auto-saves.

Personal activity statistics dashboard. Stat cards for total activities this month, contacts served, total hours, kilometers. Bar chart showing activity trend over 12 weeks. Recent activities feed at bottom.

Coordinator team reports screen. Summary stat cards for total team activities, active peer mentors, pending approvals. Table of peer mentors with monthly activity counts. Tap to drill into individual stats.

Bufdir report configuration. Period selector (year/quarter), organization scope selector, and data category checklist. Preview Report button generates the report.

Bufdir export options. Format selector (PDF, Excel, CSV). Email destination field pre-filled. Option to send directly to Bufdir portal when API available. Export Now button.

Mobile accounting integration settings. Shows connection status to configured accounting system (Xledger or Dynamics). Toggle sync on/off, last sync timestamp, and sync frequency settings.

Encrypted assignments list. All incoming assignments with status badges (New, Opened, Acknowledged, Completed). Stat card shows open vs closed count. New assignments highlighted at top.

Assignment threshold tracking dashboard. Shows current assignment count against threshold levels (3rd triggers office honorarium, 15th triggers higher rate). Progress bar towards next threshold. Monthly trend chart.

Notification inbox (bottom nav tab). All push notifications in chronological order with read/unread state. Swipe to dismiss or mark as read. Filter tabs for All, Unread, Assignments.

Email and SMS notification settings. Toggles for each notification type (new assignment, approval status, event reminder, monthly summary). Per-channel settings: email address, phone number, frequency preferences.

Predefined notification scenarios (e.g. 10 days since assignment with no contact, certificate expiring in 30 days, monthly report reminder). Each shows trigger condition and enabled/disabled state.

Main notification preferences. Master toggle for all push notifications. Per-category toggles (activities, assignments, events, expenses, system). Quiet hours configuration.

Referral main screen. Personal invite link, total referrals count stat card, share options. How-it-works explanation. QR code button and native share button.

Recruitment tracking dashboard. Stat cards for total referrals, pending sign-ups, completed onboardings. Activity feed showing recent referral events.

Course listing screen. Filter by category, location, date, available spots. Each course card shows title, dates, location, instructor name, and registration status badge.

Digital peer mentor certificate display. Official certificate design with name, organization, issue date, expiry date, and certificate ID. Status badge (Valid / Expiring Soon / Expired). Share and Download buttons.

Career workshop listing. Cards for available multi-day workshops (mentorship program). Shows workshop title, dates, facilitator, and participant count.

Annual Wrapped intro screen. Full-screen animated presentation with year label and See your year call-to-action. Inspired by Spotify Wrapped with visually celebratory brand colors.

Achievement badges gallery. Grid of all available badges: earned shown in full color, locked in greyscale. Progress bar below each locked badge. Filter tabs for Earned, In Progress, Locked.

Personal impact calculator. Sliders for hours volunteering, travel, people helped. Real-time calculation of societal value contribution (estimated monetary equivalent and quality-of-life units).

Talking cards toolbox main screen. Grid of card categories (Daily Life, Health, Family, Activities, Goals). Search bar. Recently used cards section. Designed for use during peer mentor conversations.

Accessibility settings. Options: text size (small/medium/large/extra-large), high contrast mode toggle, reduce motion toggle, haptic feedback toggle. All controls are WCAG 2.2 AA compliant with minimum 24x24px touch targets.

Warning overlay when a screen reader user navigates to a field with sensitive personal data. Warns content is confidential before the screen reader announces the value. OK and Skip buttons.

Language settings screen. Language selector: Norwegian Bokmal (default), Norwegian Nynorsk, Northern Sami, English. Note about Sami language being in beta. Preview shows UI sample in selected language.

Role-specific home dashboard (bottom nav tab). For Peer Mentors: scheduled activities, recent contacts, quick log FAB, personal stats summary. For Coordinators: team activity feed, pending approvals, upcoming events. Dynamically configured based on active role.

App settings main screen. Sections: Account, Notifications, Accessibility, Integrations, About. Each section expands with relevant options. Version number at bottom. Logout button at top.

External resource links. Categorized list of curated external links (government portals, health resources, training materials, organization websites). Search bar. Each card shows title, category, and external link icon.

Contact support screen. Subject category dropdown, message text area, optional screenshot attachment. Suggest first section with 3 most relevant FAQ items. Submit button sends to support team.

In-app privacy policy document. Full text with table of contents accordion at top. Version number and last updated date. Share/Print buttons. WCAG-compliant typography.

In-app accessibility statement as required by Norwegian regulations. Lists WCAG 2.2 AA compliance status, known limitations, and how to report accessibility issues.

FAQ main screen. Searchable accordion list organized by category (Getting Started, Activities, Expenses, Technical). Most viewed questions at top.

Offline mode status screen when connectivity is lost. Banner explains offline mode. Checklist shows which features work offline vs require connection. Pending sync queue count displayed.

Background sync settings and status. Last successful sync timestamp. Toggle on/off. Sync frequency selector (on app open, every hour, every 6 hours). Data usage estimate. Sync Now manual trigger.

Main admin dashboard. KPI stat cards: total active peer mentors, activities this month, pending approvals, organizations count. Line chart showing monthly activity trends. Recent activity table at bottom.

Organization-wide activity feed. Real-time feed of logged activities, user actions, approval requests, and system events. Filter by event type, user, date range, and organization level.

User management list. Filterable sortable data table: name, email, role, organization, status, last active. Inline actions: edit, deactivate. Invite User button.

Role assignment page for a user. Current roles as removable tags. Available roles with description and permission summary. Multi-select to add roles. Shows effective permissions from combined roles.

Bulk user action page. Checkbox-selectable data table. Bulk action toolbar when users are selected: Deactivate, Change Role, Move to Organization, Export, Send Message. Filter panel to narrow selection.

Activity review and approval queue. Stat cards: pending, approved, flagged counts. Filterable data table: date, peer mentor, contact, type, duration, status. Batch approve button for selected rows.

Flagged activity management. Lists activities with quality flags. Filter by flag type (duplicate, missing data, date anomaly, suspicious pattern). Each row shows flag reason, flagged by, and resolution status.

Expense approval queue. Stat cards: pending count, approved this month total, average processing time. Data table: submitter, type, amount, date, linked activity, days pending, status. Batch approve button.

Auto-approval rules config page. Lists all active rules with criteria (expense type, maximum amount, distance threshold) and current status. Add Rule button and edit/delete actions per row.

Reimbursement overview dashboard. Stat cards: total reimbursed this quarter, average amount, pending payout count, auto-approved percentage. Bar chart for monthly totals. Sortable data table.

Reports dashboard. Available report types as cards: Activity Summary, Peer Mentor Performance, Expense Summary, Organization Overview, Bufdir Export. Each shows last generated date and quick generate button.

Bufdir export config page. Reporting period selector, data validation checklist showing completeness status for each required field. Preview Export and Export Now buttons. Last export history.

Custom report builder. Left panel with available data fields (drag to add). Right panel showing selected columns. Row filter conditions (AND/OR logic). Grouping and sorting configuration. Report name input.

Organization settings page. Sections: General (name, logo, timezone), Branding (primary color), Contacts (support email, billing contact), Membership (membership system type, ID format). Save button per section.

Terminology configuration page. Two-column table: Default Term | Custom Term. All configurable platform terms listed. Edit inline or via form. Reset to default option per term.

Feature toggle management. Table of all feature flags: name, description, current state (enabled/disabled), scope (global/org-specific). Toggle switches per row. Search and filter by area.

Organization hierarchy management. Tree-style list showing parent org, member associations, and local associations. Stats per level (member count, activity count). Expand/collapse nodes. Add/remove associations.

Member associations management. Lists all local associations with member count, active peer mentors count, and primary contact. Sortable and filterable. Add, edit, and deactivate association actions.

External portal integration settings. Current connection status with portal type (HLF Dynamics, Cornerstone, etc.). Sync status and last updated. Sync field mapping table. Connect/Disconnect button.

Accounting system integration page. Supports Xledger and Dynamics. Shows connection status, last export timestamp, and total expenses synced. Sync scope settings (auto-sync on approval vs manual).

Security monitoring dashboard. Stat cards: failed login attempts (24h), active sessions, suspicious events, MFA adoption rate. Login attempt chart over time. Recent security events table with severity indicators.

Audit log main page. Searchable filterable data table of all system events. Columns: timestamp, user, action type, resource, IP address, result. Export to CSV. Filter by user, action type, date range, organization.

Session management page. Stat cards: total active sessions, mobile sessions, web sessions, suspicious sessions. Data table: user, device type, location, start time, last active. Revoke and Revoke All buttons.

Main product landing page. Announcement bar for latest news. Hero with headline, subheadline, and two CTAs (Book Demo, See Features). Logo bar with partner organizations. Feature grid overview. Stats row with key impact numbers. Testimonial grid from partner orgs. CTA banner before footer.

Full features overview page. Alternating row layout presenting each major feature area (Activity Logging, Statistics, Bufdir Reporting, Admin Portal) with screenshot and copy. Feature list for quick scanning. CTA banner at bottom.

Impact calculator page. Left panel: interactive inputs (number of peer mentors, average activities per month, organization type). Right panel: real-time calculated impact (estimated hours saved, underreporting prevented, annual cost saved). Sliders with instant calculation.

Pricing and cost comparison page. Table comparing Meander vs manual/legacy solutions: cost, time spent, error rate, Bufdir compliance. Pricing tiers and Talk to us about pricing CTA.

Demo booking page. Left side shows value prop and what to expect. Right side has multi-step form: Step 1 - Your Details (name, title, org, email, phone), Step 2 - Pick a Time Slot, Step 3 - Topics of interest.

Booking confirmation page. Success state with booking details (date, time, meeting link). What to prepare checklist. Add to Calendar dropdown (Google, Apple, Outlook). Resources section with product overview PDF and case studies.

Public privacy policy page. Table of contents sidebar with anchor links. Full policy text with GDPR-compliant sections (Data Collected, How We Use Data, Data Sharing, Retention, Your Rights, Contact). Version number and last updated date.

Terms of service page. Structured legal document with numbered sections and clear subheadings. Table of contents at top. Norwegian and English versions toggle. Version number and effective date. Print button.

Data Processing Agreement (DPA) page. GDPR Article 28 compliant document. Sections: Subject Matter, Duration, Nature and Purpose, Type of Data, Rights and Obligations, Sub-processors list. Download as PDF and Request Custom DPA CTA.

Cookie policy page. Explanation of cookie categories (strictly necessary, analytics, preferences, marketing). Data table listing all cookies with name, type, duration, and purpose. Link to update cookie preferences.

Service Level Agreement page. SLA commitments table: service availability target (99.5% uptime), planned maintenance windows, incident response times by severity, support availability hours, escalation path. Historical uptime stats row. Contact support CTA.