Mahari: Youth Soccer Skills & Drill Training App

Mahari is an Android mobile application project for which I held the role of UI/UX Designer and Developer, with responsibility for end-to-end product delivery.

The project represents work spanning mobile product design and development, from the intended user experience through implementation and publication.

The application is associated with the Android package name com.soccer.skills. This case study presents the confirmed project information, Figma design architecture, and end-to-end delivery milestones.

Mobile applications need to bring together a clear user experience and a reliable technical implementation. The design must communicate the product’s purpose, help users navigate its functionality, and make important actions understandable. Development must then translate that experience into a working application.

Mahari was approached as an end-to-end mobile application project, with responsibilities covering both UI/UX design and mobile development to take athletic concepts from initial Figma artboards to production code.

Role: UI/UX Designer and Developer.

The overall scope was end-to-end product delivery, establishing design and development execution across all stages:

• UI/UX Design: Structuring application navigation, designing the 8 key mobile screens, building high-contrast UI component systems, and establishing interaction patterns.

• Mobile Application Development: Translating interface designs into responsive Android screens, integrating onboarding logic, and configuring build pipelines for release.

The confirmed high-level scope was to deliver a soccer skills mobile application through unified design and development:

• Provide young athletes with structured soccer drill guidance and HD video coaching. • Design an intuitive onboarding sequence capturing player age, weight, and gender parameters. • Build an engaging home dashboard tracking daily workout streaks and XP milestones. • Implement high-contrast visual hierarchy optimized for outdoor sunlight conditions. • Deliver an optimized Android build published on Google Play.

Mahari serves soccer players, youth athletes, and football enthusiasts seeking independent training guidance without expensive private coaches.

Key user needs addressed in the design include: • Rapid access to drills categorized by skill (Dribbling, Passing, Shooting, Fitness). • Clear exercise instructions visible at arm's length during practice. • Visual accountability through daily streaks and weekly completion rings. • Simple, distraction-free authentication and onboarding.

The application architecture was organized into four core phases:

1. Entry & Walkthrough: 3-step feature introduction (Master Skills, Track Progress, Train Daily). 2. Account Access: Dedicated login interface with credential inputs and password recovery. 3. Player Profiling: 3-step onboarding flow capturing age, weight target, and gender. 4. Core Dashboard: Daily workout streak HUD, XP metrics, upcoming exercises, and navigation tabs (Home, Levels, Progress, Challenges, Profile).

The visual design employs a sport-inspired high-contrast dark theme (#232323 background with vibrant pitch-green #62b204 accents):

• Typography: Raleway for high-impact bold headings and Montserrat for crisp, legible body and metadata text. • Layout Hierarchy: Card-based architecture with rounded pill badges, translucent glassmorphic button outlines, and high-visibility status icons. • Ergonomics: 48px+ touch targets accommodating one-handed use and fast interactions on the pitch.

With end-to-end responsibility, the design handoff was frictionless. Component styles, spacing tokens, and asset dimensions established in Figma were mapped directly into responsive Android layout structures.

Special care was taken to maintain 60fps rendering performance, ensure vector asset clarity across varying Android screen densities (hdpi to xxxhdpi), and preserve responsive aspect ratios across compact phones and modern tall displays.

Android Package Identifier: com.soccer.skills.

Implementation highlights include: • Modular screen architecture separating onboarding navigation from the main dashboard lifecycle. • Optimized asset packaging ensuring fast initial launch and responsive screen transitions. • Clean state persistence for user profile parameters and completed workout counts. • Production signing and release bundle compilation meeting Google Play requirements.

Quality assurance procedures focused on key user paths:

• Form validation and authentication input handling (email masking and password safety). • Ergonomic testing of onboarding wheel pickers (age, weight slider, gender toggles). • Responsive UI verification across diverse Android viewports (360x640 up to modern 1080x2400 displays). • Release readiness checks confirming target SDK alignment and Play Store policy adherence.

Challenge: Designing an onboarding sequence that captures essential player metrics without causing signup fatigue.

Solution: Divided onboarding into single-purpose, tactile micro-screens featuring custom numerical rotary wheels and ruler sliders. Athletes configure their profile in under 30 seconds with immediate visual feedback, leading directly into the customized daily training dashboard.

Mahari achieved successful public deployment on Google Play under the package reference com.soccer.skills.

Public Store Listing URL: https://play.google.com/store/apps/details?id=com.soccer.skills

The deployment verified build signing, asset compression, store metadata listing, and official availability for Android users worldwide.

The primary delivery outcome was achieving full end-to-end delivery of the Mahari mobile product from blank Figma canvas to live Google Play availability.

The project stands as verified proof of complete product delivery capability: establishing brand identity, crafting intuitive mobile interfaces, engineering responsive client screens, and navigating store publication workflows.

1. End-to-end delivery requires tight synchronization between UX constraints and client development from day one. 2. Tactical micro-onboarding dramatically improves profile completion compared to multi-field static forms. 3. Dark high-contrast interfaces with vivid neon accents (#62b204) deliver superior readability in bright outdoor athletic settings. 4. Early alignment on Android package identifiers (com.soccer.skills) and store criteria expedites approval.

Mahari represents a comprehensive end-to-end mobile design and development project covering product ideation, Figma design systems, athletic onboarding flows, and Google Play Store publication.

Project Reference Summary: • Project Name: Mahari • Platform: Android • Package Name: com.soccer.skills • Role: UI/UX Designer and Developer • Project Scope: End-to-end product delivery • Status: Published on Google Play • Store Link: https://play.google.com/store/apps/details?id=com.soccer.skills