In this post, I am going to walk you through the process of creating the Data Visualization Society State of the Industry Survey 2021 Challenge entry, “Which DVS persona are you?”, from ideation, data exploration, and quiz layout concept up to the development process. I will also share some of my thoughts on decisions that had to be made to accomplish the tasks.
At the end of this article there is a Bonus section where I’ll be sharing with you the revamped charts from the full report. The full report is a separate page from the quiz, which explains in detail the variables used from the survey dataset and how I arrived with the numbers.
If you have not tried the quiz yet, you can get a sense of what it’s all about here:
Quiz: Which DVS Persona Are You?
The idea of this visualization was to introduce the 16 different personas (originally conceptualized as tribes) where each persona/tribe is identified by the combination of years of experience, role, salary, and commitment.
The entry I submitted was a quiz to test which persona or tribe you would be the closest to according to your answers related to the four variables mentioned. This was a fun kind of project to practice doing data viz based on data, inspiration, and imagination.
Ideation: How did the idea come about?
The initial idea was entirely different from how it turned out. I listed out questions about how I would be able to have a simple map of the entire community and some thoughts of focusing on dataviz career experiences.
At some point, one thought stood out! I wanted to be able to see myself in the data and wanted other people to see themselves in the data as well. It was a Eureka moment when I thought of using the 16 personalities as an inspiration to classify the entire DVS community. Of the 16 different DVS tribes, which one would you closely identify yourself with?
Only then did I figure out what to do when I was in the middle of data exploration and did what needed to be done. I made some sketches on how I would restructure the data and how I could turn it into something interactive or personalized to the reader.
Data: How I explored and structured the data in R
Exploring and narrowing down to the needed parameters
The process wasn’t that straightforward, to be honest. I moved back and forth to explore the data and see whether what I had in mind existed in the dataset or if I may find something interesting or relevant.
I was playing around with which aspects of being a dataviz practitioner could work as variables and which would also fit with the existing variables from the data.
At some point, I had finalized and selected the variables that I wanted to mix and match and these were:
- Years of experience
- Role
- Salary
- Commitment (full-time and non-full-time like students, freelancers)
Defining the criteria
I then tried to define the criteria for each variable and who would belong to which persona or tribe. This way, I would be able to filter out the data into the variables that I needed.
Then, I tried to split the data into two parts for every variable chosen:
- For numerical values like salary and years of experience, I’ve split between upper and lower half divided at a median value.
- For categorical values like role and commitment, I tried to create a metric on how the values would be classified:
- For role, I tried splitting between creatives and analysts function roles in their organizations.
- For commitment, I used a weighting system to classify full-time roles as different from non-full-time roles, such as students, part-timers, passive-incomers and freelancers.
The dataset was also filtered to which survey respondent records had observations of the four variables above and at least one of them had answered four additional variables.
Speaking of the four additional variables from the dataset, I explored the survey answers from the community further to learn more about the variations in the personas’ preferences in terms of tools, frustrations, etc., and get to know their characters better.
Four additional variables I explored:
- Tools used for creating data visualizations –
ToolsForDV
- Top frustrations by DV members –
TopFrustrationsDV
- Top issues by DVS members –
TopIssuesDV
- Organization sector –
OrgSector
There was also clean-up involved like recoding of values to achieve the shape of the data that I wanted to achieve.
Putting together all of the individually processed data per variable, the data was then tallied according to how many members belong to every group.
The final summarized data looked like this:
Generating plots with ggplot2
Using ggplot, I tried to experiment a bit into which chart would work. Although in the end, I kept the 4×4 faceted grid to achieve a consistent look across the sixteen DVS personas.
Layout: How I designed the UI for the quiz
I decided to create an interactive quiz of four simple questions as a structure, each having two choices, where you basically tap one or the other.
A quiz using personalization is something I prefer doing to engage the reader and see how you relate themselves in the data.
The quiz result tells the reader about your persona type and how common you are in the community. It also displays two charts showing tools preferences and the industries where your persona is most common.
Using a mockup tool application called Adobe XD, I quickly tested the quiz in the mockup to see how it would look and identify potential UX/UI issues before moving to development. I also started designing from mobile which helped me to be more aware of the responsiveness between desktop and mobile.
Creating the assets
I originally made sketches that would reflect the attributes of the personas, but I did not end up using them as I had foreseen that completing them would take more time than I intended to spend. Below are the sketches which look so cute and similar to Cartoon Network characters!
Instead of illustrating persona characters from scratch, I found the assets from stock vector graphics which I tweaked a little bit and changed the color of their clothes depending whether they are creative or analyst types and lighter/darker clothes whether they are on the humbly-paids or well-paids types.
For the charts, I pursued the basic charts provided by ggplot. I thought that something legible and showing the data accurately would be enough for the moment. When I get more time in the future, I will try to make them look better!
Development: How I built the quiz
Preparing the JSON data
I moved back to the data to see how I will structure my JSON data to be used by the quiz. Preparing the JSON data, I set them up to be accessible via Github and this is where our web UI quiz will access the data on the result part. You can take a look at the data here.
Coding using React
The one-page site was created using React’s Create React App build tooling. Along with it, I tried using Tailwind for the first time as I had heard some folks use it for quicker development time, and to me, it did not disappoint.
There are two parts to this, the Quiz and the Result. Readers will be answering all four questions before they will see their results.
Styling using Tailwind CSS classes
I was introduced and was used to styling web apps using Styled Components and Emotion in React, but I saw how Tailwind has a different way of styling by using classes instead. Classes are quite convenient when building something from scratch.
What I learned I like about Tailwind’s method of styling is that you just need to style an HTML tag or a React component as a class name that is shortened and easy to remember. Tailwind’s reference document was also quick to search, and I recommend it as a resource if you have a CSS style in mind or if you are new to using Tailwind. Once you get used to the most common style class names, you might find yourself just typing them from memory.
Here’s the link to the Github page of the developed web page if you want to see the complete code.
Final Output
Intro
Quiz
Results
Bonus content: Revamped charts from the explainer section
After the quiz, there is a link to the full report describing more detail on the methods and insights. I’ve revamped some of the charts since the challenge, and you can view how these originally were here.
How is the community broken down into every persona?
A quarter of the community is made up of the Junior Analytical Humbly-paid Associates followed by their Senior Well-paid counterparts. The Junior Creative Well-paid Independents are the most uncommon in the community.
Tools of preference for every persona
Roles seem to define the tools of preference of the DVS community. Excel seems to be a general choice. Creatives have more preference for Illustrator, while Analyticals have a liking for Tableau.
Breakdown per industry per persona
The personas seem to avoid the journalism industry except for Junior Creative Humbly-paid Associates (JCHA). The journalism industry also defies the trends that most industries follow, as you can see in the chart below.
Visualizing the two leaning sides for every variable
Junior vs. Senior
This chart shows how the quiz identified community members as leaning on the Junior side or Senior side by splitting between median years of experience at six years.
Analytical vs. Creative
Here you can see how community members lean on the Analytical or Creative side by those roles which define how they would generally function.
Humbly-paid vs. Well-paid
You can also see how the entire community skews in pay in the following chart. Members fall either on the Humbly-paid or the Well-paid side of the community when split at its median annual salary of $81.3 thousand U.S. dollars (K).
Associates vs. Independents
Based on the chart below, 60% of the community identified themselves as associates (full-time employees), while more than a third were independents (students, part-timers, or freelancers)
Wrapping up: What I learned from this experience
Creating personas using data while considering how the community would respond to it was a challenging but fun learning experience. By personifying data about thousands of dataviz practitioners around the world into 16 unique persons, I learned so much about the community on a more personal level.
Exploring the data was the most fun part of the process, while making decisions was the hardest. Making judgments on the design aspect was troublesome as a designer especially when you need to ‘kill your darlings’ just to get things done on a budgeted time.
On a more personal note, I was able to reflect and see myself in the context of the entire community (I’m a Junior-Creative-Humblypaid-Associate), which I originally intended to do!
After all, this data in front of us isn’t just numbers. This data is, or rather ‘we are’, real people with varying career experiences. One of those is tackling difficult dataviz decisions: should you either take a more profitable career over a more noble career or should you choose Python over R?
What’s Next?
Have you wondered what your dataviz colleagues’ personas are? Share this quiz with them and find out which personas they are the closest to. Help them understand and see themselves in the community!
Quiz: Which DVS Persona Are You?
Joseph Ricafort is a Dataviz Designer under the Digital Graphics team at The Straits Times in Singapore. He designs and builds interactive stories and explorations. He is mostly drawn towards topics related to culture and social experiences.