Introduction
At their core, run clubs are very simple a community who runs together.
Queers Run Brooklyn (QRB) is an NYC-based social run club for the queer community. New York has many run clubs, but few for the queer community, and no other queer run clubs based in Brooklyn (where a large section of the queer community lives). QRB fills this niche. At the start of this project QRB existed only in concept.
As Design Chair, I was responsible for developing the design foundations to ensure the club's success by answering two core questions.
Challenges
1. (Visual) How might we develop a distinct visual identity that reflects our community and its values?
2. (Systemic) How might we get people to the same place at the same time to go on the same run together while maintaining that visual identity?
In this case study, I discuss the development of the systems and tools that answer these questions and enable the functioning of the run club.
IMPACT
1. Established QRB's Brand Identity
2. Designed a communication system used for 5–7 weekly events
3. Built and automated an operational workflow that reduced post creation time by up to 85%
.
CHALLENGE 1
Creating a Cohesive Visual Identity.
.
How might we develop a distinct visual identity that reflects our community's values?
This section describes the development of the first pillar of run club functioning — turning the concept of the run club into a material identity.
To develop the design guidelines I first built context: understanding the clubs mission and values values, the target audience, and the competitive landscape to visually highlight the value of QRB.
Understanding the Community
Mission & Values
QRB was founded to create a space where queer people could run together, build friendships, and exist openly in athletic spaces.
Core values: Inclusivity, Support, Joy.
Given the mission and values, I knew I wanted to use a voice that was friendly and sporty to visually signify the core activities a member would be participating in.
Target Audience
To understand how to design for QRB's members, I needed to understand who they were. I did that by creating a target persona based on the ideal member our club was designed to support.
.
.
Putting myself in Chloe's shoes, I saw the importance of prioritizing queer iconography as recognizing membership to this minority community is the first value of these members.
Competitive Landscape
Now, queer iconography and a friendly sporty voice alone wouldn't differentiate QRB from the three other queer run clubs already operating in the city since those features could theoretically apply to all of them. To understand what actually made QRB distinct, I needed to look at the competitive landscape.
I did this by conducting competitive analysis.
.
.
From this analysis I found three core differentiators in QRB's value proposition:
1. Highly Specific Community Served — QRB is the only queer run club based in Brooklyn, and the only queer run club with trans-exclusive runs. This specificity is likely the key driver of membership.
2. Community-Driven Leadership Model — QRB is volunteer-lead. From the runs to the leadership team, this structure creates a community investment not seen in founder-driven run clubs.
3. Unique Sporty-Social Balance — QRB is registered with NYRR but does not offer training plans, enabling competitive participation without structuring it as a core function.
Using these three key differentiators I was able to create a more nuanced design strategy to evaluate my decisions against.
3-Part Design Strategy
1. Center queer iconography and the trans community specifically — Recognizable queer iconography is an important signal for belonging. Within that, highlighting the trans community specifically reflects QRB's unique offering of exclusive activities for them.
2. Reflect community leadership with a friendly but not casual voice — The design should feel collaborative rather than hierarchical, reflecting QRB's structure and the social investment it requires.
3. Reflect running seriousness with a sporty but not clinical voice — Sporty energy without data-heavy performance aesthetics, reflecting the goals and resources of our target members.
With that criteria established, I moved into building the brand system itself — starting with the foundational elements that would govern everything else: type, logo, and color.
Reflecting the Community
TYPOGRAPHY
Process
To decide on the font used for QRB’s brand I sourced options and then ran a poll with the design committee to find the option that best fit the design guidelines.
From there I developed guidelines for font usage based on the limitations of tools to be used, and the golden ratio for scaling.
.
.
Solution
We decided on Figtree. The weight and rounded nature of the font reflects QRB’s friendly voice, while the clean lines evoke a sporty energy and a bit of formality. Striking the balance between clinical and casual it is a perfect reflection of our design goals.
Additionally, we decided on using all caps in most of our writing to reflect the energetic tone and sporty nature.
.
.
Logo
Process
I created multiple sketched options before bringing the strongest into Illustrator, refining based on committee notes focusing on extending lines and repeating shapes.
.
.
Solution
The italicized, all-caps acronym with rounded corners demonstrates the friendliness and forward motion of the club physically in the act of running and metaphorically in regards to the progressive ideals this club stands for.
Each letter of the design contains a symbol that represents a core of QRB’s identity.
Q - a rainbow for our queer community,
R - a running shoe for the activity for which this community was formed
B - one of the famous bridges of Brooklyn to specify our location
The straightforwardness of the design reflects the importance of the specificity of our club. QRB provides a service for a population that is undeserved in vague spaces so we must be specific. While the playfulness of these elements highlight the approachability that is needed to form a social community.
Color Palette
Process
Given the guidelines, the most obvious choice was to use the classic rainbow and trans colors to ensure our target demographic felt represented.
While the perfect choice in theory, as someone who went to a university whose color was tartan (a pattern), I knew I needed to come up with a limited solid color palette that effectively represented and differentiated our community as well.
Visual differentiation is not just a vibes based decision — it's a logistical one. People need to know what icon to click on and what runners to cheer for and manufacturers need to be able to produce things in our colors.
To develop a differentiated color palette decide the palette I conducted a competitive analysis of the three other queer run clubs' social icons, as well as 75 NYRR run club's (QRB's race competitors) singlets.
.
.
The vast majority of clubs use red, blue, or greyscale as their primary singlet color. Yellow and purple are significantly underrepresented, making them the optimal choice for differentiation in a race and online.
I decided on neon yellow and deep purple as our base colors alongside the core rainbow and trans flag gradients:
Neon yellow is underrepresented, associated with sport, and statistically helpful for visibility
Deep purple contrasts yellow, appears in only 3 clubs, and is historically significant in queer history.
When moving into physical production, these colors needed to map to Pantone standards (a lesson in production constraints that refined the final palette).
.
.
Additional Elements
I added additional perimeters to increase uniformity and increase the ease of making a design with strong visual interest.
Curved Lines
Designs include curved stacked lines to represent the rainbow layers of the pride flag and the lines of a track.
These are used in the background of designs to add texture and to provide spacing.
Real world elements and textures
Mixing photography and physical elements with graphic design creates a playful, sporty feel that reflects the warmth of the community. This rule does not apply to physical objects, which are 3D and carry inherent texture.
.
.
Final Designs
With the brand system established, I designed everything a club could need physically and digitally. Here are some of my favorites (excluding the communication system that is discussed in challenge 2) that demonstrate the design guide in action.
Logo & Social Icons
The QRB logo appears on Instagram within a dark rainbow gradient fill against a trans flag gradient background, outlined in neon yellow. The story highlight icons extend this system: each features imagery corresponding to its content category, set against a dark rainbow circle with a trans flag gradient outline. This is intended to read as buttons. Additionally, the gradient on the story icons is deliberately mirrored to the profile icon, creating a continuous visual flow across the entire Instagram profile.
.
.
Clothing
All clothing was designed in collaboration with the design committee.
Working with manufacturers taught me an important production lesson mid-process, to use Pantone-specified colors to execute the designs accurately! This constraint refined the final palette and is now built into the design system.
Singlet
The QRB singlet carries the brand's full visual language into a physical object. The front features a green-to-blue gradient with curved track lines on each side; the back runs red to purple with a pink line. While initially, I had did research indicating that purple would be the ideal color based on NYRR run club data, given the opportunity to use sublimation printing I was able to use the gradient focus of my designs! Together these colors represent as much of the queer community as possible (rainbow colors for queer identity broadly, pink and blue for the trans community specifically).
Additionally, I also wanted to use this opportunity to fix a design flaw that has bugged me with singlets since I was running in high school - low logo placement. Most run clubs center their logo on the chest, and most races give bibs that that cover the majority of the chest because bibs are sized for a 5'10" man (like everything else) so shorter runners' bibs cover their logos entirely.
To solve this problem, I placed the QRB mark in the upper corner above where a bib sits. Ensuring the club logo is visible on all racers singlets.
.
The singlets were also in a news segment on the NYC marathon featuring our club
.
LONG SLEEVE
The long sleeve pushed the creative vision further it has deep purple sleeves with a full rainbow gradient along the cuff, a striped collar alternating bright yellow and dark purple, and a different gradient on each side with matching curved line groupings. The design was inspired by 90s Costco Barcelona shirts. Many iterations were required to balance a wearable design for a full range of body types gender identities against production constraints.
These long sleeves have been well received by members, with the shirt being worn outside of running entirely, and, on a personal note, it is one of my favorite shirts.
.
.
Event Posts
Each month QRB hosts a social event (beach days, camping trips, skating nights, game nights etc.). For each one I created marketing materials across three formats: a primary Instagram post, a story, and a Partiful cover, all from a single composition.
My approach to multi-format design was to establish the core layout for the longest format with a square region marked inside it. If everything essential fit in the square, it held across all three formats without redesigning. I would often alter text spacing and or logo size to ensure fit, while prioritizing keeping graphic elements stable to achieve readability.
Most posts started with five minutes of rapid thumbnail sketching before moving the strongest options into Figma, sharing options with the social chair, and refining before posting.
.
Challenge 2
Getting Members to the Right Place at the Right Time.
.
How might we develop a visually consistent communication system that enables members to get to our runs without compromising our volunteer-led structure?
This section describes the development of the second pillar of run club functioning by building the operational systems necessary to get people to QRB's runs!
.
user needs:
What information needs to be communicated?
Before designing a system to get members run information, I needed to understand what information members needed to decide and plan to attend a run.
Think-ALoud Interviews
To discover this, I led think-aloud interviews with members, asking them to describe how they would figure out whether to go to a run. I recorded every piece of information they mentioned as part of that process.
This produced a frequency-ranked list of what members actually needed (for variables with the same % of mentions I prioritized primacy of mention):
1. Day and time of run — mentioned by 100% of members
2. Start location — mentioned by 100% of members
3. End location — mentioned by 60% of members
4. Run distance — mentioned by 50% of members
5. Run route — mentioned by 30% of members
Card Sorting Activity
To validate and confirm the ordering of this list, I followed the think-aloud interviews with a card sorting activity.
Members sorted possible pieces of run information into four categories: Need, Want, Fine, and Unhelpful. I chose a four group scale to ensure people were forced to choose if they had a positive or negative association with the variable (forced choice formatting).
.
Card Sort from a test demonstrating Trans Nonbinary Only or not and Run pace were in the category
.
Generally, the card sort confirmed the think-aloud prioritization, with two notable exceptions.
1. is the Run Trans Nonbinary (TNB) Exclusive? ( ADDED TO LIST)
While this was not mentioned by anyone in a think aloud. It was placed by 100% of users in the Needed category.
This discrepancy occurred because the people I surveyed were not aware that this was a club offering at the time, and as this is critical information to determine who is allowed to be at the run it made sense to add this to the prioritization even though it had not been mentioned.
2. Run pace ( NOT ADDED TO LIST)
This was categorized as a Need by 50% of members. Unlike the TNB variable, run pace is something, anyone could have predicted being a variable for a run club but it was was absent from every think-aloud.
Therefore, since members didn't reach for it naturally when describing how they'd find a run, and QRB doesn't collect or standardize pace data as part of its volunteer-led run structure. I decided to not add run pace into my list of variables to prioritize in my designs even though it came up in this data.
Final hierarchy of info needed to get to a run
Putting the results from these two studies I was able to create a prioritized list of information members needed to get to runs. I planned to use this list as an informational hierarchy when I communicated with members to ease their process.
1. Day and time of run
2. Start location
3. Is the Run Trans Nonbinary (TNB) Exclusive?
4. End location
5. Distance
6. Route
Knowing what information people needed to get to runs, my next step was understanding how they were currently getting that information and how that process could be improved.
.
Current state:
hOW IS INFORMATION CURRENTLY BEING/FAILING TO BE COMMUNICATED?
Current state Diagramming WITH HELP FROM INTERVIEWING
Before I began designing a more intentional system, the social media chair communicated to members by posting run information in posts on the main instagram feed the day before.
This system left many in the dark, missing planned runs. I interviewed club members and the social media chair to build a current state diagram to understand why this was happening and how to fix it.
.
.
Bottleneck
Volunteer run leaders sign up unpredictability often adding final run details late.
KEY pAIN
Members struggle to learn about runs in advance making it hard for them to attend.
In analyzing the current state, the key issues appeared to come from the delay in information inherent in a volunteer led structure. That is, the gap between the board meeting and the volunteer's signing up to lead runs is acting as a structural bottleneck in this current system.
The volunteer structure helps QRB build community buy in. However, here it hurts QRB as much of the info the social media chair wants to post about the is locked behind the volunteer's decision, which cannot be systemically rushed, as they are volunteers.
This leaves members with little time to plan to go to runs in advance, and the social chair overwhelmed constantly checking if there are sign ups to get the information out as soon as possible.
Additionally, since the social chair is making feed posts whenever the leader signs up the QRB feed ends up being non-chronological making it harder for members to use thier limited time to plan to go to a run.
Key Opportunity:
Critical information is known to the social media chair way before volunteers sign up and it is shared with members.
The most critical two pieces of information (day/time of run & start location (excl. Saturday's) are finalized over a month in advance. Meaning there is a tangible opportunity to extend the amount of time members have with run information (even if it is incomplete). Making it easier for members to plan to go to QRB runs.
Because there is a pain where there is opportunity this is a very solvable problem. I just needed to fill the gap.
Design Criteria
With this research in hand, an effective system needed to:
1. Reflect the information prioritization from think-aloud & card sort activities
2. Utilize the basic information finalized at the board meeting to help members plan ahead
3. Deliver complete details close to run day without requiring members to search for them
4. Maintain the clubs visual identity and ensure visual consistency post to post.
Solution 1:
Monthly Calendar with basic info & Daily Story Posts with detailed info using Manual Map Entry
This opportunity points directly to a two-part solution: communicate what is known early through a monthly calendar, and deliver the complete picture close to run day through daily story posts.
The monthly calendar, which I make at the beginning of each month, displays the top pieces of information for every run as soon as the board finalizes them. Enabling members to plan ahead the moment the month begins.
The daily story posts pick up from there, delivering the full information hierarchy once the volunteer run leader has submitted their details, with the notification feature raising the discoverability of that information.
.
.
Calendar Design
Goals
- Enable members to plan to go to a run in advance!
- Reflect available information hierarchy ( top three excl. Saturdays)
- Readable without zooming in on Instagram
- Core information visible in both square and rectangle Instagram views
- Consistent with brand guidelines :)
NOTE: The calendar is made by the design chair (me) at the beginning of each month, so designing for the social media chair's Figma abilities is not a constraint here.
Process
To figure out how to make the basic information for a months worth of runs readable at a small scale, I experimented, drawing layouts on index cards with a thick marker to simulate the constraints of Instagram's display.
This low-fidelity method made it obvious that written text alone couldn't physically scale down far enough to remain readable. An icon system, thus, became the solution: simple shape icons representing each starting location, paired with a guide, allowed for larger font sizes and built recognizability over time as members learned the symbols.
.
.
Solution
.
.
Daily Story Post Design
Goals
- Enable members to get run details easily!
- Reflect the FULL information hierarchy from research
- Consistent with brand guidelines
- Easily editable by someone without design experience
Process
For the story posts, I created fewer iterations than the calendar since the hard design problems had already been solved. The icon system, color language, and TNB signaling all came directly from the calendar work. The story post's job was to extend that system to a different format and a fuller information set.
The base story post design required fewer iterations than the calendar as the many of the design problems had already been solved. The icon system, color language, and TNB signaling all came directly from the calendar work. The story post's job was to extend that system to a different format and a fuller information set.
I sketched placement options to understand the constraints of Instagram story dimensions, then worked through creating a complete hierarchy in Figma.
The primary design challenge was fitting all six pieces of information from the research into a single screen without sacrificing readability.
The result was a single template family with variants for different conditions (day / night, TNB only / all queers, 1 route / 2 routes, 1 start / 2 starts) all built on the same visual language as the calendar. I locked and labeled all layers clearly, and walked through the system with the social media chair and created a clear instruction list to ensure she could operate it independently.
Solution
.
.
Shared Design Language
To ensure the calendar and story posts worked as a connected system, I developed visual elements that carry across both outside of the established design guidelines:
Color signaling — TNB runs use the trans gradient; all-queers runs use yellow
Location icons — identical across both formats, reinforcing meaning through repetition and used as both calendar chart icons and story post start markers
Information hierarchy — both designs reflect the same research-backed priorities
Paper Texture — consistent across both surfaces
.
Feedback on Solution 1:
Members Love the Calendar but It Takes Too Long to Make Stories
The calendar received super positive feedback from our members. However, I noticed the social media chair was constantly modifying the story post designs in ways that broke the visual consistency I had intended. These deviations were a clear signal that my designs were not meeting the needs of the social media chair.
To better understand the social media chair's perspective and see where my designs were missing affordances, I ran a think-aloud interview and asked her to walk through creating a post in real time.
"78% of my time is spent just getting that in the right place and sometimes I have to give up so the designs just cannot be the same."
— Social Media Chair in a think-aloud interview explaining why they created new templates.
The core problem
The social media chair would add routes by taking a screenshot of the route on Strava and adding that screenshot into a template, which would often not fit nicely into the map space.
To accommodate this, the social media chair would spend a long time adjusting the map's orientation, zoom level, and positioning, and if it was taking too long to work they would give up and change the designs structure (moving of the distance marker or changing the size of the map) to accommodate the Strava map they created, disrupting consistency post to post!
Solution 2:
Replacing Maps with Club Photos to Save Time
Re-evaluating priorities, I identified that adding the route map was both the most time-consuming step and the lowest-ranked element in the research. I created a new version replacing maps with photos of the club, shifting the focus to community rather than logistics, eliminating the screenshot bottleneck and speeding up the process.
.
.
Testing
I ran a timed think-aloud with the social media chair using the new templates, and conducted think-aloud interviews with new members on the redesigned posts.
Results
Removing the map was faster for the social chair, but made finding the start location (a critical step in getting to a run) harder for members.
The map wasn't just a display for the route, it acted a clarifying tool for the start location. The map visually anchored the start location in a way that text couldn't replicate. Without it, members struggled to orient themselves to where the run began.
"I accidentally went to the wrong Nitehawk Cinema because I couldn't tell it wasn't the one by me."
— Member explaining how the new template caused them to miss a run.
The social chair then needed more descriptive text to compensate, which made posts text-heavy, took more time to write, required them to look up if there were any places that could be confused with the starting spot so they could remember to clarify, and still required visiting Strava to get mileage data — eliminating the time savings entirely.
Solution 3:
(PIVOT!) Automating Map Input to save time
Given the consequences of removing a map were dire, I sought out a new way to make adding maps easier.
The answer, like with any problem where a mechanical task is difficult, was automation!
Process
Technical
I explored three technical approaches before building:
Strava API — Ruled out. The API doesn't allow access to a clubs planned run data, making it too limited for this use case.
Screenshot automation — Ruled out. Image quality was too low for branded output, and it still required one to manually add the branded start icons.
GPX file download + Leaflet/OpenStreetMap rendering — Chosen. Downloading a GPX file is easily done from Strava, and I had used Leaflet/OpenStreetMap on a past data-visualization project and new it allowed for stylization, and in-tool space adjustments i ean, as it was connecting the positioning data to a larger map. Together this allowed for the level of ease and quality I wanted to deliver.
I used Figma Make to build a working web application that automates the hardest parts of the story post creation workflow.
vISUAL
To design the system I wrote out a list of features from most to least important and then drew out wireframes on paper transfered those wireframes in Figma and then used those to syle the system
.
Making a post step by step
.
Features
Auto-zoom and positioning — The tool automatically frames the uploaded route, eliminating the primary time sink
Start location detail views — A second zoomed-in view of the start location, only possible through automation, reduces the need for descriptive text and directly addresses the orientation problem members experience
Preset location icons with predictive selection— Pre-loaded icons for common QRB start locations maintain visual language continuity from the calendar. When a route starts by one of these locations that start locaiton with be automatically selected reducing strain further.
Two-start edge case — Automatically generates the two-start variant, handling the most common edge case without a new file
,
. .
.
Testing Results
Timed testing confirmed an 85% reduction in single-route post creation time and a 73% reduction for two-route posts, increasing the social media chair's overall posting capacity by 63%!
Final System:
Brand-Finalized Automation
With the core automation validated in Solution 3, the final version focused on closing the gap between working prototype and production-ready system.
Changes in this pass: color values corrected to final brand standards, edge case templates finalized, and automated text fills expanded to cover additional run types. No functional changes were made to the automation logic — the workflow was sound. This was a craft pass, not a rethink.
Final timed testing confirmed the system holds, and improves on the Solution 3 baseline:
Time Saved
Single route post: 03:55 to 00:35 (85% faster)
Two-route post: 05:58 to 01:11
Two-start posts: 45:00 to 01:12
.
Reflection
QRB has been running for two years now. has been really cool to have created systems and that hold up under real operational pressure and have helped create a community that means a lot to me. The brand system I created touches every surface of the club. The automation tool is used every week by the social media chair.
What I'm most proud of is the range of things I have doen: a data-driven color palette backed by competitive analysis of 100+ clubs, an icon system that carries across three different surfaces, a working web application that reduced posting time by up to 85%, and physical products — singlets, a flag, stickers, a hat — worn by real people at real races. This project asked me to think as a brand designer, a systems designer, a fashion designer?. a UX researcher, and a product builder. It was so much fun!