Transit Stats App

Public transit, made personal

78

As a daily Chicago CTA rider, I wanted to track my own transit data accurately, but nothing existed to do it. So I built Transit Stats, the first app designed to turn public transit rides into meaningful personal analytics. From concept to App Store launch in four months, I designed the brand, all the UI/UX, and website while writing the backend code as well as the frontend code with the help of AI tools.

Role
Founder, Product Designer
Years
2025-2026
Scope
Strategy, UI/UX Design, 0 to 1
Transit Stats — ride tracking
Transit Stats — welcome screen
Transit Stats — ride tracking
Transit Stats — welcome screen
Transit Stats — ride tracking
Transit Stats — rider profile
Transit Stats — ride stats
Transit Stats — rider profile
Transit Stats — ride stats
Transit Stats — rider profile
Transit Stats — city ranking
Transit Stats — live ride in progress
Transit Stats — city ranking
Transit Stats — live ride in progress
Transit Stats — city ranking
Transit Stats — ride history
Transit Stats — CTA coverage map
Transit Stats — ride history
Transit Stats — CTA coverage map
Transit Stats — ride history
Transit Stats — achievements
Transit Stats — profile and settings
Transit Stats — achievements
Transit Stats — profile and settings
Transit Stats — achievements

Challenge

Public transit generates an enormous amount of data, yet almost none of it ever reaches the rider. As a daily CTA rider, I had no way to track my trips, measure my environmental impact, know if my monthly pass was worth it, or understand my habits over time. I wanted to take Chicago’s overlooked transit data and make it personal, useful, and fun.

Impact

1,500+

Users Acquired

100+ Premium Users

Paying for Pro

400+

Daily Active Users

4.7/5 Rating

On the App Store

Data

0

Rides Taken

0

Miles Traveled

0

Hours Recorded

Who I Designed For

I designed with two types of users in mind. The daily commuter takes the same routes every day and wants to understand their habits, which I learned from friends who commute to work on the CTA. The city explorer is the persona I fit into, always riding somewhere new and wanting to see that impact. Every feature in the app serves one or both of them.

User Type 1

The Daily Commuter

  • Rides the same lines from the same stops on a regular basis

  • Wants to understand their habits: time, distance, and most-used lines

  • Wants their daily commute to add up to something visible

  • Interested in baseline stats, leaderboard, and environmental impact

User Type 2

The City Explorer

  • Always going new places, riding new routes and visiting new stops

  • Treats the transit map like a checklist to complete

  • Wants credit for every new stop and line they reach

  • Interested in total coverage, achievements, and leaderboards

Feature Mapping

I organized my own ideas as well as feedback and thoughts from friends into core feature categories, then detailed the capabilities within each one, grounded in what I wanted as a daily CTA rider and what my friends in Chicago wanted from the app.

Feature mapping board — features sorted into Tracking, History, Stats, and Leaderboard

Inspiration & Discovery

Before designing anything, I pulled together a moodboard. It included app UI I admired, anything related to transportation and maps, and anything else I thought looked cool. It served as a creative starting point and a source of inspiration.

Transit Stats moodboard — app UI, transportation and map references, and other visual inspiration collected before design began

The Working File

One of many Figma pages that look like this. This is how I designed the details of every UX flow and feature in the app.

A Transit Stats working Figma page — onboarding flows and stats screens explored across the dark canvas
A second working page — auto and manual ride tracking flows worked out screen by screen

Design Process

The app design evolved from early sketches to two rounds of wireframes before reaching the final polished UI. This progression shows the refinement and thinking that shaped Transit Stats from concept to launch-ready product.

Initial sketches — the new ride flow worked out on paper, from ride entry to confirm and discard
First wireframe — grayscale ride tracking screen, start button, distance and time, transit type
Second wireframe — refined tracking with live ride stats, autofilled transit line and route
Final design — the shipped Tracking screen in the full visual language, ride in progress

Initial Sketches

1st Wireframe

2nd Wireframe

Final Design

Key Design Decisions Based on Feedback

These are some of the key decisions I made on the tracking and leaderboard pages, based on feedback from the friends I had testing the app, as well as my own testing and everyday use as a daily CTA user.

Tracking screen — start or log a ride, ride streak, weekly stats, and service alerts
Ranking screen — the leaderboard with the user's own rank and percentile pinned on top

Track Ride Entry Point

Most prominent element on the app’s dashboard

Emphasis on the live tracking feature to encourage use

Quick Info at a Glance

Current ride streak is immediately presented to the user

Brief overview of weekly transit stats

Notable CTA outages/alerts surfaced in a digestible format

Personalization

User is immediately shown their rank/percentile on the leaderboard

Ability to change metric and time period and still see personal rank

Social Features

One-click share feature in a key moment to encourage organic growth

Key Experiences

Website

The marketing site had to explain the app clearly and simply as well as turn visitors into downloads. I designed and built it to carry the brand identity through every piece of the site.

Branding, Marketing, & Advertising

I designed the brand and marketing presence, from the logo, palette, and typography to advertising built to drive downloads.

Brand system — logo, palette, and typography
App Store screenshots
Advertising creative — CTA transit analytics made personal

Technical Workflow Using AI

This is the technical workflow behind the making of the app. I wrote the backend code as well as the frontend code with the help of AI tools, taking Transit Stats from concept to App Store launch in four months as a solo designer.

Transit Stats technical workflow — Figma designs into Claude Code, pushing to GitHub and building the Firebase backend, connected to the FlutterFlow frontend and published to the App Store and Play Store

Surprise Appearance on the Chicago News

Transit Stats caught the attention of local media, earning a spot on Fox 32 Chicago. I sat down on-air to talk about the app, the story behind it, and what it means for the city’s transit riders.

Charles on-air on Fox 32 Chicago talking about Transit Stats

User Feedback

Feedback from users sharing their experience after the app launched.

Ridiculous overkill for neurotic transit nerds. I love it.

Transit Stats

matthewmagellan

Transit Stats User

Woah this is so sick. I have to say, as a UI designer the app is really well built, easy to use, and super fast! Awesome job on the backend.

Transit Stats

Confident-Rabbit-876

Transit Stats User