Project Name
MLB Patterns
Problem
Major League Baseball’s website and all 30 team sites were dated, not responsive, stylistically disjointed, and high maintenance. There were no web style-guides coming from the league, and therefore no cohesion across the different sites and products. In addition, sites were very heavy and thus slow to load.
Goal
To create a React component library for UI elements built on atomic design, used to leverage speed and scalability for MLB’s digital products.
Overview
From Stats, Scores, Schedule and Standings to Player Pages, News, Videos and the Homepage, MLB.com houses a ton of information; the content is seasonal, and it changes constantly with game states. With such demanding content, a new build implementing patterns was needed in order to support the League and 30 team sites (as well as partners like the PGA Tour, WWE, HBO). The cross-functional pattern library team had product, engineering, and design working directly - in agile - on a daily basis. We successfully built out a functional pattern library using React components on time and on budget.
Timeline
13 months
Role
Product Designer, UX Designer
Platform
Web, and mobile web
Growth Opportunities
Growth is endless and lies within the flexibility of such a powerful system.
MLB Patterns: React Design Library
MLB Patterns: Buttons
MLB Patterns: Colors
MLB Patterns: Modals
MLB Patterns: Drop Downs
MLB Patterns: Pagination
MLB Patterns: Date Picker