From concept to community
Queers Run Brooklyn (QRB) is an Brooklyn-based social run club for the queer community. At the start of this project QRB existed only in concept.
This case study describes how as design chair I developed the systems and tools turned this concept into a functional community.
CHALLENGES
1. Creating a visual identity to represent and attract a community
2. Building the infrastructure necessary to ensure that community runs together
IMPACT
Established a visual identity for QRB, building a functional design system and applied it across platforms and physical products.
Increased social media manager capacity by 85% through building an automated and operational workflow for day of run communication with a functional website that generates post-ready images from a Strava route data.
Formed a design committee and led meetings to ensure proper direction and iterate on designs.
My Role
Design Chair in name, but more comprehensively: brand strategist, visual identity creator, UX researcher, communication system builder, design committee founder, digital and physical prototyper, and developer of a functional route-post automation tool
TOOLS
Personas, Competitive Analysis, Think Aloud Interviews, Card Sorting Activities, AB Testing, Current State Diagraming, Journey Mapping, Rapid Prototyping, Wireframing
.
1/2
Identity
How might we develop a distinct visual identity that reflects our community's values?
-
.
Understanding the Community
To develop designs that represented QRB, I first needed to understand what I was representing.
Mission & Values
In our first meetings as a club we established QRB's mission and values to ensure our clubs choices were aligned to something we believed in.
MISSION — QRB was founded to create a space where queer people could:
1. Run together
2. Build friendships
3. Exist joyfully in athletic spaces.
Core values — Inclusivity, Support, Joy.
Given this prioritization, I knew the athleticism our activities and joy of community had to be reflected in the tone of our materials.
Target Audience
To better design for potential QRB's members, I created a 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 for a felt sense of belonging.
Competitive Landscape
To understand what makes QRB distinct from the three other queer run clubs of NYC, I conducted competitive analysis across 20 different factors to gain a clear idea of the competitive landscape.
.
.
From this analysis I found three core differentiators in QRB's value proposition that needed to be reflected:
1. Highly Specific Community Served — QRB is the only Brooklyn based queer run club and the only NYC club with trans-exclusive runs. For these communities the base logistics of QRB are valuble.
2. Greater expectation of community investment — QRB is volunteer-lead. Necessitating a culture of greater community commitment than founder-driven run clubs. For those who want to feel like they are a contributing member of a community QRB yields value.
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 thus supporting two levels of runner intensity.
3-Part Design Strategy
1. Signal belonging to target members by centering queer & Brooklyn based iconography with care to highlight the trans community specifically.
2. Reflect community leadership model with a friendly but not casual voice.
3. Reflect goals of target members by invoking a sporty energy without a clinical data-heavy performance aesthetics.
Reflecting the Community
With criteria established, I began building the brand system itself. To ensure these foundational decisions were truly representative I formed a design committee to build consensus and receive feedback efficiently.
TYPOGRAPHY
Process
To determine our base font I sourced strategy aligned font options and polled the design committee.
.
.
Solution
We decided on Figtree in all caps. The weight and rounded nature of the font reflects QRB’s friendly voice, while its clean lines evoke a sporty energy and an air of commitment.
I then used the golden ratio to develop additional usage guidelines.
.
.
Logo
Process
I sketched multiple options and brought the strongest designs into illustrator. I then showed these initial digitizations to the committee, who favored my most straightforward design as it clearly represented our value proposition.
Finally I refined the design focusing on extending lines and repeating shapes.
.
.
Solution
.
.
Color Palette
Process
Given the guidelines, my first thought was to use the classic pride and trans flag colors to ensure our target demographic was represented.
However, as someone who went to a university whose color was tartan, a pattern (famously not the same thing as a color!), I knew it was important to me to have a consistent limited solid color palette option to fall back on when multicolor was not a manufacturing possibility to maintain consistency.
To decide what solid colors to choose I conducted a competitive analysis of the three other queer run clubs' social icons (QRB's community competitors), as well as 75 NYRR run club's (QRB's race competitors) singlets to ensure the color palette picked would differentiate our club from others online and during races.
.
.
The vast majority of clubs use red, blue, or greyscale as their primary singlet color.
Knowing this, I chose neon yellow as our highlight color to work along side our trans and pride gradients as yellow is different from other queer clubs generally underrepresented in NYRR, associated with energy and sports, helpful for visibility, and contrasting in the purple effect of the other stylized rainbow gradients used to represent the club.
Solution
.
.
Additional Elements
Curved Lines
Stacked curved lines represent the layers of the pride flag and the lines of a track, they are used in the background of designs to add texture and structure.
Real world elements and textures
I added real world textures in all non physical designs (3D designs have inherent texture) to add visual interest and add a warmth to the sporty gradients.
.
.
selection of Final Designs
Social Icons
The gradient backgrounds of the profile photo and story covers connect, creating a seamless visual flow of the whole profile page.
.
.
Clothing
Singlet
This design fixes a common singlet design error that has bugged me since I started racing in middle school - low logo placement! Most singlets feature a logo centered on the chest, but race bibs are sized for a 5'10" person, so most people end up covering their club/team logo with the race bib.
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
Inspired by 90s Costa Barcelona this design geometric was tested to ensure elements were flattering for a full range of sizes, cuts, and gender expressions.
.
.
Event Posts
QRB hosts monthly social events (beach days, camping trips, skating nights, game nights etc.)., for each I created marketing materials in three formats: Instagram feed post, Instagram story, and Partiful cover.
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 for each format before posting. To ensure successful multi-format design I established core layout for the story post format, with the dimensions of the instagram feed and story post dimensions locked in a visible top layer to ensure I did not get tied to unscalable elements.
.
2/2
Communicate
How might we build the infrastructure necessary to ensure that the QRB community runs together?
-
Discover
Building understanding
User Needs
To identify what information I would need to communicate I led think-aloud interviews with members, asking them to describe how they would figure out whether to go to a run and how they would get there.
This produced a frequency-ranked list of what variables members actually needed to know to get to a run (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
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 (forced choice formatting): Need, Want, Fine, and Unhelpful.
.
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 one exception
Trans Non-binary (TNB) Exclusive? — (0 Interview Mentions → 100% 'Needed' Placements Card Sort)
This discrepancy likely occurred because those surveyed were not aware that this was a club offering at the time. Given this variable answers the critical 'Who?' question, I added it to the list in the top tier.
Final hierarchy of info needed to get to a run'
1. Day & Time of Run
2. Start Location
3. Trans Nonbinary (TNB) Only or Not?
(most critical above)
4. End Location
5. Distance
6. Route
.
Current state
Initially, the social media chair would post about runs on the main instagram feed the day before a run.
I interviewed members and the social media chair to create a comprehensive model of their journeys and the system in it's current state to understand how information was shared within its early context.
.
...
Key Problem
Members often fail to learn about runs in time to attend.
Members learn about upcoming runs via posts on the main feed, but when those posts come out too late, as often happens, and members are not notified immediately about posts then members do not know run information and thus cannot attend runs.
Bottleneck
Volunteers sign up to lead runs (providing final critical information to the social media chair) at the last minute delaying when the social media chair shares run information with members.
The volunteers QRB relies on to plan and lead runs add uncertainty and delays in the process because they sign up on their own schedule, which usually means last minute. The social media chair relies on this information to making volunteer autonomy a structural bottleneck delaying run information availability to the public.
This delay makes it difficult for members to plan to go to runs reducing attendance.
Key Opportunity
Some pieces of critical information are finalized by the board and known to the social media chair way before volunteers sign up.
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.
Define
COMMUNICATION SYSTEM Design Criteria
1. Share board finalized info early to enable future planning
2. Deliver complete details close to run day without requiring members to search for it
3. Reflect the info prioritization from research
4. Maintain QRB's visual identity and ensure visual consistency post to post
iteration 1/4
Monthly Calendar & Daily Story Posts (Manual Map Entry)
To meet the design criteria, circumvent the bottleneck and take advantage of the critical information lead time window I created a two-part solution:
1. Pinned Monthly Calendar for Future Planning
Communicates basic info as soon as the board finalizes it at the beginning of each month enabling members to plan ahead. Pinning this post makes it a referable resource.
2. Story Posts for Last-Minute Detailed Info
Delivers the complete picture, including volunteer added details, close to run day enabling members to make more concert plans. Inherent story post notifications increase discoverability vs previous grid post.
.
.
Design
monthly calendar
I recreated instagrams constraints in lo-fidelity by drawing with a thick marker on index cards. This tactic made it clear that writing out all information for each date would be overwhelming and unreadable.
.
.
To make this information manageable, I color coded runs to indicate TNB or not and created icons to represent standard start locations.
Given this is a response to board meetings, I took responsibility for the monthly design and visual consistency.
.
.
daily story posts
Here I needed to extend the calendars design solution to a different format and a fuller information set, while ensuring usabiluty for the social media chair who does not have design experience.
To ensure readability I again iterated using the index card process to develop structure. Then in Figma I utilized the QRB run database to ensure font sizes would fit edge case location titles.
.
.
To enable usability for the social media chair, I created a clear decision tree (3 layer choices and 6 location options) in Figma and walked through the system to ensure they could operate it independently.
.
.
initial Feedback
Members love the calendar and the stories, but it takes the social media chair too long to make story posts
The calendar and the stories received overwhelmingly positive feedback from our members. With members noting an increased ease in attending runs.
However, I noticed the social media chair constantly modifying the story post designs, breaking the visual consistency of the system, and signalling that my designs may lack necessary affordances.
TESTING
To understand the underlying issue I ran a think-aloud interview asking asked the social media chair's to walk through creating a post in real time.
result
Adding maps of routes to story posts is difficult and time consuming.
The social media chair would add routes by taking a screenshot of the route on Strava and adding that screenshot into a template, which often did fit cleanly into the map space.
To accommodate this, the social media chair spent a long time adjusting the map's orientation, zoom level, and positioning, and if it was taking too long or got too frustrating she would give up and change the designs structure disrupting consistency post to post!
"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 think-aloud interview explaining why they created new templates.
iteration 2/4
Replacing Maps with Club Photos in story posts to Save Time
Upon re-evaluation, I identified adding the route map as both the most time-consuming step and the lowest-ranked element in the research.
To address this 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.
While the routes were gone, I made sure to continue to build on visual consistency, by placing start location markers in the upper corner of each run club image.
.
.
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.
Result
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.
Moreover, when attempting to compensate for this loss the social media chair had to look up questions and add clarifying text while still gathering data from Strava, eliminating all time savings and making posts denser and less readable.
iteration 3/4
(PIVOT!) Automating Map Input on story posts to save time
Given the consequences of removing a map were dire, I sought out a new way to make adding maps easier. Like any repetitive task, the answer was automation.
Process
1. eNSURING critical map input automation worked
To understand what process I would be designing screens to support I explored three technical approaches before landing on GPX file download with Leaflet/OpenStreetMap rendering to support automation.
.
.
2. Determining neccisary tool affordances
In order to test my solution quickly I wrote out a list of information that needed to be manually added and a list of edge cases. These were all things my tool would need to do in the background or foreground.
Using this system wrote out a list of features from most to least important and then drew out wireframes on paper and transferred those wireframes in Figma and then used those to style the system.
3. Designing Wireframes
I sketched out wireframe options by hand and then on figma keeping information hierarchy and previous qrb data as a priority.
I used Figma Make to build a working web application that automates the hardest parts of the story post creation workflow.
sOLUTION
.
Making a post step by step
.
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 with detection — Automatically generates the two-start variant, handling the most common edge case without a new file
,
. .
.
Testing
To test the effectiveness of my solution, I ran a trial where the Social Media Chair created posts for runs using either the old method or the new automated system with route inputs for routes with similar difficulty 5 times each across the one route basic start, one route different start, 2 route 1 start, and 2 route 2 start cases
.
Testing - Old System in View
.
Results
Timed testing confirmed that this solution was incredibly effective an increasing the social media chair's total posting capacity.
Single route post:
03:55 → 00:35 (85% Faster)
Two-route post:
05:58 → 01:11 (73% Faster)
Two-start posts:
45:00 → 01:12 (97% Faster)
Final solution
Brand-Finalized Automation
With the core automation validated in Solution 3, the final version focused on increasing the polish of this proven functional 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. Final timed testing confirmed the system holds, and improves on the Solution 3 baseline.
.
.
Reflection
QRB has been running for two years now and I am proud to have built a comprehensive resilient system that continues to support a community that means a lot to me to ensure everyone has a fantastic user experience ;)
Looking back I am impressed by the range of impact I was able to deliver:
Technical - a working web application reduced posting time by up to 97%,
Research - data backed designs across the board including a data-driven color palette backed by competitive analysis of 75+ clubs
Branding - a representative logo and export system
UI - an icon system that simplifies communication across mediums
Product - clothing worn by real people
Graphic - event posters that bring people together
Ultimately, I am incredibly thankful to have been able to expand my understanding and my expertise while helping a community that I care about and who cares about me. This has been incredibly fulfilling.
.
