{"id":4446,"date":"2021-11-18T06:50:20","date_gmt":"2021-11-18T06:50:20","guid":{"rendered":"https:\/\/codewaveinsdev.wpengine.com\/?p=4446"},"modified":"2023-07-03T08:04:54","modified_gmt":"2023-07-03T08:04:54","slug":"design-thinking-data-visualization","status":"publish","type":"post","link":"https:\/\/codewave.com\/insights\/design-thinking-data-visualization\/","title":{"rendered":"Design thinking led Data visualization"},"content":{"rendered":"\n

An insight on how to apply design-thinking to build no-nonsense effective data visualization dashboards.<\/p>\n\n\n\n

Do you see anything on top of the wood?<\/p>\n\n\n\n

    \n
  1. OWL<\/li>\n\n\n\n
  2. Moth<\/li>\n\n\n\n
  3. It\u2019s just wood<\/li>\n<\/ol>\n\n\n\n

    <\/p>\n\n\n\n

    \"\"\/
    Do you see anything on top of the wood?<\/figcaption><\/figure>\n\n\n\n

    observe this wood image<\/p>\n\n\n\n

    Your brain just tried hard to make sense of a million pixels, trying to see a pattern that is familiar & can be recognized. <\/p>\n\n\n\n

    Does data really have to be so hard<\/em><\/strong> to understand? <\/p>\n\n\n\n

    No. <\/p>\n\n\n\n

    Design-thinking helps us present data in a way that is easy to interpret, analyze & recall.<\/p>\n\n\n\n

    In this article, we will cover how to apply design thinking to build effective data visualization dashboards.<\/p>\n\n\n\n

    #1 Data Is Everywhere!<\/strong><\/span><\/h2>\n\n\n\n

    Data data everywhere, but not a byte to think.<\/p>\n\n\n\n

    During the COVID-19 pandemic, Google searches & COVID news showed data of the increasing number of cases, severity by geography. Our lives & daily routines were largely dependent on daily news & data-heavy maps.<\/p>\n\n\n\n

    \"\"\/
    Covid-19 tracker data visualisation<\/figcaption><\/figure>\n\n\n\n

    Covid-19 data tracker<\/p>\n\n\n\n

    Below are a few apps from my iPhone, some of them I use frequently every day \u2013 that is full of data.<\/p>\n\n\n\n

    \"\"\/
    Apps with data visualisation<\/figcaption><\/figure>\n\n\n\n

    Shocking volume of data, collected every day & the cognitive load (mental overwhelm) it creates, has hit an all-time high. This demands \u2013 Simplicity, Relevance & Clarity.<\/p>\n\n\n\n

    Do you know how much data we create every minute?<\/p>\n\n\n\n

    156 million emails sent.
    4,146,600 YouTube videos watched.
    990,000 Tinder swipes done.
    154,200 Skype calls done.
    510,000 comments posted.
    Literally, zillions of user events, 3+ Quintillion bytes Generated every day, <\/em><\/p>\n\n\n\n

    Data never sleeps. <\/strong>  <\/strong><\/p>\n\n\n\n

    #2 Our Brain & Biases.<\/strong><\/span><\/h2>\n\n\n\n
    \"\"\/
    Image credit: Information overload by @victorfota<\/em><\/figcaption><\/figure>\n\n\n\n

    Spotlight bias.<\/p>\n\n\n\n

    Confirmation bias.<\/p>\n\n\n\n

    Recency bias.<\/p>\n\n\n\n

    & 250+ biases.<\/p>\n\n\n\n

    Affects our perception & choices every day.<\/p>\n\n\n\n

    \"\"\/
    Recency Bias<\/figcaption><\/figure>\n\n\n\n

    How does our brain process information?<\/strong><\/p>\n\n\n\n

      \n
    1. We tend to skip data that\u2019s hard to understand, calling it as \u201cless helpful\u201d<\/li>\n\n\n\n
    2. We tend to pick a few highlights to form a whole story <\/li>\n\n\n\n
    3. We tend to spot a risk from the first piece of data that stands out<\/li>\n\n\n\n
    4. We tend to look for recent trends, vivid in our memory<\/li>\n\n\n\n
    5. We tend to connect random events than sequential events <\/li>\n<\/ol>\n\n\n\n

      And we see what we want to see<\/strong>.<\/p>\n\n\n\n

      We find data that\u2019s hard to understand as less helpful. <\/p>\n\n\n\n

      Simplicity makes a chart appear
      more reliable & lowers the resistance to engage with it. Complication repels people.<\/p>\n\n\n\n

      \"\"\/
      Complication in data visualisation<\/figcaption><\/figure>\n\n\n\n

      Half-yearly performance review in teams \u2013 is an example of recency biases clouding judgements & decisions.<\/p>\n\n\n\n

      \"\"\/
      Employee performance review data visualisation<\/figcaption><\/figure>\n\n\n\n

      #3 Data Visualization Is Broken.<\/strong><\/span><\/h2>\n\n\n\n

      Data visualization is broken, at many levels.<\/p>\n\n\n\n

      Here\u2019s the first one: Death by detail.<\/strong>
      Now we know why \u201cDeath to pie chart\u201d became viral.<\/p>\n\n\n\n

      \"\"\/
      Death to pie chart<\/figcaption><\/figure>\n\n\n\n

      Avoid information overkill & obsessive detail. Simplify the visual, provide a link to dive into details \u2013 where relevant and useful.<\/p>\n\n\n\n

      Another one: A 3D chart which is 3D for no reason.<\/strong><\/p>\n\n\n\n

      We don\u2019t know why people use 3D graphs when numbers can be plotted on a 2D X-Y axis.<\/p>\n\n\n\n

      \"\"\/
      Low usability score 3D chart for data visualisation<\/figcaption><\/figure>\n\n\n\n

      A 3D graph makes sense when more dimensions of information are needed to be conveyed, in the same graph. This can make the graph overloaded with a depth of information. An alternative is to have multiple graphs \u2013 instead of overloading one.<\/p>\n\n\n\n

      Another one: Complicating what can be simple.<\/strong><\/p>\n\n\n\n

      Picking the right chart \u2013 the simplest one is often the hardest job to do. It\u2019s a sin to complicate, confuse & then clarify.<\/p>\n\n\n\n

      \"\"\/
      Complicating data visualisation<\/figcaption><\/figure>\n\n\n\n

      Another one: Using solid colors Vs gradients.<\/strong><\/p>\n\n\n\n

      Take a look at the chart below. We found it painful to correlate colors to what they mean. And I was intrigued about a large part of the continent being yellow, my attention was all over the place & I wasn\u2019t able to focus on an area that needed immediate attention.<\/p>\n\n\n\n

      \"\"\/
      Map using qualitative scheme<\/figcaption><\/figure>\n\n\n\n

      Now look at the same chart, with gradient colors \u2013 conveying the degree of impact\/severity, with shades of grey \u2013 light to dark. This pushes me to pay attention to the darker areas, which need to be addressed first.<\/p>\n\n\n\n

      \"\"\/
      Sequential color scheme<\/figcaption><\/figure>\n\n\n\n

      Another one: Be vigilant of tricksters.<\/strong><\/strong><\/p>\n\n\n\n

      Messing with scales & axes can trick the viewer into believing the first visual of information than actual facts.<\/p>\n\n\n\n

      \"\"\/
      Misleading data visualisation<\/figcaption><\/figure>\n\n\n\n

      Absurd visualization:<\/p>\n\n\n\n

      Portuguese presidential elections, one of many absurd visualizations by right-wing candidate Andr\u00e9 Ventura.<\/p>\n\n\n\n

      \"\"\/
      Absurd data visualisation<\/figcaption><\/figure>\n\n\n\n

      #4 Start With Why: Design Thinking<\/strong><\/span><\/h2>\n\n\n\n

      Design thinking is our favorite technique \u2013 of finding an intersection between what the user wants and what the business wants. Here are some questions we ask, before starting to build or fix data visualization apps.<\/p>\n\n\n\n

        \n
      1. Who is the end user?<\/li>\n\n\n\n
      2. What do they want to know from the data?<\/li>\n\n\n\n
      3. What does the business want to do with the data?<\/li>\n\n\n\n
      4. What is the simplest form of seeing the data people want?<\/li>\n\n\n\n
      5. What is the minimal dashboard needed for clarity on decisions & actions?<\/li>\n\n\n\n
      6. How does the user\u2019s needs & business\u2019s needs evolve over time?<\/li>\n<\/ol>\n\n\n\n
        \"\"\/
        Decode the persona<\/figcaption><\/figure>\n\n\n\n

        Knowing whom we\u2019re designing for \u2013 helps us ask personality-revealing questions, that give insights on the user\u2019s motivations & resistances.<\/p>\n\n\n\n

        To summarize: <\/p>\n\n\n\n

        Here are 5 steps for applying design-thinking to keep things simple & clear, for the end-user:<\/p>\n\n\n\n

          \n
        1. Know who the user is, behind what meets the eyes<\/li>\n\n\n\n
        2. Understand user\u2019s intent & what he\/she feels accountable for<\/li>\n\n\n\n
        3. Understand what will their business stand to lose, if they don\u2019t simplify data visualization for this user.<\/li>\n\n\n\n
        4. Create a quick prototype of a Dashboard & Data visualizations. Observe how users react when they first see it. Observe what they\u2019re able to understand quickly.<\/li>\n\n\n\n
        5. Iteratively evolve & simplify the data visualization app, to adapt to changing needs of people & businesses<\/li>\n<\/ol>\n\n\n\n
          \"\"\/
          User persona, User journey & Business impact<\/figcaption><\/figure>\n\n\n\n

          User persona, user journey, and business impact<\/p>\n\n\n\n

          <\/p>\n\n\n\n

          \"\"\/
          WWWH framework in the design thinking process<\/figcaption><\/figure>\n\n\n\n

          #5 Aging World, Weakening Senses & Multi-sensorial Design.<\/strong><\/span><\/h2>\n\n\n\n

          The world is aging fast, we\u2019re going to have a much larger population above 35 years by 2050. It\u2019s becoming increasingly important that the technologies we build today stay usable even after 30 years from now, with faster aging bodies (especially sense organs).<\/p>\n\n\n\n

          \"\"
          Aging customers<\/figcaption><\/figure>\n\n\n\n

          A holistic approach to defining user persona<\/p>\n\n\n\n

          Should the web app, Dave uses be full of colored graphs & charts? Or can we exploit sound\/audio to deliver information?<\/p>\n\n\n\n

          Here\u2019s how a data sorting sounds: https:\/\/www.youtube.com\/watch?v=kPRA0W1kECg<\/a><\/p>\n\n\n\n

          Multi-sensorial design approach \u2013 pushes us to explore other ways of delivering data apart from the visual design. For example, we could convey the severity of an incident, by the sound of a siren, until users get alerted & take action.<\/p>\n\n\n\n

          #6 Data \u2013 The Source Of Truth & Ethics.<\/strong><\/span><\/h2>\n\n\n\n

          Ensure \u2013 Radical Truth, Radical Transparency, Radical Responsibility.<\/p>\n\n\n\n

          If you\u2019re building data visualization tools & applications, to support decision making \u2013 ensure your systems are robust, secure, compliant & reliable, your data infrastructure protects the privacy of people, your storage systems are secure & safe, and your team is taking accountability to hold a single source of truth, maintain transparency & take responsibility for the consequences.<\/p>\n\n\n\n

          \"\"\/
          Data project’s compliance on a high level<\/figcaption><\/figure>\n\n\n\n

          Data visualization value system & principles to abide by<\/p>\n\n\n\n

          Takeaways<\/h2>\n\n\n\n