Case Study: ArenaCastt - Sports Streaming App
1. Project Overview
ArenaCastt is a mobile application designed to provide users with a dedicated platform for streaming sports content. The app's design focuses on delivering a user-friendly experience for watching live games, exploring highlights, and managing personal profiles.
2. The Goal
The objective of the ArenaCastt project was to create a functional and visually engaging user interface for a sports streaming service. The design aims to present sports content in an organized and accessible manner, allowing users to easily find and view games, manage their accounts, and subscribe to premium content.
3. Key Features
The app's design showcases several core features:
Home Screen: The main screen features a prominent carousel for live or featured matches, with a clean and dark interface. Below the carousel, there are sections for "My Matches" and "All Matches," categorizing content for easy navigation.
Live Match Streaming: The live stream screen includes a full-screen video player with controls. Below the video, the design provides real-time match statistics, a live chat feature, and a section for match highlights.
Subscription & Payments: The app includes a dedicated subscription flow. Users can view different subscription plans and proceed with a payment process to access premium content. The payment screen is straightforward, collecting necessary card information.
User Profile: A dedicated profile section allows users to manage their account. This includes sections for "My Subscriptions" and "My Wallet."
Navigation & Search: The app uses a bottom navigation bar for quick access to key sections: Home, Search, Favorites, and Profile. The search functionality enables users to find specific teams, players, or matches.
4. Design Approach
The visual design of ArenaCastt is modern and bold, with a focus on dark-themed aesthetics.
Color Palette: The design utilizes a dark color scheme with shades of black and deep gray, which enhances the visibility of the vibrant accent colors. A bright green is used for key buttons and interactive elements to create contrast and draw the user's attention.
Typography: The typography is clean and sans-serif, ensuring readability on a dark background. Different font weights and sizes are used to establish a clear hierarchy for headlines, body text, and statistics.
User Interface: The UI is designed with spacious layouts, clear card-based components for content, and easily recognizable icons. The design maintains a consistent look and feel across all screens.
5. Project Timeline
The project was executed over a two-week period, with each phase dedicated to specific design objectives.
Week 1: Wireframing & Core UI Design
Phase 1: Creating the initial wireframes for the core user flows: onboarding, home screen, live stream, and subscription.
Phase 2: Designing the main user interface components, including the color palette, typography, and button styles.
Week 2: Prototyping & Finalization
Phase 3: Building the interactive prototype in Figma to simulate the app's user experience.
Phase 4: Finalizing all screen designs, ensuring consistency, and preparing the files for a final presentation.
