Homeplate Case Study
Homeplate is a centralized platform for a school baseball team that allows players, parents, and fans to easily view game schedules, track updates, and purchase team merchandise. The goal was to simplify communication and create a modern, engaging digital experience for the team community.
The Problem: School baseball teams often rely on scattered schedule updates through texts, emails and PDFs. They also can have outdated or hard-to-navigate websites with separate systems for merchandise sales. This leads to missed games or confusion about times and locations, poor fan engagement, and lost revenue from merch due to friction.
The Goal: Design a clean, user-friendly platform that centralizes game schedules, provides real-time updates, makes purchasing merchandise fast and appealing, and works seamlessly across mobile and desktop.
Target Users: Players (14-18), parents, students and fans. Users would need quick access to game times and locations, an easy way to check last minute changes, a quick and simple merch purchasing experience, and mobile-first usability since most users check schedules on their phones.
Initial wireframes focused on simplifying access to the two most important features:
1. Game Schedules
2. Merchandise shopping
The layout was designed mobile-first before expanding into desktop responsive layouts.
UI Design System
Colors: Navy blue, baseball red and white was chosen to reflect traditional American baseball aesthetics while maintaining contrast and readability.
Typography: Bold sport font is used to help create an authentic stadium-inspired experience
Homepage - Eye catching and immediately shows the 2 problems addressed. The next upcoming game and team merchandise. Bottom tab navigation was added for mobile to help fast thumb-access to key sections.
Why it works - Simple but helps users quickly see the upcoming game and its details, as well as a merch preview to quickly browse featured products without leaving the homepage.
Schedule Section - Users can virtually browse upcoming games through a simplified monthly calendar or the game cards. The game cards contain the teams, date, time, location, add-to-calendar button, and a responsive layout. The desktop version uses expanded schedule panels while the mobile uses stacked cards for easier scrolling. Each card shrinks and expands for more details.
Why it works - Focuses on readability, fast scanning, mobile usability, key features, and calendar integration.
Shop Section - Designed to feel like a real sports merchandise store while remaining lightweight and easy to browse. Products are separated into easy categories.
Why it works - Prioritizes organization and visual balance. The mobile version prioritizes large touch targets, vertical browsing and fast add-to-cart actions.
Product Detail Section - Easily shows the product, size and quantity controls, related products, and a CTA add-to-cart button.
Why it works - Keeps purchasing simple, showcases apparel clearly and reduces checkout friction.
Cart & Checkout section - Shows quick quantity editing, clear pricing hierarchy, and a simple checkout CTA.
Why it works - It is intentionally minimal to reduce distractions and improve conversion.
Sports branding can easily become visually overwhelming. The challenge was creating a bold interface while maintaining structured layouts, clear hierarchy, balance, and readability.
Organizing schedules, products, and team content required strong spacing systems and consistent card structures to avoid clutter. The final result creates a cohesive digital experience that feels modern, energetic, and easy to navigate for both players and supporters.
This project helped strengthen my understanding of E-commerce flows, mobile navigation patterns, visual hierarchy, and component consistency.
Homeplate was designed to modernize how school baseball communities connect through schedules, merchandise, and team engagement.
Copy/Paste Prototype Link Below:
https://www.figma.com/proto/gyOqaIP3MQIXvXFL477svj/Portfolio?node-id=28-616&viewport=-612%2C899%2C0.25&t=rgV07aE8xHaWW2Yx-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=28%3A616&show-proto-sidebar=1&page-id=17%3A1862
