Making complex football insights easier to explore
I designed and built a multilingual football analysis platform that helps users browse matches, understand access levels and purchase individual analyses or a monthly subscription.
A clear layer between dense match data and the people exploring it.
MatchMind is an AI-assisted football analysis platform that presents match information, access states and analysis content across multiple languages and devices. It supports analysis without suggesting or guaranteeing match outcomes.
Challenge
The challenge
Users need to scan dense information while also understanding dates, time zones, language and access.
01
How might we make dense football information easier to scan?
02
How might we clearly communicate free, single-match and subscription access?
03
How might we maintain a consistent experience across languages, devices and time zones?
Role
My contribution
I was responsible for product direction, information architecture, interaction flows, interface design, visual system, localisation decisions, design QA and front-end implementation guidance.
Mapped the product model, content constraints and required access states.
Define & Structure
Turned requirements into navigable information and an end-to-end flow.
Design
Tested hierarchy and responsive behaviour from low to high fidelity.
Flow
Connected browsing, entitlement and analysis into one coherent journey.
Build
Worked through implemented states and production constraints.
Iterate
Used production QA to find inconsistencies in loading, access and language.
Key decisions
Clarity at every state
Decision 01
Access states
The interface needed to communicate access clearly without forcing users to understand the underlying entitlement system.
Locked→Unlocking→Available
Decision 02
Multilingual navigation
A selector that only displayed “简中” was difficult for English-speaking users to recognise. The revised direction prioritises universally recognisable language names and clearer switching behaviour.
Simplified Chinese · Traditional Chinese · English
Before
Only “简中”Difficult for non-Chinese speakers
→After
Recognisable current languageClear language names
Decision 03
Loading experience
Repeated loading feedback → one clear content state
The page shell was already available, but multiple loading messages and repeated skeleton groups appeared within the content area. This made the experience feel slower and visually fragmented.
Design responseI kept the page structure stable and consolidated loading feedback into one content-level state.
Before
After
Iterations
Before / After
Production revealed mismatches that static screens could not.
BeforeMonthly members still saw locked matches in the listing.
AfterAccess states are consistent between listing and detail pages.
BeforeTwo consecutive skeleton screens.
AfterA stable page frame with one clear loading state.
BeforeThe language selector only displayed “简中”.
AfterLanguage options are recognisable across locales.
BeforeEnglish prompts blocked the entire publishing flow.
AfterChinese content can publish independently while English appears when available.
Final solution
One system, many contexts
Varied compositions are ready for final screenshots.
MatchMind · Home
MatchMind · Matches
Mobile experience
Browsing
Locked
Unlocked / Monthly member
Design systemType, colour, states, components and localisation
Outcome
A working multilingual product with a reusable interface system.
Launched a working multilingual product
Created a complete match browsing and purchase flow
Designed multiple access and subscription states
Established a reusable interface system
Improved the experience through production-based iteration
Reflection
Product design continues after the interface is implemented.
Some of the most valuable improvements came from observing inconsistencies in real states, such as loading behaviour, localisation and access permissions.
Next: Conduct structured usability testing and continue improving clarity across the purchase and analysis experience.