Challenge:

• The client needed a platform that:
  • Allows users to easily browse and watch sports videos on demand.
  • Engages users with personalized content recommendations.
  • Provides an intuitive subscription model for premium content.
  • Maintains high performance and seamless video playback across devices.

MY ROLE:

• UX/UI Designer: Conducted user research, created wireframes and prototypes in Figma, and designed the user interface.
• Web Developer: Built the responsive website in Webflow and optimized it for performance.

The Process:

1. Research & Discovery
   1. User Research: Conducted surveys and interviews with 8 sports enthusiasts to understand their needs.
      • Key insights:
        • Users value quick access to highlights and tutorials.
        • Video recommendations and categorization are essential for discoverability.
        • Many users watch videos on mobile devices, requiring a fully responsive design.
   2. Competitive Analysis: Analyzed platforms like ESPN+ and YouTube for inspiration on video navigation and playback.

2. Wireframing in Figma

1. Created low-fidelity wireframes focusing on:
   • A homepage with featured and trending videos.
   • Intuitive navigation for video categories (sports types, trending, new uploads).
   • An accessible search and filter function for videos.
2. Iterated based on feedback, ensuring the user flow felt seamless.
3. High-Fidelity Design
   1. Designed a bold and modern interface in Figma with:
      • A color palette reflecting the energy of sports (vibrant blues, greens, and oranges).
      • Large, high-quality thumbnails for videos.
      • Clear call-to-action buttons for subscriptions and video previews.
   2. Designed key pages:
      • Homepage: Featured videos, trending content, and categories.
      • Video Page: Full-screen video player, description, and related videos.
      • Subscription Page: Pricing plans and benefits.
4. Development in Webflow
   1. Built the website in Webflow for scalability and responsiveness.
   2. Integrated:
      • Video embedding functionality.
      • Subscription forms with payment integrations.
      • User-friendly interactions, such as hover effects and smooth scrolling.
      • Optimized performance for fast video loading and playback.

Outcome:

• Increased user engagement by 60% within the first month due to improved accessibility and video recommendations.
• 80% of users rated the platform as “intuitive” in post-launch surveys.

Key Features:

• Homepage: A dynamic carousel showcasing featured and trending videos.
• Video Library: Categorized content (e.g., game highlights, training tutorials, interviews) with filtering options.
• Search Functionality: Smart search bar for finding specific videos or topics quickly.
• Video Playback: Full-screen, high-quality video player with playback speed options.
• Subscription Model: Pricing plans for accessing premium content, integrated with secure payment systems.

Reflection