yplay
All work YPlay · Case
Sport marketplace

YPLAY

Brought 4 fragmented amateur-sport scenarios into one product. Finding a coach, booking a field, a live match broadcast and a team account — now where chats and Google Forms used to be.

Role
Product designer
Scope
30+ screens · 4 modules
Stack
Web + design system
yplay.ru/match
← live product
Scroll
Context
Telegram WhatsApp Google Forms Excel Calls PDF
yplay
Before — 6 services. Now — 1 product.
01
Module 01

Leagues: tournaments, tables and live broadcasts in one system.

A league home page — the table plus the match of the week. Every match expands into a full broadcast: video, an event ticker, stats, a fan chat.

Open page
yplay.ru/leagues
Key points

“Match of the week” instead of a long list of matches — one emotional block grabs attention more than ten identical ones.

+Comparison bars instead of a radar chart +Sport is pulled out separately +Sidebar widgets for the live signal
02
Module 02

Rentals: field booking in two clicks.

The main screen — a days×hours slot grid. The user sees the whole free week at a glance. Morning discounts are built into the visual system.

Open page
yplay.ru/venue
Key points

Grid days×hours instead of a standard date-picker — the user sees all free time at a glance, without 2–3 clicks.

+A fourth state — “discount” (−30% in the morning) +A sticky booking widget on the right +A neighborhood map on the card
03
Module 03

Coaches: a catalog with verified certificates.

Every coach is a card with a photo, sport, certificate and real reviews. The first session is free — removing the risk of choosing.

Open page
yplay.ru/coach-search
Key points

A search anchor in the hero instead of a separate filters page — an input + sport chips immediately suggest “what to do”, with no need to learn the interface.

+A certificate on the card instead of “response time” +A featured card right on the catalog page +Real photos instead of 3D models
04
Module 04

Live match: broadcast with everything a fan needs.

Line-up, video, event ticker, stats, chat — all on one page. Like a sports broadcaster, but interactive.

Open page
yplay.ru/match
Detail · line-up
Barça
1:1 67'
Man City
1
3
15
4
2
21
5
8
11
9
7
10
17
7
16
8
2
3
5
25
19
31
Key points

A line-up like “broadcast frame” — 22 players in 4-3-3 and 4-2-3-1 formations on the pitch. The most recognizable “sports” visual — instant context reading.

+An event ticker to the right of the video +A fan chat with “Home / Away” tabs +A live video player with an overlay score
05
Module 05

Team account: a dashboard where all the team’s work lives.

The captain sees the next match, player status, finances, active tournaments — with no need to dig through a chat to figure out “who showed up, who paid.”

Open page
yplay.ru/team-cabinet
Key points

3 widgets instead of 7 — at first it was a mess of dashboards, keeping only “Match / Squad / Finances + Tournaments”. The rest in a sidebar with a badge.

+Squad = avatars in a row with a status dot +The status palette is narrowed to 3 colors +A sticky left sidebar with a PRO badge
Design system

One language for the whole product.

All 30+ screens on one palette, one type system and one component set. The captain moves from a live match to the team account without losing navigation.

Royal
#2929E0
Hero, section accents
Ultramarine
#1A1F71
Shields, dark surfaces
Blue
#0065FF
Links, logo, icons
Lime
#C4FF3D
CTA, live accents
Ink
#0d1117
Text, ground
Live
#FF3B3B
Live indicator
Brand · Manrope 800
Headings · Inter 900 Slot calendar
instead of a date-picker
Subheading · Inter 600 The point of the page — to see all free time in a couple of seconds.
Body · Inter 500 Manrope only on the logo and numbers. Headings and body — Inter (reads well in Cyrillic, doesn’t turn into a “picket fence” at large sizes).
Team shields · custom SVG
Man City
Barça
Arsenal
Real
Lightning
+
scalable
Components · context of use
Live indicator
LIVE 67'
1 : 1
Filter chips
⚽ Football 🏀 Basketball 🎾 Tennis 🏊 Swimming
for the team away youth
Primary CTA ⭐ Verified by YPlay
Avatars with a status dot
AK
MR
VS
Status “available / out”
Slot cells
−30%
Free · busy · discount · selected
Match card
Barça vs MC Round 17 · Camp Nou
1:1
The outcome

A marketplace with clear a single logic interactions.

30+
screens with coherent navigation and a shared design system
4
modules cover the amateur-sport scenarios
3
kinds of UX in one product: catalog, transaction, dashboard
22
reusable components in the system