Event Landing Page

The design uses strong typographic hierarchy and bold color contrasts that effectively capture attention and convey urgency. However, the dark theme with high contrast neon green may reduce readability for some users and the navigation links are quite minimal, which could hinder discoverability of additional information.
Analyzed design
Fixes by Category
  • 2
    Color & Contrast
  • 3
    Content Readability & Clarity
  • 2
    Visual Consistency, Imagery & Media
  • 2
    Navigation & Structure
  • 1
    Conversion & Actions
  • 2
    Tone, Friendliness & Delight
  • 2
    Accessibility & Input Ergonomics
  • 3
    Efficiency & Cognitive Load
  • 2
    Flow & States Completeness
  • 2
    Strategic Design
    • Recommended Fixes by Impact
    0Critical
    3Major
    15Moderate
    4Minor

    Primary CTA 'STARTPLATZ SICHERN' button lacks clear action context

    Major
    Conversion & Actions
    The Problem
    The button labeled 'STARTPLATZ SICHERN' is prominent but does not clearly indicate what action will occur when clicked, such as registration, booking, or purchasing.
    Why it Matters
    Users may hesitate to engage or convert if they are unsure what will happen after clicking the CTA, reducing conversion rates.
    How to Fix
    Enhance the CTA label with a more descriptive verb, for example 'Register for Event' or 'Secure Your Spot Now' to clearly communicate the action.
    Issue Highlights
    Finding region

    Ambiguous countdown label 'BIS ZUM START · NACHT AUF 1. NOV'

    Major
    Content Readability & Clarity
    The Problem
    The label near the countdown timer uses 'Nacht auf 1. Nov' which could be ambiguous about the exact date and time the event starts.
    Why it Matters
    Unclear date/time labeling can confuse users about the event start, leading to missed participation or frustration.
    How to Fix
    Provide a more explicit date and time format with timezone, e.g., 'Starts Night of 1 Nov, 00:00 CET'.
    Issue Highlights
    Finding region

    No Clear Confirmation After Clicking 'STARTPLATZ SICHERN' Button

    Major
    Flow & States Completeness
    The Problem
    The prominent call-to-action button 'STARTPLATZ SICHERN' invites users to secure a start place but there is no visible indication or feedback on what happens after clicking it.
    Why it Matters
    Without clear next steps or feedback, users may become confused or uncertain if their action was successful, potentially hindering flow completion and causing frustration.
    How to Fix
    Provide clear feedback or a transition state after clicking the button, such as a loading indicator, success message, or navigation to a relevant next screen.
    Issue Highlights
    Finding region

    Low contrast for small light gray paragraph text

    Moderate
    Color & Contrast
    The Problem
    The paragraph text near the bottom left uses a medium gray on a very dark background, making the text appear faint and likely below WCAG AA contrast requirements for normal text.
    Why it Matters
    This reduces readability, especially for users with visual impairments or those viewing in less than ideal lighting conditions.
    How to Fix
    Use a lighter shade of gray or white for the paragraph text to ensure a minimum contrast ratio of 4.5:1 against the black background.
    Issue Highlights
    Finding region

    Inconsistent font weights across main header text

    Moderate
    Visual Consistency, Imagery & Media
    The Problem
    The main header uses multiple font weights and styles: 'KYBURG' is bold and filled, 'BACKYARD' is outlined with no fill, and '6.7' is bold and colored bright green. This inconsistency in font styles within a single headline section can be visually distracting.
    Why it Matters
    Users might find it harder to quickly process the main headline due to inconsistent font styling, reducing visual coherence on the page.
    How to Fix
    Unify the font weights or styles in the main header so that all text elements share a consistent style or have clearly intentional hierarchy using consistent typographic rules.
    Issue Highlights
    Finding region

    Low contrast for navigation menu text

    Moderate
    Color & Contrast
    The Problem
    The navigation menu items (FORMAT, DER LOOP, STARTGELD, FAQ) use a dark gray text on a nearly black background, resulting in insufficient contrast likely below WCAG AA standards for normal text.
    Why it Matters
    Users with low vision or in bright environments may struggle to distinguish the navigation links, reducing site usability.
    How to Fix
    Increase the brightness or lightness of the navigation text color to achieve a contrast ratio of at least 4.5:1 against the black background.
    Issue Highlights
    Finding region

    Countdown timer text lacks clear hierarchy

    Moderate
    Content Readability & Clarity
    The Problem
    The countdown text '98T 20h 08min 02s' uses uniform bright neon green text without distinct size or weight differences to emphasize time units, causing difficulty in quickly parsing days, hours, minutes, and seconds.
    Why it Matters
    Users may struggle to rapidly understand the remaining time due to lack of clear visual cues separating time units.
    How to Fix
    Use distinct font sizes, weights, or spacing for days, hours, minutes, and seconds to create a clear information hierarchy and improve scanability.
    Issue Highlights
    Finding region

    Top navigation menu items are unevenly spaced and off-grid

    Moderate
    Visual Consistency, Imagery & Media
    The Problem
    The navigation items at the top right (FORMAT, DER LOOP, STARTGELD, FAQ) and the 'ANMELDEN' button are not evenly spaced or aligned on a consistent baseline grid, causing a visually unbalanced header navigation bar.
    Why it Matters
    Misaligned navigation elements can reduce perceived professionalism and make the navigation harder to scan quickly, potentially confusing users.
    How to Fix
    Adjust the spacing and baseline alignment of all navigation text and buttons to ensure consistent horizontal and vertical spacing based on a layout grid.
    Issue Highlights
    Finding region

    Primary navigation lacks clear active states

    Moderate
    Navigation & Structure
    The Problem
    The top navigation menu items (FORMAT, DER LOOP, STARTGELD, FAQ) have no visible indication or highlighted state to show which page is currently active.
    Why it Matters
    Users may feel uncertain about their current location in the site navigation, leading to confusion or inefficient browsing.
    How to Fix
    Add clear active states to navigation items, such as different colors, underlines, or background highlights.
    Issue Highlights
    Finding region

    Navigation Links Have Small Click Targets

    Moderate
    Accessibility & Input Ergonomics
    The Problem
    The navigation links in the top right (FORMAT, DER LOOP, STARTGELD, FAQ) have small text and limited vertical and horizontal padding, making their tap targets smaller than recommended for touch accessibility.
    Why it Matters
    Small tap targets increase the chance of user error and frustration, especially on mobile devices or for users with limited dexterity.
    How to Fix
    Increase the padding around these navigation links to ensure at least 44x44 CSS pixels tap target size as recommended for touch targets.
    Issue Highlights
    Finding region

    Overlapping large text styles reduce readability

    Moderate
    Efficiency & Cognitive Load
    The Problem
    The large text 'KYBURG' with a solid fill overlaps a large outlined text 'BACKYARD' creating visual clutter and making it harder to read and cognitively process quickly.
    Why it Matters
    Users may find it difficult to quickly understand the main event name, increasing cognitive effort and slowing comprehension.
    How to Fix
    Simplify the typography by choosing either a solid or outline style and increasing spacing to avoid overlap.
    Issue Highlights
    Finding region

    Unclear Main Action Label on Primary CTA

    Moderate
    Strategic Design
    The Problem
    The primary call-to-action button 'STARTPLATZ SICHERN →' uses a phrase that might be unclear or unfamiliar to new users causing uncertainty about what will happen when clicked.
    Why it Matters
    Users may hesitate or avoid clicking if they do not understand the action, reducing conversion and engagement.
    How to Fix
    Use clearer, more direct language indicating the result of the action, such as 'Register Now', 'Reserve Spot', or 'Sign Up'.
    Issue Highlights
    Finding region

    Body text below main heading is too small

    Moderate
    Content Readability & Clarity
    The Problem
    The paragraph text below the heading ('6.706 km durch den Kyburger Nachtwald...') appears small with thin weight, making it potentially hard to read on dark backgrounds.
    Why it Matters
    Small font size can strain user eyes, reducing readability and engagement for longer content.
    How to Fix
    Increase the body font size to at least 16px equivalent and use a slightly heavier weight or higher contrast color for improved clarity.
    Issue Highlights
    Finding region

    No clear page location or breadcrumb for user orientation

    Moderate
    Orientation Missing (Environment/Role/Location)
    The Problem
    There is no visible breadcrumb trail, header subtitle, or other orientation indicator clarifying the user’s current page or section context beyond the page title.
    Why it Matters
    Without orientation cues, users can feel lost or unsure about where they are within the site structure, increasing cognitive load.
    How to Fix
    Provide visible breadcrumbs or more contextual subtitles that state the page or section clearly.
    Issue Highlights
    Finding region

    No trust signals near 'Startplatz sichern' (reserve spot) button

    Moderate
    Tone, Friendliness & Delight
    The Problem
    The 'STARTPLATZ SICHERN' call-to-action is presented without supplementary trust elements such as security assurances, payment safety, or refund policies.
    Why it Matters
    Users may hesitate or abandon the reservation process due to uncertainty about the commitment, security, or reliability of the signup process.
    How to Fix
    Add clear trust signals around the button such as secure payment icons, refund policies, or brief reassurance copy to build confidence in the action.
    Issue Highlights
    Finding region

    Anmelden Button Has Small Tap Target

    Moderate
    Accessibility & Input Ergonomics
    The Problem
    The 'ANMELDEN' button in the top right corner has a relatively thin border and text with minimal padding, resulting in a tap target that may be smaller than recommended for comfortable touch interaction.
    Why it Matters
    Small tap targets can cause difficulty in activation, leading to user frustration and accessibility barriers.
    How to Fix
    Increase the padding around the 'ANMELDEN' button to ensure it meets the minimum recommended touch target size of 44x44 CSS pixels.
    Issue Highlights
    Finding region

    Aggressive red tone used for countdown warning

    Moderate
    Tone, Friendliness & Delight
    The Problem
    The phrase 'Bis nur noch eine:r läuft.' is displayed in a strong red color that may convey urgency or danger, which could be perceived as aggressive or anxiety-inducing rather than friendly or reassuring.
    Why it Matters
    Users may feel pressured or stressed by the harsh red tone, which can negatively impact user satisfaction and trust in the event or service.
    How to Fix
    Use a softer or more neutral cautionary color or add supportive language that reassures users about availability or next steps.
    Issue Highlights
    Finding region

    No Indication of What 'ANMELDEN' Button Does

    Moderate
    Flow & States Completeness
    The Problem
    The 'ANMELDEN' button in the header implies a login or registration action but does not visually indicate what users can expect next or if it's required to proceed.
    Why it Matters
    Users may be uncertain whether they need to log in to proceed or what this button entails, which can cause hesitation or confusion in the navigation flow.
    How to Fix
    Add tooltip, hover state, or introductory text to clarify the purpose of this button or guide the user on when and why to use it.
    Issue Highlights
    Finding region

    Navigation items are spaced tightly with similar typography

    Minor
    Navigation & Structure
    The Problem
    Navigation items on the top right have very similar font styling and close horizontal spacing, which can cause users to accidentally click nearby links.
    Why it Matters
    Close proximity and uniform styling of navigation links can lead to accidental clicks and decreased navigation efficiency.
    How to Fix
    Increase spacing between navigation links and differentiate styling slightly to visually separate items more distinctly.
    Issue Highlights
    Finding region

    Diverse fonts and colors add unnecessary clutter

    Minor
    Efficiency & Cognitive Load
    The Problem
    The page uses multiple font styles and colors (neon green, white, red, grayscale) close together, which increases visual noise without clear emphasis hierarchy.
    Why it Matters
    Users experience increased visual noise that can distract from key actions or information on the page.
    How to Fix
    Limit font styles and colors to a small, cohesive set that clearly prioritizes important elements.
    Issue Highlights
    Finding region

    Multiple navigation menu options compete for attention

    Minor
    Efficiency & Cognitive Load
    The Problem
    The top navigation bar presents multiple similarly styled menu items ('FORMAT', 'DER LOOP', 'STARTGELD', 'FAQ', 'ANMELDEN') that require users to decide what to explore next.
    Why it Matters
    Users may feel distracted or indecisive when presented with multiple options at once, reducing smooth progress.
    How to Fix
    Highlight or limit navigation options to the most critical or contextually relevant ones initially.
    Issue Highlights
    Finding region

    Visual Hierarchy Compromised by Overlapping Text Styles

    Minor
    Strategic Design
    The Problem
    The large overlapping text styles for 'KYBURG' and 'BACKYARD' create a visually busy and somewhat confusing hierarchy that may reduce immediate clarity of the message.
    Why it Matters
    Users could be distracted or confused by competing visual elements, reducing message clarity and impact.
    How to Fix
    Simplify typography layering or spacing so the key text elements are distinct and easy to read with a clear hierarchy.
    Issue Highlights
    Finding region