RUNYC
Cultivating a community through running. An app to discover run clubs in NYC, interact with community members, and log your runs.
Type
Solo design sprint // Conceptual
About
RUNYC is a mobile app that allows you to discover run clubs across the 5 boroughs of New York City, interact with community members, and log your runs. This project began as a Figma prototype and evolved into a fully interactive coded prototype built in React with the help of Claude Code.
Context
As the popularity of running clubs continues to grow, the need for a centralized platform to discover and engage with these communities has become increasingly apparent. RUNYC addresses this need by offering users a comprehensive directory of run clubs, facilitating interaction among members, and fostering a sense of community. RUNYC aims to enhance the experience of run clubs and promote active participation in a community of like-minding individuals.
Research on Existing Platforms
Strava
Groups section contains a lot of outdated groups
Interactivity with friends is great
Too many clicks within each page of the app, making some features difficult to navigate.
Have to individually search for each run club. Need to already know the name of the club so discovering new ones is a challenge.
Hard to stay up to date since posts and stories can get lost in the feed.
Apple Fitness
Can easily track runs through Apple Watch
Data for each run is easily to read and navigate
Only includes individual friends, but cannot create groups or interact with friends from within the app.
Problem Statement
Despite the abundance of running clubs in New York City and fitness apps on the market, runners often struggle to find and connect with clubs that suit their interests and schedules. Current solutions lack a unified platform that helps users discover clubs and encourages ongoing interaction within those communities.
RUNYC solves this by providing a single, user-friendly app that integrates discovery, social interaction, and activity tracking, fostering a more connected running community across the city.
User Personas
The Newcomer
New to NYC & looking for a community to feel apart of
Wants to find beginner-friendly run clubs in her neighborhood
Difficulty finding consistent information about meeting times/locations for run clubs.
Needs a user-friendly platform that highlights beginner-friendly run clubs and up to date schedules.
The Competitive Athlete
Competitive runner looking to improve performance.
Wants to find running partners who can match his pace and push him to improve.
Difficulty in finding run clubs with runners of similar skill levels.
Needs tracking features to monitor running performance.
The Social Runner
Enjoys running as a way to relax after a hectic work day and loves meeting new people.
Wants to connect with other runners and make new friends.
Has difficulty in discovering evening run clubs in her area.
Needs a comprehensive directory of run clubs.
User Flow / Wireframes
From Figma to Code / Why I built it
I designed and prototyped the first iteration of the RUNYC prototype entirely in Figma and it communicated the visual direction clearly, but then I realized I could make it fully interactive through prompts on Claude to really bring the app to life. I rebuilt RUNYC as a React prototype, implementing every screen, every interaction, and every piece of data from scratch, while staying true to the design I first created in Figma.
This process forced me to make design decisions that I probably wouldn’t have considered while making static screens: how does the Club card behave when it's empty? What happens to the heart state when you navigate away and come back? How do you handle scroll position across tab switches? These are the questions that make it feel like a real app.
The Prototype
The prototype is fully interactive and includes all five core sections of the app. You can tap, scroll, navigate, and interact with every element.
You (Profile)
Your personal hub. The header shows your name, follower count, and a greeting based on time of day. Below that: a weekly stats card with a bar chart of your mileage, a 7-day "Coming up" calendar showing scheduled runs from your favorited clubs, a horizontal shelf of your clubs, and a recent runs list. Tapping any club or event drills into a detail view. Hearting a club on the Clubs tab immediately reflects here.
Clubs
A searchable, filterable directory of NYC run clubs. Filter by borough, time of day, or vibe tags like "Beginner friendly" or "Speed work." Each row shows the club's real logo, name, location, and schedule. Tap to open a detail page with the club description, quick stats (pace, time, distance), upcoming runs, and members. Heart a club to save it — it instantly populates your profile's clubs shelf and coming-up calendar.
Feed
A social feed of your friends' recent runs. Each card shows the runner's photo, their club, a map thumbnail with distance overlaid, pace/time/elevation stats, and any caption they added. You can react with an emoji (tap + to open the picker), like the run, or expand comments to read and reply. Below the second card, a "People you may know" section surfaces friends-of-friends with mutual connection context and a follow button.
Record
Tap "Record a run" from anywhere to open this screen. Before starting, you can connect the run to a club via a searchable bottom sheet — or skip it and run solo. Once started, a live stats overlay shows distance, elapsed time, and pace updating every second. Controls change contextually: Pause / Stop while running, Resume / Finish while paused. Finishing resets everything back to the pre-run state.
Stats
A deeper look at your running data. Tabbed by week, month, and year. Includes a bar chart of daily mileage, summary stats (total distance, time, runs, elevation), personal records, and a "fun facts" card with comparisons like "that's 2.4 miles further than Central Park's loop."
RUNYC
Cultivating a community through running. An app to discover run clubs in NYC, interact with community members, and log your runs.
Type
Solo design sprint // Conceptual
About
RUNYC is a mobile app that allows you to discover run clubs across the 5 boroughs of New York City, interact with community members, and log your runs. This project began as a Figma prototype and evolved into a fully interactive coded prototype built in React with the help of Claude Code.
Context
As the popularity of running clubs continues to grow, the need for a centralized platform to discover and engage with these communities has become increasingly apparent. RUNYC addresses this need by offering users a comprehensive directory of run clubs, facilitating interaction among members, and fostering a sense of community. RUNYC aims to enhance the experience of run clubs and promote active participation in a community of like-minding individuals.
Research on Existing Platforms
Strava
Loves outdoor adventures, tech-savy. seeks nature’s tranquility
Wants to discover new sunset viewing spots, accurate timings for outdoor photography, community engagement
Has difficulty finding optimal sunset-viewing spots, unreliable timing information, lack of community connection
Balances career and family, craves moments of tranquility
Wants convenient planning for family outings, timely reminders for golden hour, user-friendly experience
Lacks time for leisure activities, difficulty coordinating family schedules, complexity of apps
Apple Fitness
Student passionate about photography, active on social media
Wants accurate timings for outdoor photography, inspiration and location scouting, community feedback
Has challenges in finding ideal photography locations and timings, limited inspiration resources, lack of constructive feedback
Problem Statement
Despite the abundance of running clubs in New York City and fitness apps on the market, runners often struggle to find and connect with clubs that suit their interests and schedules. Current solutions lack a unified platform that helps users discover clubs and encourages ongoing interaction within those communities.
RUNYC solves this by providing a single, user-friendly app that integrates discovery, social interaction, and activity tracking, fostering a more connected running community across the city.
User Personas
The Newcomer
Loves outdoor adventures, tech-savy. seeks nature’s tranquility
Wants to discover new sunset viewing spots, accurate timings for outdoor photography, community engagement
Has difficulty finding optimal sunset-viewing spots, unreliable timing information, lack of community connection
The Competitive Athlete
Balances career and family, craves moments of tranquility
Wants convenient planning for family outings, timely reminders for golden hour, user-friendly experience
Lacks time for leisure activities, difficulty coordinating family schedules, complexity of apps
The Social Runner
Student passionate about photography, active on social media
Wants accurate timings for outdoor photography, inspiration and location scouting, community feedback
Has challenges in finding ideal photography locations and timings, limited inspiration resources, lack of constructive feedback
User Flow / Wireframes
From Figma to Code / Why I built it
I designed and prototyped the first iteration of the RUNYC prototype entirely in Figma and it communicated the visual direction clearly, but then I realized I could make it fully interactive through prompts on Claude to really bring the app to life. I rebuilt RUNYC as a React prototype, implementing every screen, every interaction, and every piece of data from scratch, while staying true to the design I first created in Figma.
This process forced me to make design decisions that I probably wouldn’t have considered while making static screens: how does the Club card behave when it's empty? What happens to the heart state when you navigate away and come back? How do you handle scroll position across tab switches? These are the questions that make it feel like a real app.
The Prototype
The prototype is fully interactive and includes all five core sections of the app. You can tap, scroll, navigate, and interact with every element.
You (Profile)
Your personal hub. The header shows your name, follower count, and a greeting based on time of day. Below that: a weekly stats card with a bar chart of your mileage, a 7-day "Coming up" calendar showing scheduled runs from your favorited clubs, a horizontal shelf of your clubs, and a recent runs list. Tapping any club or event drills into a detail view. Hearting a club on the Clubs tab immediately reflects here.
Clubs
A searchable, filterable directory of NYC run clubs. Filter by borough, time of day, or vibe tags like "Beginner friendly" or "Speed work." Each row shows the club's real logo, name, location, and schedule. Tap to open a detail page with the club description, quick stats (pace, time, distance), upcoming runs, and members. Heart a club to save it — it instantly populates your profile's clubs shelf and coming-up calendar.
Feed
A social feed of your friends' recent runs. Each card shows the runner's photo, their club, a map thumbnail with distance overlaid, pace/time/elevation stats, and any caption they added. You can react with an emoji (tap + to open the picker), like the run, or expand comments to read and reply. Below the second card, a "People you may know" section surfaces friends-of-friends with mutual connection context and a follow button.
Record
Tap "Record a run" from anywhere to open this screen. Before starting, you can connect the run to a club via a searchable bottom sheet — or skip it and run solo. Once started, a live stats overlay shows distance, elapsed time, and pace updating every second. Controls change contextually: Pause / Stop while running, Resume / Finish while paused. Finishing resets everything back to the pre-run state.
Stats
A deeper look at your running data. Tabbed by week, month, and year. Includes a bar chart of daily mileage, summary stats (total distance, time, runs, elevation), personal records, and a "fun facts" card with comparisons like "that's 2.4 miles further than Central Park's loop."