Data Driven Design, Creative Coding, Thesis
In my graduate thesis, Performance by Design, I explored the opportunities for data visualization to create data-informed visual systems.
As an athlete, I am referencing performance data to illustrate the potential for the practice of body-centric design, using body mechanics and data to influence design principles.
I explored my thesis in a series of experiments:
01. Data Visualization
02. Movement tracking photography
03. Body-generated Grid
These elements form a branded system for a hypothetical running event with no set distance or time. Data only gains meaning through the body, and every body performs differently. Similarly, the system is designed to respond uniquely to each athlete and honor the spirit of movement.
01. Data Visualization Experimentation
My first creative exploration centered on finding new, unexpected ways to engage with my personal performance data. As an avid runner, I began documenting my runs by hand each day; designing unique visual systems with their own set of rules. These hand-coded frameworks generated imagery from running metrics.
Some visuals represent a single data point or run, while others combine multiple layers of information. The goal wasn’t analysis, but expression. Ways to transform motion into form, and data into something intuitively felt rather than clinically measured.
Insights:
In this specific experiment, I ran one of my favorite trails which is an out-and-back run meaning, I ran the same route in reverse on the way back.
One interesting thing that I noticed as I was mapping out the data points is how my data naturally mirrored itself in reverse. The trail was uphill on the way there and downhill on the way back and without knowing this about the trail, the data generated by my body demonstrates this.
Data Insights:
Cadence - is determined by the number of steps per minute higher cadence typically indicates faster running.
Training stress - is a data point that uses heart rate and performance history to explain how taxing an activity is on your body. Higher TS indicates a tougher effort.
02. Movement Tracking Photography
Using glow sticks and a tripod, I tracked physical movement to uncover patterns and textures. What I extracted from this became the beginnings of a visual language.
Insights:
I became fascinated by how, even in controlled environments, the body produces unpredictable outcomes. Our joints follow semi-predictable pathways with random variation. I drew a similar conclusion when mapping my running data in my running data-visualization experimentations.
I began to understand this as a form of human generative design: no two motions are the same, just as no two performances are. On race day, the body’s output is shaped by training, health, conditions, and mindset—a complex equation that resists full control.
03. Body-Generated Grids
I wanted to explore how grids, often seen as rigid structures in graphic design, can instead activate and energize a layout. I created a series of grids generated by a runner’s form and used them as the foundation for all of my thesis materials including all 200+ pages of my thesis book.
Insights:
Even within their complexity, these grids created a clear hierarchy and supported compositions that remained both readable and dynamic. I also introduced visual pacing across each spread. This guides the reader’s attention through the body text by scaling and weighting key points within the text. Important moments were bolded and enlarged, while supporting content appeared more condensed, creating rhythm and flow within the layout.
Run Visualization Interface
Using p5.js, I coded an interface to document running data through visual expression. Leveraging easily accessible metrics from smart devices such as heart rate and mileage, I developed a system that generates semi-predictable compositions with built-in randomness.
Each output is directly informed by my data visualization experiments, with the goal of maintaining visual appeal regardless of the data combination. The system does not favor longer runs or faster paces; instead, it values diversity in performance.
IdeationStage 1Stage 2Stage 3
Body-reactive Medal
A thermal-reactive material at the neckband causes the medal to change color as it's worn.
Similarly, the transparent components shift in appearance depending on lighting, skin tone, and angle to ensure no two medals ever feel the same.
Adaptive Race Bib
The race bib was designed using body-centric principles to reflect the athlete both visually and functionally.
The typography is arranged on a grid informed by the runner’s body, with each corral featuring a unique layout inspired by different phases of a sprint.
A semi-transparent background allows the bib to integrate with the runner’s appearance without obscuring key details. Its form follows the natural curvature of the body in motion, offering a better fit and minimizing disruption during the race.
Generative Design Tools
Throughout my thesis, I developed several design tools that turn data into visual artwork. Explore and create with them below.
Thesis Digest
For the earliest phase of my thesis, I designed a newspaper to introduce my topic, subject explorations, key findings, and personal connection to it. This is the first development of my visual language and breaking down my thesis into a story that creates interest.
Thesis Digest PDF
Previous Project: Lace-Up Desk SetHome
Contact
hello@gabbyescobar.com
+1 408 677-8339
Currently in Pasadena, CA
Résumé
Education
2025, MFA
Graphic Design at
ArtCenter College
of Design
2023, BA
Speculative Design
at UC
San DiegoSoftware
Illustrator
InDesign
Photoshop
Lightroom
Rhino
Keyshot
SolidWorks