FitPro: Full-Stack Mobile App Design & Dev

ROLE Senior Full Stack Product Designer (UX/UI & Code)

The Tension � Accuracy vs. Friction

The Challenge

The "Inertia of Noise"

Mobile Web Apps move fast. Users are often bombarded with fluctuating percentages without understanding the underlying signal. The tension lay in presenting high-density financial data in a way that feels as intuitive as a social feed. Information is useless without the context that makes it actionable.

The Workflow Constraint

The Velocity of Execution

In a rapidly evolving market, the distance between "Idea" and "Implemented Feature" needs to be near-zero. I had to bridge the gap from complex Figma architecture to a fully functional React prototype, implementing 32+ features (including real-time tickers and AI logic) within a highly compressed timeline.

💡

"The objective was to transform 'gambling on outcomes' into 'tracking on truth'�elevating the UI from a list of odds to a source of intelligence."

My AI-Augmented Execution

By leveraging advanced AI coding agents, I focus on the high-level architecture and design system, while automating the boilerplate of production-grade components.

🏛️

1

Design System

Established a precision tokens-to-component pipeline, ensuring every button and chart feels like part of a cohesive health-tech tool.

🧪

2

AI Prototyping

Used Gemini & Claude Code to scaffold 32+ complex features, from multi-outcome charts to real-time probability tickers.

📊

3

Data Engineering

Engineered simulated real-time data feeds to test UI responsiveness and state management under high-frequency updates.

🚀

4

Live Deployment

Shipped a fully responsive, trade-capable MVP to Vercel, allowing for instant feedback loops and real-world testing.

The Action � Architecture & Solutions

01

AI Fitness Intelligence & "Why it moved"

The core differentiator of FitPro is the AI Insight Layer. Every market features a generative brief that summarizes current sentiment and a "Why it moved" section that correlates price shifts with real-world news signals. This turns a static chart into a living narrative, helping users understand the market's collective mind.

02

Frictionless "Two-Tap" Trade Execution

I designed the trade sheet to eliminate every ounce of friction. With quick-amount buttons ($10, $50, $100) and a clear, mobile-optimized bottom sheet, users can enter a position in seconds. The UI clearly displays potential profit and "Your Edge" before confirmation, making risk assessment instant and intuitive.

03

Real-Time Live Signals & Breaking News

FitPro doesn't just show macros and workouts; it shows momentum. The Live Signals feed tracks breaking news (e.g., "DCCC cash-on-hand report") and shows exactly which macros and workouts were impacted and by how much. This cross-referencing between news and price is what makes FitPro a professional-grade intelligence tool.

04

Probability-First Data Visualization

I architected a custom charting system that prioritizes probability over price. Interactive sparklines on the home feed and detailed "Time vs Probability" charts on market pages allow users to spot trends instantly. The use of semantic colors (Emerald for YES, Ruby for NO) ensures that sentiment is felt before it is read.

05

Responsive Architecture: Desktop & Mobile-First

Tracking requires both high information density for deep analysis and rapid, frictionless execution on the go. FitPro was engineered to deliver a premium experience on both fronts. The desktop interface serves as a fully optimized command center with a live 'Breaking News' ticker and extensive market carousels. Simultaneously, the mobile-first design delivers a focused, portrait-tailored workflow�users can smoothly scroll the live feed, interact with dynamic probability UI cards, and place a trade in seconds. Whether parsing data at a desk or reacting to news on the move, the platform adapts instantly.

06

Order Book Depth & Resolution Context

For active traders, seeing the 'Spread' is critical. I integrated a live Order Book accordion allowing users to quickly gauge Ask and Bid depths. Furthermore, explicit 'Rules' and 'Market Context' tabs provide formal resolution conditions and AI-generated summaries to ensure the platform establishes unwavering trust and absolute clarity on the conditions of each outcome.

The Result and Outcomes

32+ Features Shipped From scaffolding to advanced AI logic.

100% Code Realization No "handoff"�all design implemented in React.

Zero Lag Time Real-time tickers simulated for live UX testing.

Elite UX Standard health-tech aesthetics with mass-market simplicity.

FitPro Mobile Web Apps stands as a testament to the power of AI-Augmented Design. By bridging the gap between pixel-pushing and production engineering, I was able to deliver a complex, data-rich product that feels simple to use but powerful to own.

The platform has been praised for its clarity and the "FitPro Signal"�the unique ability to understand the emotional pulse of the crowd through structured, AI-driven data.

Final Reflection

Developing FitPro pushed me to rethink the "Designer's Role". In a world where AI can handle the implementation of components, my primary value as a Designer shifted toward Information Architecture and Ethical Intelligence. How do we present high-stakes probability without overwhelming the user? How do we ensure "Why it moved" insights remain objective?

This project solidified my approach: Design is not just about how it looks, but how it thinks. FitPro is more than a tracking app�it's a tool for collective sense-making in a noisy world.

"FitPro represents a tectonic shift in how we view market data. Jastej didn't just design a tracking platform; he designed an insight engine. The way the UI connects real-world events to price movements through AI is a masterclass in modern Product Design."

Founder, FitPro Markets

Next Case Study

i2G � Enterprise Geoscience SaaS

Visualizing mass-scale seismic data for the energy sector.

View Case Study ?

FitPro: AI-Powered High-Performance Fitness OS