Hoople
Client
Hoople
Location
London, UK
Year
2025
Overview
I worked as a freelance UX/UI designer for an early-stage basketball statistics startup, responsible for end-to-end product design and the creation of a scalable design system. The platform delivered player, team, league, and schedule data for users familiar with products like NBA.com and ESPN.
My role went beyond designing screens. I was responsible for creating the underlying system that would support rapid feature growth, complex data views, and future contributors without sacrificing usability or visual consistency. The design system became the structural foundation of the product rather than a secondary deliverable.
The Problem
As the product expanded, design inconsistency quickly became a risk. New pages were added across different sections, each with dense data requirements and slight variations in layout, spacing, and interaction patterns.
This fragmentation increased cognitive load for users scanning statistics and made the experience feel less reliable. Internally, it slowed iteration. Small changes required repeated decisions, increasing rework and design debt.
The core problem was the absence of a shared design language capable of supporting complex interfaces while remaining flexible in a startup environment.
Key Insights
I analysed established sports and data-heavy platforms to understand how they present large volumes of information without overwhelming users. The strongest examples prioritised predictability over novelty.
Consistent layouts, repeated components, and restrained visual hierarchy allowed users to scan and compare data quickly. Familiarity was a usability advantage, not a limitation.
I also considered the needs of developers and future designers. Components needed to be reusable across contexts rather than tightly coupled to specific pages. This insight shifted the work from page-level design to system-level thinking.
The Solution
I designed a modular design system in Figma that defined typography scales, colour tokens, spacing rules, and layout principles.
A reusable component library was created, including tables, navigation, filters, tabs, and data cards. Each component was designed with variants and states to support different data contexts without redesign.
All major product sections were rebuilt using the system, from player profiles to league tables. The system acted as a single source of truth, reducing ambiguity and enabling faster, more confident design decisions.
Impact & Results
The design system significantly improved consistency across the platform. Users could move between sections without relearning layouts or interaction patterns, making data-heavy views easier to scan and compare.
From a workflow perspective, design and development became faster and more predictable. New pages were assembled from existing components, reducing rework and limiting design drift.
The product gained a stable foundation that supported feature growth without sacrificing clarity or usability.
What I Learnt
This project reinforced the value of system-led thinking in fast-moving product environments. Investing in structure early prevented larger usability and workflow issues later.
I also learned how to balance flexibility with control. Effective design systems guide decisions rather than restrict them.
By focusing on reusable patterns instead of isolated screens, I delivered speed, consistency, and long-term scalability under real startup constraints.
