Product Designer · 4 Products · End-to-End UI/UX
Context
Youth sports clubs in Saudi Arabia are running on informal systems. WhatsApp groups for scheduling, paper sheets for attendance, cash payments with no tracking, and zero visibility for parents into what is happening with their child's training. For a club owner trying to grow, this is not just inconvenient — it is a ceiling. You cannot scale a club you cannot manage. You cannot retain parents who feel disconnected. Shihany was built to change that — a complete sports management ecosystem connecting clubs, coaches, players, and parents in one interconnected platform designed specifically for youth sports clubs across Saudi Arabia.
My Role
End-to-end product design of a 4-product sports management ecosystem — two mobile apps and two web platforms — each with their own design system, all sharing one interconnected data layer.
Parents and coaches were not failing because they didn't care — they were failing because the tools forced them into informal workarounds. A WhatsApp group is not a scheduling system. It is a symptom of a missing one.
— Core User Insight
Overview
End-to-end product design of a 4-product sports management ecosystem — two mobile apps and two web platforms — each with their own design system, all sharing one interconnected data layer.
Challenge
Clubs managed everything through WhatsApp groups and paper sheets. Schedule changes were missed, attendance was never digitized, payments were untracked, and parents had zero visibility into their child's training. The product had to be clearly better than a free familiar tool people already knew.
Solution
A four-product ecosystem: Shihany Hub (web, club management), Shihany App (mobile, players and parents), Shihany Pro (mobile, coaches), and Shihany Federation (web, federation oversight) — all interconnected, each with its own color identity within two shared design systems.
Design Challenges
The Problem
Attendance was done on paper — a printed sheet, a pen, a coach manually checking off names before a chaotic warmup with 20 kids. Sheets got lost, data was never digitized, and parents had zero visibility. The goal was to make attendance so fast that a coach would actually use it mid-session, standing on a pitch, with kids running around them.
The Solution
QR code check-in: each player has a unique QR code in the parent's Shihany App. The coach opens Pro, starts the session, scans players as they arrive. Attendance syncs to Hub instantly. Parents receive a notification: "Your child checked in to training at 5:03pm." The scan flow is one tap from anywhere in the app — no navigation required for a coach mid-session.
A coach mid-session cannot afford to dig through menus. Every interaction in Shihany Pro had to be completable with one hand in under 5 seconds.
The Problem
Clubs joining Shihany had their player roster in Excel, WhatsApp contacts, or paper forms. Manually re-entering 80 players one by one was a dealbreaker. The additional challenge: each player needed to be linked to a parent account — but the parent may not have downloaded the app yet.
The Solution
Progressive bulk import: Upload → Column Mapping → Error Review → Confirm. For players with no registered parent, the system imports the player, flags them as "pending parent", and automatically sends an invitation SMS to the parent's phone number. The pending state has its own designed appearance in Hub, in Pro, and resolves automatically once the parent registers.
Import flows need to handle the reality of messy, incomplete data — not the ideal case.
The Problem
Four products, four user types, two device contexts, four color identities — without making them feel like four unrelated apps. A user moving between products needed to feel orientation, not confusion. The dev team needed to work across both mobile and web without relearning component logic.
The Solution
Two-layer design system: Layer 1 — shared foundations across all products (spacing, typography, border radius, shadow, interaction patterns, component behavior). Layer 2 — product-specific color identity. Mobile system built for thumb-zone navigation and one-handed use. Web system built for information density. Both systems share naming conventions and component logic.
An ecosystem is only as strong as its weakest product. You cannot design them in isolation even if you build them in sequence.
Selected Screens
Impact & Results
Learnings
An ecosystem is only as strong as its weakest product.
If the parent app is confusing, coaches lose attendance data. If Hub is slow, clubs don't invite coaches. Every product in the chain affects every other.
Mobile design for coaches means designing for distraction.
A coach mid-session is moving, talking, managing children. Every interaction in Shihany Pro had to be completable with one hand in under 5 seconds. That constraint made the product better.
WhatsApp is the competitor, not other sports software.
The real benchmark was a free, familiar tool people already knew. The product had to be clearly better than a WhatsApp group to earn adoption. That bar is higher than it sounds.
A great product can still fail without investment.
Shihany worked. Clubs used it. Coaches preferred it over paper. The lesson is not about design — it is about the full journey from product to business.
Tools & Methods