The Truthful Art: An Introduction to Infographics and Data Visualization

For the Spring 2019 semester, I’m taking an Introduction to Infographics and Data Visualization course with Professor Alberto Cairo. Requirements for the course include readings from his books, The Truthful Art and The Functional Art. I’ll be writing about what I read and documenting my journey as beginner in visualization.

Based on just the introduction, The Truthful Art is a Bible for learning.

These first few chapters made me think much about my life, why I’m back in school, where we are as a society, how we communicate and relate to each other, my responsibilities as a designer, and more. I hope to write more about these later. What I can say is this: This book is a call to action. For you. For me. For Us.

Five Qualities that Make a Great Data Visualization

  • Truthful
  • Functional
  • Beautiful
  • Insightful
  • Enlightening

I appreciated how Professor Cairo walks you through each of these five factors with examples. (I learn so much better when there are examples to help illustrate what is presented with words.) I won’t repeat his explanations because I think getting your own copy is a great investment. But I will share with you two visualizations I think encapsulate much of what I read and learned in chapters 1 and 2.

The Washington Post: Two Visualizations About the U.S. – Mexico Border

Helping people tell bullshit from facts should certainly be a duty for all journalists and information designers.

Alberto Cairo, Introduction, “The Truthful Art”, p. 17.

First, I want to establish that I believe The Washington Post to be a credible source of information; that the people who work there and deliver this information strive to be truthful (without deception) and present it in a way that is functional (easy to interpret).

Below are two graphics I’ve stumbled upon from The Washington Post that reveal interesting information about our shared border with Mexico. I think both would help anyone be informed citizens as the Shutdown continues and the lives of so many people are impacted by The Border Wall debate.

The first visualization is a static visualization of a map that shows the type of fence that exists — pedestrian or vehicle — and the number of apprehensions made for the fiscal year 2017. This is part of a story that gives a history of border arrests from 1970 to 2018.

Screenshot from The Washington Post, “The history of U.S.
border apprehensions

I think what I find most appealing about this visualization is that it is clear. It is quick to understand. The use of a “heat map” type of presentation (encoding?) is both intriguing and helpful. I can see that border apprehensions occur heavily in Southern California, Texas (along the Rio Grande), Arizona and a small portion of New Mexico.

The use of color and typography also makes it easy on the eyes. It is functional because it provides information that is clear, plain, and without “bells and whistles”. Every choice is deliberate. In other words, it is beautiful. The only question I have is whether this visualization has enough contrast for those with visual impairments.

Combined with the visualization below, you get better insight. The heat map tells us where border arrests are more common and this visualization presents the numbers as well as the history. In addition, you are provided additional information as to why there are more families attempting to cross the border.

Screenshot from The Washington Post, “The history of U.S.
border apprehensions

Our President told us that there is “a growing humanitarian and security crisis” along our Southern border, yet by looking at the numbers, and from reading the story, there doesn’t seem to be a “crisis”. In fact, it seems that the conditions created by recent changes in immigration policy and directives have caused the so-called crisis rather than mitigating them.

The second visualization is interactive and feels like a Sunday magazine long-form essay. This is a visualization meant to be experienced slowly perhaps with a good cup of coffee. It doesn’t fit the definition of a “news application” in that there aren’t cool sliders or ways input your own data, it gives you a lot of context through text and photography as you literally journey along the border.

Screenshot from The Washington Post, “Borderline

I learned a great deal about the geography of our border with Mexico, about the people who call it home, how adding more “walls” could impact natural wildlife areas and national parks, some fascinating history about the land before borders and much, much more.

Professor Cairo writes about how important it is to choose topics that are enlightening; meaning, first, choose topics that matter. Visualizations are a way to give insight and could have high impact. Choose topics that can help reveal the day-to-day experiences of people. I agree. While visualizations about pop stars, personality traits and movie characters are fun, I’ve always been a person who wants to do good. This was the reason why I went back to school the first time. Since my mid-twenties, I have felt compelled to do good work and to do work that has impact; that is meaningful. I feel as designers, it is our responsibility to contribute to solving the wicked problems in our communities.

Questions are Key

The Truthful Art is entertaining and fascinating, written with keen insight about people, information, and society. What I love most is that this book doesn’t provide clear cut answers. It forces you to ask questions and acknowledge the complexity of humanity as well as the pitfalls of being human. It encourages you to step back, investigate, explore and in essence be an informed and responsible citizen.

I am reminded time again to ask questions. Recently, I read an article about critiques. Critiques that encourage dialog by asking questions are better learning experiences compared to ones where people simply state their opinions (I like, I think, etc.).

I don’t have a fully-fleshed out thought about questions and their importance, but I do know questions sometimes create ambiguity and that can sometimes be anxiety-inducing. Questions are also great for getting to know people and increasing your knowledge. I also think it is a great way to check your self, your intentions, and reflect on your experiences.

Charlie: Final Presentations and Reflections

Monday was our final presentation for our chatbot, “Charlie” for our Designing Innovation class.

For Qinyu and I, getting to this place was not easy but it sure was a lot of fun with loads of lessons learned along the way, but before I dive into those lessons, below is our final presentation to our class, our professor, Lien Tran and our guest, Rebekah Monson.

You can also view our prototype of Charlie.“There are some quirks, as it is only our second iteration but we think it gives a good sense of “Role and Look and Feel”, two types of prototypes and the relationship between them. [1] Implementation, a third type of prototype would be the next big leap; something I would love to make happen. (Note: as serious as this post was intended, I could not help but think of Captain Picard in Star Trek, “Make it so)

Lessons Learned

Lessons learned is something I have lodged in my brain since teaching my own students at Newhouse. For nearly every project submission, I asked them to submit 3-5 lessons learned to get to know them at first; to understand what they need to learn, and to understand their thinking.

Now that I am a student (again), below are mine and I hope to write more and in more detail about these in the near future since during this project, I not only got a hairline fracture in my dominant hand but also severe tendonitis from repetitive trackpad use!

Anyway, here is one of the big takeaways so far. I’ll write more later as I’m eager to share in case others may find my experience helpful.

Conversation is the User Experience

I can no longer recall what my expectations (assumptions may be a more appropriate word) were when I came up with “Charlie” but I read a lot online about designing chatbots and while I was drawing out (ok, attempting to draw) out storyboards, it dawned on me that my time would better be used writing.

This article, Therapy via conversational design by Kathleen Varghese and the documentation for Google Assistant, IBM Watson and various other sources (Thank you everyone who publishes on Medium) were critical to my learning since I was not enrolled in any course about chatbots or artificial intelligence. (Note: Dr. Ching-Hua Chuan, PhD., is our expert on campus and I did speak with her a few times and need to more.)

Given the minimal UI of a chatbot, the conversational flow between bot and user is mission critical. That seemed like a no-brainer when it hit me but up until that moment, I was still thinking visually.

So for anyone new to chatbot design, focus on the words and tone to give your bot the appropriate personality for your target audience.

Book about designing chatbots
Amir Shevat’s, Designing Bots: Creating Conversational Experiences, a must-read book for anyone interested in designing bots.


References

[1] Houde, S., & Hill, C. (1997). What do prototypes prototype?. In Handbook of Human-Computer Interaction (Second Edition)(pp. 367-381).

Chatbot: “Charlie”

After a conversation with Professor Tran and several conversations with my team partner, Qinyu, I decided to pursue my chatbot concept in full force.

Well, almost. I’m currently poking at the keys because I suddenly developed severe pain in the lower part of my thumb which makes typing and micro movements excruciatingly painful. This, after dealing with a hairline fracture … I mean, seriously??? The timing could not be worse. Anyway, I’m plugging along as much as I’m able. 

I’m excited and nervous. There’s a lot to still learn and doing this on my own for a specific timeframe feels daunting. But, my excitement at the moment makes it seem doable. I have to present in less than two weeks. So much for Thanksgiving break. Eep.

So, what do I do when I know there are many tasks in a project? Make a list! Here’s my list of actions for Project Charlie (in no specific order):

  • Do more research.
    • Read more articles and gather more information about Alzheimer’s
  • Define an audience.
    • Is this for all caregivers or ?
  • What is the primary function?
    • Therapy? Coaching? Both?
  • Define a personality or persona for Charlie.
    • Character based or ?
    • What kind of language will he use?
  • Come up with a different name for the app. (Maybe)
  • Define scenarios
    • Where will Charlie be used? How will users feel? (Maybe more of a journey map?)
  • Storyboards
    • Drawing may be a problem
  • Create a user flow
  • Identify features 
    • What will users really need? Try to avoid doing too much
  • Create several conversation scripts. (This is going to be the most important step)
    • Learn how to create them.
    • Understand the jargon more
  • Content types. What types of content will appear in the chat?
    • Gifs? Emojis? Video?
  • Determine a mockup or prototyping platform/tool. 
    • How to make it feel as real as possible without an active database? (I don’t even know if that is the right term)
  • Define the look and feel.
    • Moodboard
  • Build the prototype.
  • Test the prototype.
    • Contact the people I interviewed

Lots to do! Hasta pasta.

Crossroads: This Idea or That Idea?

What do you do when you started down one path and all of a sudden another reveals itself? 

Just before Thanksgiving break, I found myself researching two ideas. I knew this wasn’t efficient but I felt compelled to explore the second idea more after the interviews I had conducted. Five interviews later I found that perhaps the initial idea Qinyu and I came up with wasn’t the best path.

This is the beauty of interviews.  They can enlighten you, challenge your initial ideas and lead you down a different path. Some may think this creates more work but I think it saves you time and money down the road.

What is the second idea? A chatbot I’ve nicknamed, “Charlie”.

Charlie isn’t really new. At least, not for me. He was one of the first ideas I had after the first interview but somehow during our initial concept meetings, Charlie was passed over for our smart entertainment system idea. So, Charlie sat on the sketch shelf for months, until now.

I hope to write more about Charlie and I’ve fractured my index finger so typing is incredibly slow and not easy. (I’ve developed tremendous amounts of empathy for people who lose digits or have arthritis … )

More soon …

Designing Innovation: Teamwork, Prototypes and Feedback

Creating the Education Kitchen kit Prototype

This is when our team really shined. Laura, Mackenize, Maria and I went full-on to design a prototype for our presentation last week. Laura especially took ownership designing the look and feel of Education Kitchen. I helped to guide and tweak a few things with the type and colors but Laura really deserves praise for the visual design. Our Slack group chat blew up for hours and it was a great feeling.

The evolution of the Education Kitchen logo. Once Laura established a direction, I offered some suggestions to tweak the type choices and relationships between the script and sans serif. The last row became our final choice.

I think in terms of strengths, we complemented each other well and I appreciated how when it came to meeting deadlines and time to discuss direction, we showed up and we followed through. Forming these types of relationships is one of the great things about graduate study and immersive experiences; one I believe can be harder with online educational experiences.

Team “Food Fresh 4”: Laura Miller, Me, Maria Aguilar Valez, and Mackenzie Miller

Mackenzie also went to town on building a more detailed scenario for our presentation. I love the combined imagery/collage type effect. She has a knack for building and making. 

For this phase, I suppose Maria and I took on supportive roles; making sure that our presentation had all the right elements; filling in where we were needed in terms of gathering , organizing and structuring content, checking spelling. plus making sure there was consistency in the language, content, design, presentation, among various other tasks.

All in all, we were at team in every sense of the word.

Effective functional and cross-functional teams do more than “divide and conquer” when confronting the never-ending queue; they harness that sparky, sometimes chaotic, energies of their members in a collaborative effort that we’ll call “thought partnership”. 

You can think of a thought partner as an intellectual complement—a collaborator who shares your goals but comes at problems from a different angle, with a different set of skills.

“Creative Teamwork”, p. 146, Chapter 6,, About Face)

Maria, Mackenzie and Laura were my “thought partners” in every sense of the word. I feel fortunate and hope we’ll work together on many more projects in the future. I will add that anyone who hires them in the future will reap rewards.

Kit Mockups and AR Prototype

Here is Education Kitchen and a few examples of items that would be included in the kit.

Education Kitchen Packaging Prototype

Initial Feedback

Overall, Education Kitchen was well-received. Ideally we would have been able to connect with at least one of our stakeholders to present and offer them a chance to give us feedback directly as well as use the AR app prototype. In the near future, we hope to accomplish this after implementing additional feedback we received.  

In addition to the previous suggestion to try BlippAR to create a working app, a suggestion to add illustrations to the recipe pages so that kids can also color those pages was offered. Perhaps while an adult in the house cooks, the kid can color. We received some nice compliments on the presentation and visual direction. Additional feedback included discussion about community gardens and how in underserved populations, land is at a premium with many most likely living in apartment complexes. This would shift the community garden to the schools but even then, land might not be available. Roger Horne spoke about this aspect and why he doesn’t see “community gardens” as a solution. Community gardens are not part of our solution but Clay’s point is a good one. Perhaps we need to include something about gardening in containers or hydroponics? A growing solution that doesn’t require land.

There were also suggestions about having a dinner party where the food from the kids’ community garden would be served … This is an idea we had as well but for development, raising funds to support non-profits or even schools; a way to bring the families, farmers, educators and officials together. 

More and more, this leads me to think our pitch or messaging needs to be more clear that we are not advocating for a community garden or that kids encourage their families to start a garden. Perhaps the inclusion of seeds automatically suggests this. I think of the seeds as more of a science experiment opportunity. 

On the tech side (AR), Clay spoke about “unlockable items” which triggered a memory that Lien also spoke about unlocking experiences. Perhaps we didn’t speak clearly enough about how the technology is a bonus layer. So, IF schools have access to wifi and a device that could support AR apps, then the students benefit from this feature. Still, he did encourage us to think about how the AR aspects could be more than nutrition information; something really special and I think this is where he was saying it could tie into a website layer as well; an opportunity to educate at a global scale from a local level. His ideas for a journal or “pen pal” concept was interesting and one to seriously consider moving forward.

Good feedback and more things to think about and re-process if we decide to move even further with this draft of a solution for the next iteration!

A small update to one of the recipe pages with an illustration to match the recipe.
Stylistically, this isn’t a match but it was a good suggestion and we’ll need to address this in future iterations.

Moving Forward

I would be keen on developing this concept further and some aspects I’d like to address in a future iteration include:

  • Understanding what visuals—color, typography, illustration style—and even paper feel would appeal to our target audience. While I love the current look and feel, it may not resonate with our core audience. I’ve made a mental note to remember that as designers we come with our own ideas and personal tastes that may not always align with others. More research definitely needs to be done.
  • Present our working prototype to Urban Greenworks and Urban Oasis to get their impressions.
  • Create a more detailed “map” of how a more personalized regional approach would work and what types of items would be included (e.g. Maine vs. Texas).
  • Think in more detail about postures for mobile devices. The prototype we created was for an iPhone. How different would the experience be on a tablet and on different operating systems? How would the experiences differ in the classroom versus outside the classroom? For example, if we created a prototype for a farmer who invites kids to the farm, how would the AR experience—assuming she/he has the tech resources—be different? 
  • Explore the idea of a website where people could archive into a journal or create postcards to send to other Education Kitchen explorers.
  • Understand AR technology more and further develop the narrative of its use and inclusion in the kit. This is where “understanding technology” (Don Norman) is truly critical. 

Adding more digital experiences would definitely require us to think more about addressing beginner users and experts plus get a better understanding of possible friction points. In fact, writing about this experience leads me to think we definitely would need to explore the AR app more closely from a user’s point-of-view. I don’t think we did enough analysis and testing.

Ah, lessons learned … I think it’ll take a while longer to process everything. I’m sure in the next few days and weeks, I’ll realize more we could do to refine and improve our first iteration. As a person who isn’t used to slamming through my work, I’m adjusting. Still, the lessons and takeaways will definitely be applied in future projects for this class as well as others.

Timeline for prototype build and presentation: Less than a week.


This is Part 9 in a series documenting my learning experiences developing a solution to address food deserts, food security, health literacy, and health for populations. This project is part of our Designing Innovation course with Professor Lien Tran at the University of Miami, School of Communication. I am an IMFA (Interactive Media Master of Fine Arts) candidate.