UI/UX Design Skill

Purpose

Comprehensive user experience and interface design guidance for Riksdagsmonitor, ensuring intuitive, accessible, and engaging experiences for diverse user groups across all 14 language versions.

Core Principles

1. 👥 User-Centered Design

• User Research: Understand needs of journalists, researchers, citizens, policymakers
• Personas: Design for specific user archetypes
• User Journey Mapping: Optimize paths to key tasks
• Iterative Testing: Continuous usability testing, refinement

2. ♿ Accessibility First (WCAG 2.1 AA)

• Perceivable: All content accessible via multiple senses
• Operable: Interface navigable by keyboard, assistive tech
• Understandable: Clear language, predictable behavior
• Robust: Compatible with assistive technologies

3. 📱 Mobile-First Responsive

• Mobile Priority: Design for smallest screens first (320px+)
• Progressive Enhancement: Add features for larger screens
• Touch-Friendly: 44x44px minimum touch targets
• Performance: Fast load times on mobile networks

4. 🎨 Design System Consistency

• Cyberpunk Theme: Cyan, magenta, yellow on dark backgrounds
• Component Library: Reusable UI patterns
• Typography Hierarchy: Clear information structure
• Visual Identity: Consistent brand across all touchpoints

User Research

Primary User Personas

1. 📰 Investigative Journalist (Sara)

Demographics: 35, Svenska Dagbladet, Stockholm Goals:

• Find stories quickly (voting anomalies, committee conflicts)
• Export data for analysis
• Track specific MPs, committees over time

Pain Points:

• Too much data, hard to filter
• No real-time alerts
• Difficult to compare across time periods

Design Priorities:

• Advanced filtering, search
• Custom dashboards, saved views
• Data export (CSV, JSON)
• Alert notifications

2. 🎓 Political Science Researcher (Erik)

Demographics: 42, Uppsala University, researcher Goals:

• Access historical data (50+ years)
• Validate hypotheses with statistical analysis
• Replicate published studies

Pain Points:

• Data quality concerns
• Methodology transparency needed
• API documentation sparse

Design Priorities:

• Methodology documentation visible
• API access, rate limits clear
• Citation guidelines
• Downloadable datasets

3. 👥 Engaged Citizen (Anna)

Demographics: 28, Gothenburg, first-time voter Goals:

• Understand how Parliament works
• Track local MP's voting record
• Learn about political parties

Pain Points:

• Too complex, overwhelming
• Jargon, political terminology
• No onboarding, help

Design Priorities:

• Simplified onboarding flow
• Glossary, tooltips
• Educational content
• Visual hierarchy (reduce clutter)

4. 🏢 Corporate Affairs Manager (Johan)

Demographics: 45, multinational corporation, lobbyist Goals:

• Monitor legislation affecting business
• Track committee discussions
• Assess political risk

Pain Points:

• No legislative alerts
• Hard to map stakeholders
• Competitive intelligence gaps

Design Priorities:

• Custom alerts (keywords, topics)
• Stakeholder mapping tools
• Competitive benchmarking
• White-label option

Information Architecture

Site Structure

Riksdagsmonitor (Home)
│
├── 📊 Dashboards
│   ├── Voting Discipline
│   ├── Committee Effectiveness
│   ├── Coalition Alignment
│   ├── Party Comparison
│   ├── Election Forecasting
│   ├── Risk Assessment
│   └── Ministry Performance
│
├── 👥 MPs (Ledamöter)
│   ├── Search/Filter
│   ├── Individual Profiles
│   └── Comparison Tool
│
├── 🗳️ Votes (Voteringar)
│   ├── Recent Votes
│   ├── Historical Trends
│   └── Party Positions
│
├── 📋 Committees (Utskott)
│   ├── Committee Overview
│   ├── Effectiveness Metrics
│   └── Member Lists
│
├── 📰 News & Analysis
│   ├── Latest Updates
│   ├── Weekly Reports
│   └── Quarterly Reviews
│
├── 📚 About
│   ├── Methodology
│   ├── Data Sources
│   ├── Privacy Policy
│   └── Contact
│
└── 🔗 Resources
    ├── API Documentation
    ├── Glossary
    └── User Guide

Navigation Patterns

Primary Navigation

<nav class="primary-nav" aria-label="Main navigation">
  <ul>
    <li><a href="#dashboards">Dashboards</a></li>
    <li><a href="#mps">MPs</a></li>
    <li><a href="#votes">Votes</a></li>
    <li><a href="#committees">Committees</a></li>
    <li><a href="#news">News</a></li>
  </ul>
</nav>

Secondary Navigation (Contextual)

• Dashboard filters (time range, party, committee)
• Sorting options (alphabetical, by value)
• View toggles (table, chart, map)

Visual Design

Color Palette (Cyberpunk Theme)

/* Primary Colors */
--primary-cyan: #00d9ff;      /* Data points, links */
--primary-magenta: #ff006e;   /* Alerts, critical items */
--primary-yellow: #ffbe0b;    /* Highlights, warnings */

/* Background Colors */
--dark-bg: #0a0e27;           /* Main background */
--mid-bg: #1a1e3d;            /* Cards, panels */
--light-bg: #2a2e4d;          /* Hover states */

/* Text Colors */
--light-text: #e0e0e0;        /* Body text */
--mid-text: #a0a0a0;          /* Secondary text */
--dark-text: #606060;         /* Disabled text */

/* Semantic Colors */
--success: #00ff88;           /* Positive trends */
--warning: #ffbe0b;           /* Caution items */
--error: #ff006e;             /* Errors, high risk */
--info: #00d9ff;              /* Information, tooltips */

Typography

/* Font Families */
--font-primary: 'Inter', sans-serif;      /* Body, UI */
--font-heading: 'Orbitron', sans-serif;   /* Headings, emphasis */
--font-mono: 'Fira Code', monospace;      /* Code, data */

/* Font Sizes (Fluid Typography) */
--font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);   /* 12-14px */
--font-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);     /* 14-16px */
--font-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);     /* 16-18px */
--font-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);     /* 20-24px */
--font-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);           /* 24-32px */
--font-2xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);          /* 32-48px */

/* Line Heights */
--leading-tight: 1.25;     /* Headings */
--leading-normal: 1.5;     /* Body text */
--leading-relaxed: 1.75;   /* Long-form content */

Spacing System

/* Spacing Scale (4px base) */
--space-xs: 0.25rem;   /* 4px */
--space-sm: 0.5rem;    /* 8px */
--space-md: 1rem;      /* 16px */
--space-lg: 1.5rem;    /* 24px */
--space-xl: 2rem;      /* 32px */
--space-2xl: 3rem;     /* 48px */
--space-3xl: 4rem;     /* 64px */

UI Components

Dashboard Cards

<div class="dashboard-card">
  <header class="card-header">
    <h3 class="card-title">Voting Discipline</h3>
    <button class="card-action" aria-label="More options">⋮</button>
  </header>
  <div class="card-body">
    <canvas id="votingDisciplineChart"></canvas>
  </div>
  <footer class="card-footer">
    <span class="card-meta">Updated: 2026-02-11</span>
    <a href="#details" class="card-link">View details →</a>
  </footer>
</div>

Data Tables

<table class="data-table" role="table">
  <thead>
    <tr>
      <th scope="col" role="columnheader">
        MP Name
        <button aria-label="Sort by name">↕</button>
      </th>
      <th scope="col" role="columnheader">Party</th>
      <th scope="col" role="columnheader">Risk Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna Svensson</td>
      <td>S</td>
      <td><span class="badge badge-high">7.2</span></td>
    </tr>
  </tbody>
</table>

Filters & Search

<div class="filter-panel">
  <div class="search-box">
    <label for="search" class="sr-only">Search MPs</label>
    <input 
      type="search" 
      id="search" 
      placeholder="Search by name, party, committee"
      aria-describedby="search-help"
    >
  </div>
  
  <fieldset class="filter-group">
    <legend>Filter by Party</legend>
    <label>
      <input type="checkbox" name="party" value="S"> 
      <span>Socialdemokraterna (S)</span>
    </label>
    <!-- Repeat for other parties -->
  </fieldset>
</div>

Loading States

<!-- Skeleton Loader -->
<div class="skeleton-card" aria-busy="true" aria-label="Loading content">
  <div class="skeleton-header"></div>
  <div class="skeleton-body">
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
    <div class="skeleton-line short"></div>
  </div>
</div>

<!-- Spinner (fallback) -->
<div class="spinner" role="status">
  <span class="sr-only">Loading...</span>
</div>

Responsive Breakpoints

/* Mobile First Approach */

/* Extra Small: 320px - 479px (default, no media query) */
/* Small Phones */

/* Small: 480px - 767px */
@media (min-width: 30em) { /* 480px */
  /* Larger phones, portrait tablets */
}

/* Medium: 768px - 1023px */
@media (min-width: 48em) { /* 768px */
  /* Tablets, landscape */
}

/* Large: 1024px - 1279px */
@media (min-width: 64em) { /* 1024px */
  /* Small laptops, desktops */
}

/* Extra Large: 1280px - 1919px */
@media (min-width: 80em) { /* 1280px */
  /* Desktops, large screens */
}

/* XXL: 1920px+ */
@media (min-width: 120em) { /* 1920px */
  /* Very large screens */
}

Accessibility Checklist

WCAG 2.1 AA Compliance

Perceivable

• ✅ Alt Text: All images have descriptive alt attributes
• ✅ Color Contrast: 4.5:1 for normal text, 3:1 for large text
• ✅ Text Resize: Readable at 200% zoom
• ✅ Audio/Video: Captions, transcripts (if media present)

Operable

• ✅ Keyboard Navigation: All functions accessible via keyboard
• ✅ Focus Indicators: Visible focus states (2px outline, high contrast)
• ✅ Skip Links: "Skip to main content" for screen readers
• ✅ No Keyboard Traps: Users can navigate away from all elements

Understandable

• ✅ Language Declaration: <html lang="en"> for each language version
• ✅ Consistent Navigation: Same across all pages
• ✅ Predictable: No unexpected context changes
• ✅ Error Identification: Clear error messages with suggestions

Robust

• ✅ Valid HTML: No parsing errors
• ✅ ARIA Labels: Proper use of ARIA attributes
• ✅ Screen Reader Testing: NVDA, JAWS, VoiceOver compatibility

Usability Testing

Testing Methods

1. Hallway Testing (Guerrilla Testing)

• When: Early prototypes, quick validation
• Method: Show design to 5 random people, observe
• Cost: Low (time only)
• Frequency: Weekly during design phase

2. Remote Moderated Testing

• When: Key user flows, complex interactions
• Method: Video call, task-based scenarios, think-aloud protocol
• Cost: Medium (participant compensation)
• Frequency: Bi-weekly, 5-8 participants per round

3. A/B Testing

• When: Specific UI decisions (button copy, layout variants)
• Method: Split traffic 50/50, measure conversion, engagement
• Cost: Low (analytics tracking)
• Frequency: Continuous, 2-4 tests running simultaneously

4. Analytics Review

• When: Ongoing performance monitoring
• Method: Google Analytics, heatmaps (Hotjar), session recordings
• Cost: Low (tooling costs)
• Frequency: Weekly reports, monthly deep dives

Key Usability Metrics

Task Success Rate:
  Target: >80% users complete primary tasks
  Measured: Can users find MP profile, view voting record, filter by party?

Time on Task:
  Target: <2 minutes for common tasks
  Measured: How long to find specific information?

Error Rate:
  Target: <5% errors per task
  Measured: Clicks on wrong elements, navigation mistakes

System Usability Scale (SUS):
  Target: >68 (above average)
  Measured: 10-question standardized survey

Net Promoter Score (NPS):
  Target: >30 (good for B2B SaaS)
  Measured: "How likely to recommend 0-10?"

Multi-Language Considerations

RTL (Right-to-Left) Support

• Languages: Arabic (ar), Hebrew (he)
• CSS: Use logical properties (inline-start not left)
• Icons: Mirror directional icons (arrows, chevrons)
• Layout: Flip entire layout horizontally

/* RTL-Aware Styles */
[dir="rtl"] .element {
  direction: rtl;
  text-align: right;
}

/* Logical Properties (works for both LTR/RTL) */
.element {
  margin-inline-start: 1rem;   /* Not margin-left */
  padding-inline-end: 0.5rem;  /* Not padding-right */
}

Cultural Adaptations

• Date Formats: US (MM/DD/YYYY) vs EU (DD/MM/YYYY) vs ISO (YYYY-MM-DD)
• Number Formats: 1,000.00 (US/UK) vs 1.000,00 (DE/FR/ES)
• Currency: SEK (kr), EUR (€), USD ($)
• Colors: Blue = trust (Western), red = luck (China), green = prosperity (Middle East)

Performance Optimization

Core Web Vitals

Largest Contentful Paint (LCP):
  Target: <2.5s
  Strategies:
    - Optimize images (WebP, lazy loading)
    - Minimize CSS blocking
    - CDN for static assets

First Input Delay (FID):
  Target: <100ms
  Strategies:
    - Minimize JavaScript execution
    - Code splitting, defer non-critical JS
    - Use web workers for heavy computation

Cumulative Layout Shift (CLS):
  Target: <0.1
  Strategies:
    - Set explicit width/height for images
    - Reserve space for dynamic content
    - Avoid injecting content above fold

Image Optimization

<!-- Responsive Images -->
<picture>
  <source srcset="dashboard-mobile.webp" media="(max-width: 767px)" type="image/webp">
  <source srcset="dashboard-tablet.webp" media="(max-width: 1023px)" type="image/webp">
  <source srcset="dashboard-desktop.webp" type="image/webp">
  <img src="dashboard-desktop.jpg" alt="Voting discipline dashboard" loading="lazy">
</picture>

Remember

• 👥 Users First: Design for real user needs, not assumptions
• ♿ Accessibility: WCAG 2.1 AA compliance is mandatory, not optional
• 📱 Mobile Priority: Design for 320px first, enhance for larger
• 🎨 Consistency: Follow design system, reuse components
• 🧪 Test Early: Usability testing in every sprint
• 🌍 14 Languages: Consider RTL, cultural adaptations
• ⚡ Performance: Core Web Vitals matter for UX and SEO

---

Last Updated: 2026-02-11
Maintained by: Hack23 AB