P4 Process Book (Personal data dashboard)
After months of diverse and exciting projects, it was time to take on a culmination of all our past work. P4 was a way for us to practice visualizing data of our choosing while incorporating all of our learnings from P1-P3. What was neat about this project was that we had technically started it way back in March, but none of us really knew how it would all unfold a month of data later. Here’s a rundown of how my process for the project went!
Data collection
When we were told to collect weather data along with two other variables each day for the entire month of March, my mind immediately went to “Mood.” Having grown up in California, coming to Pittsburgh was a total culture (weather?) shock, and I remember feeling dreary and miserable during the first few snowy months I experienced here. Thus, I was definitely curious to see what kinds of interactions weather and mood could have if I actually tracked them together for a month. So, for Weather, I tracked high and low temperature and any weather events that occurred each day (e.g. rainy, sunny, cloud). For my third variable, I originally considered a couple options that I thought might be interesting—namely sleep hours, but I realized my wildly irregular sleep schedule might not lead to very useful data—before deciding on “Productivity.” I wanted to know how the weather, my mood, and my productivity levels interact, because these are three things that come into play every single day. During COVID times especially, I often find myself wondering if a better mood makes me more productive or vice versa, so these were definitely variables of interest.
To add some additional color, I also jotted down some notes on special things I did each day. While I didn’t know at the time how I could utilize them, I did wonder if I could make notations of special occasions/outliers in my visualization later on. With all my data down, it was time to start practicing some basic visualization sketches!
Visualization sketches Part I: Physicalizing!
To kick of the data visualization portion of the project, we gathered on campus with the rest of the class to play around with various materials and tools—many of them callbacks to our childhoods, like beads, pipe cleaners, and legos—in order to explore the physical nature of data. We broke into small groups, and along with Nick and Carolyn, I had the opportunity to try and portray my understanding of a “day” in an abstract and creative manner. After playing around with materials for a while, we decided to work with pipe cleaners and various types of beads.
We chose to portray a day in a circular manner; each day is broken down into segments (somewhat like a pie chart) that represent roughly what proportions of the day are spent on which tasks. To do so, we compiled a mixture of each of our daily routines. We all had common tasks like washing up and attending classes, but we added some individual flairs too (e.g. Nick and exercising). Then, we used different colored beads to indicate different daily activities. We spaced the beads according to how intensive they were (e.g. tighter beads for classes indicate that they’re more stressful/strenuous). In hindsight, this was our first taste of demonstrating interactions between variables!
Visualization Sketches Part 2: Putting Pen to Paper
After engaging in this fun and thought-provoking physicalization exercise, I headed home with renewed vigor. Over the weekend, it was time to start exploring some other visualizations at different levels of scale: days, weeks, and months. Using pen and paper, a medium I’d always been a little more comfortable with than physical objects, I set to work trying to create as diverse of a set of sketches as I could. Vicki had preached the importance of breadth, so I wanted to try a ton of ideas to see what sticked.
For my daily sketches, I explored the idea of pictograms and illustrations. While these ones were certainly cute and charming, they were a little too intricate to utilize at these detail levels. However, I really liked the concept of pictograms, so they were something that wound up coming into to play later on. Then, I explored the idea of colored bar graphs and proportional representations of activities. These were similar to the physical representations I had explored earlier, but I wanted to try drawing them out in a different format. The line graph was a vertical way of demonstrating it, the radial format was another way of comparing them, and the radar charts were yet another take on visual comparison. While none of these wound up being a part of my final iterations, they proved useful in helping me figure out how to compare data points.
For my monthly explorations, I started playing around with the ideas of circles. While at the time I was mainly playing with a concept similar to the Apple Watch’s exercise rings, I started to get a little more intrigued by the idea of changing the size of the circles to represent different measures. I had a small sketch depicting this idea on my initial page of illustrations, and when discussing with Vicki, we decided to take this idea further, but representing a different measure instead: productivity (more to come on that in a bit!).
Taking pen sketches a step further
For my next pen sketch iterations, I decided to start using some of the actual data I had collected over the past month. Something that really helped me begin considering these variables more was the Dear Data assignment. For the span of a week in April, I tracked the exact same variables I had monitored throughout March. When I began playing around with my numbers and previous sketches, I decided to carry over the pictographic elements, the bars, and some additional annotations in the form of “special events.” One thing I was curious about testing was the influence of special events on my other variables, and since Spring Carnival was smack dab in the middle of this week of data, I definitely had some special events to work with.
Upon receiving feedback on my postcard, I realized a few things. I had sought to represent my Mood, Productivity, and Weather using bars that could be compared with one another, but the colors I had chosen were too dark and hard to differentiate. It was something I felt I could adjust digitally, but I didn’t do a great job depicting that through pen. In addition, I noticed that my scales were simply too dense. They didn’t all need to be on 10-point scales just because I had originally written them down that way; instead, I needed to take the time and re-explore how to visualize more nebulous variables like mood and productivity. I also determined I could cut out the bars for weather if they were already shown in a pictorial way (at the bottom).
For my next sketch iterations, I tried taking my mood and productivity scales in two different directions. For the left version, I decided to make weather a little more prominent, and each panel was meant to reflect something similar to how the iPhone weather app shows various weather states. Inside the days with special events, small pictograms show what made those days unique. At the bottom, two uniquely colored sets of dots showcase the differences in mood and productivity. The dots were meant to be more legible and discrete than the continuous bar graphs from earlier.
On the right side, I began exploring ways to merge the pictographic elements with the mood and productivity measures instead of treating them separately. To call back to the previous monthly view I sketched out with the various circle sizes, I decided to start representing higher levels of productivity with larger circles. For mood, I started thinking about ways to pare down the mood scale significantly with the use of symbolic lines. Funnily enough, when I began playing around with the lines on the circles, my mind immediately went to “abstract faces.” After testing out a few more lines, I came up with a “face” scale to represent mood pictorially. With that all in mind, I made one more hand-drawn iteration of my monthly view.
This was by far my favorite iteration, and while there were certain things I felt I couldn’t quite capture with my colored pens (e.g. coloring the circles in all the way without covering the faces, I was really happy with the direction it was moving in. I particularly liked the decision to use colors to represent temperature ranges; since so many of the daily faces were positive ones, I enjoyed all the pops of color on the dashboard. The group crit for this iteration was very insightful, and it helped me realize that while the lines/faces were definitely more fun and a livelier way of representing mood, the scale I had was still way too large. It was almost impossible to distinguish the difference between a 7 and 8 smile. So, with the objectives of simplifying mood and finding a way to incorporate special events/outliers more (I got the question “Why is the 19th so unproductive yet happy?” during the crit), I moved on to digitizing.
Digital Iterations
When digitizing, my first priority was finding a way to make my colors less contrasting with the faces. To do so, I made my colors more pastel-y and slightly less opaque, and I played around with the hues so that the color scale was easy to distinguish and none of the colors were too jarring or different.
I also completely simplified the mood scale so that there were only 4 faces that needed to be represented; to do this, I mapped 1–3 to the frown, 4–6 to the neutral, 7–8 to the smile, and 9–10 to the big grin. I also changed the color a bit so that they were a more purple-ish/grey neutral tone, which I felt was less glaring against the pastel colors, especially the yellow hues. For my key, I also tried to represent productivity level with a series of overlapping circles.
When I chatted with Tai over the weekend to get some more feedback, he (very accurately) pointed out that it was a bit confusing why productivity level was highlighted in green. To him, it appeared as though only the days that were 50–59F had their productivity reflected by the key. So, for my next iteration, I made the color of the productivity key a similar purple to the mood scale. In addition, I utilized pale purple vignettes to call out special days or outlier events that were notable while also adding small numbers to call out each day’s date. For instance, I explained the lack of productivity on the 19th by calling out Midsemester Break (which also explains why I was so happy that day!). Finally, I included my editorial assertion at the bottom of my dashboard to provide some more context for the visualization.
There were some definite strengths in the changes I made, but there were still some areas for improvement. Vicki actually was confused by my productivity scale at first because I had unintentionally made it appear as though the opacity/intensity of the color contributed to the representation of productivity. Further, I realized that I had failed to include the question I was trying to address in my dashboard alongside the editorial assertion, so that was something I also needed to add in. So, in advance of the final crit, I spent a few more hours diving deeper into the nitty gritty layout elements of my dashboard.
I started by changing my productivity scale to more closely mirror my mood scale. I tangentially aligned three circles with increasing size to demonstrate the fact that larger circles meant more productivity. In addition, I reshuffled the spacing and key so that my title question and editorial assertion were on top of the dashboard and were the first things to be seen. I also made the background a pale baby yellow color to further enhance the complementary scheme between the purples and yellows, and because of this, I also began playing around with a way to make the title stand out a little more using color. I started with a flat rectangular border to separate the title from the visual, but I didn’t like how contrasting the sharp line felt in comparison to all of the circles. After consulting with an extra set of eyes, I began exploring the concept of a wave-like separation line. Amusingly enough, it took me 45 minutes of fiddling around to come up with a wave shape that I felt worked visually.
I also did a bunch of shifting up and down to explore the spacing with the text and the first circle. I originally didn’t have the purple wave near the circles, but that made the text feel squeezed. In addition, it led to a claustrophobic feeling between the edge of the purple wave and the small “1” number, and since the rest of my dashboard was so calming visually, I wanted to avoid that. So, after much deliberation, I decided to move the wave down further and have it slightly overlap the first teal circle. That way, there would be more spacing for the text to breathe, but it would also achieve the feeling of leading the viewer into the rest of the visualization.
Final Dashboard
And with all that done, here was my final version of the dashboard! I was thrilled with all the progress that had taken place since my first sketch, and I was really grateful when my work was received well during the final crit.
It’s hard for me to believe that the semester flew by so fast, but I’m thrilled to have been able to take this course during my last semester at CMU. I’ve really enjoyed the projects and the diversity of the work we did, and ultimately, I’m proud of all I’ve learned and how far my work has come since the first day. But most of all, I appreciated all the awesome people I got to meet in this class. Some of my favorite memories were getting to go outside and use chalk to explore poster designs on the ground with my group, and I always enjoyed getting to work with my peers during crits and individual meetings. A big thanks to all of them for making the class environment so warm and friendly, and a huge thank you to Vicki and Sophia for working so hard to make this class a great one. I’m going to miss it!