![](http://pilargomezruiz.com/wp-content/uploads/2018/04/MOCKUP-ONDA-2-1024x768.jpg)
Onda: Data Portraits for Period Health
January-May 2018
Onda is a body-literacy toolkit that allows menstruating teenagers to chart and discover the patterns of their cycles by combining tactile and digital components.
Product
Menstrual calendar kit
Audience
Menstruating teenagers
NYU-ITP course
Thesis
CHALLENGE
Design a toolkit to help teenagers discover and appreciate both the beauty of their menstrual cycles and the importance of understanding them; to address period stigma by framing menstrual cycles as mirrors of a fascinating interior reality
Role
Research and User Interviews, Conceptualization and Design, Programming (Javascript in P5.js and Java in Processing), Prototyping & Illustration
THESIS PRESENTATION
Presented on May 11th, 2018
Tools
Fabrication:
Wood, hemp cord, slider chord locks, parachord, tassels.
Computer Vision:
Programmed prototypes in P5.js and Processing
Graphics:
Handrawn, Illustrator
![onda-logo](http://pilargomezruiz.com/wp-content/uploads/2018/04/logo.png)
HOW IT WORKS
The working prototype documented here has two main parts: a physical interface and a digital interface.
The tangible interface is a counter that resembles an abacus. Its sliding red beads allow the recording of users’ daily basal body temperature (BBT) within a range of 97–99 degrees Fahrenheit, including decimal points (More on why I chose this indicator in the “Further Reading” section).
A mobile companion app will enable users to scan the counter and parse these images via a computer vision algorithm which detects each red bead (representing a temperature reading in a given cycle day) and saves it as a data point within the current cycle.
The app also generates an alternative circular data visualization of a cycle day by day. Users may also input other period-related phenomena (mood swings etc.,) that may reveal unique patterns. Finally, the app creates an archive—a data diary—of users’ information to track privately or share.
![kit.001 kit.001](http://pilargomezruiz.com/wp-content/uploads/2018/04/kit.001-1.jpeg)
Special thanks to
The girls that charted their temps for a month and the ones I interviewed; Nancy Hechinger (thesis advisor) and Davíd Lockard and Michelle Hessel (reearch residents);Peter Longofono and sejo-vega cebrián,
USER JOURNEY
![The user’s alarm rings.](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-01.png)
![Using a digital thermometer...](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-02.png)
![She takes her basal body temperature putting the thermometer under her mouth](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-03.png)
![This takes about a minute...](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-04.png)
![Then the user records her temperatures](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-05.png)
![on the Onda Wall Calendar.](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-06.png)
![When pointing at camera phone, data points are read by an app.](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-07.png)
![Initial data transforms (is animated) into a creature like form that reflect data as a cycle.](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-08.png)
![On the screen the user sees her current cycle day and has options-to add moods and start-a new cycle at any time](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-09.png)
![The user can shuffle between little creature and chart views](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-10.png)
![When user gets her-next period she presses the ‘restart’ button on app and removes the pieces from the abacus to start again.](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-11.png)
![And the user may browse through her cycle archive at any time](http://pilargomezruiz.com/wp-content/uploads/2018/04/storyboard-by-frame-12.png)
CYCLE DATA PORTRAITS
I explored different visualizations using my own temperature readings–taken from Dec. 29–Apr. 27. In mature cycles with an ovulatory interlude, there is a consistent number of low temperatures before ovulation preceded by a consisten number of high temperatures after ovulation.
![Cycles charted linearly on the Onda Wall Calendar](http://pilargomezruiz.com/wp-content/uploads/2018/04/data-potraits-pilar.001.jpeg)
![Another linear visualization, red marks the first day of heavy bleeding, blue the low temps stage (also called follicular stage), orange the high-temps stage (also called the luteal fase. Vertical lines indicate days of missed readings](http://pilargomezruiz.com/wp-content/uploads/2018/04/data-potraits-pilar.002.jpeg)
![The cycles plotted in a polar graph, to emphasize their cyclical nature](http://pilargomezruiz.com/wp-content/uploads/2018/04/data-potraits-pilar.003.jpeg)
![Some stats of the four cycles](http://pilargomezruiz.com/wp-content/uploads/2018/04/data-potraits-pilar.004.jpeg)
DETAILS OF PHYSICAL INTERFACE
![sliding-2](http://pilargomezruiz.com/wp-content/uploads/2018/04/sliding-2.gif)
![TAKING-OFF-detail](http://pilargomezruiz.com/wp-content/uploads/2018/04/TAKING-OFF-detail.gif)
![TAKING-OFF](http://pilargomezruiz.com/wp-content/uploads/2018/04/TAKING-OFF.gif)
![](http://pilargomezruiz.com/wp-content/uploads/2018/04/IMG_1863-1024x768.jpg)
SNAPSHOTS OF DIGITAL PROOF OF CONCEPT
![Code Snippet](http://pilargomezruiz.com/wp-content/uploads/2018/04/code-video.gif)
![Viewing P5.js sketch on a desktop browser](http://pilargomezruiz.com/wp-content/uploads/2018/04/console-log.gif)
WANT TO SEE MORE OF MY WORK?
Return to the Case Studies Dashboard (my Homepage) by clicking on the button