Building Blocks Technologies

Blockchain, Data Visualization, and Accessiblity: Find Your Place in a Growing Industry

"More is not always more - too much information can leave someone like me feeling overwhelmed and unsure of where to direct my attention to"

Project Details:

Date:
September 2020 - November 2020

Role:
UX Design Intern

Background:
Building Blocks Technologies (BBT) mines for data on blockchain job opportunities with the hopes of presenting this information on the web

Context:
I was tasked to create an interactive visualization using BBT's proprietary data so users can find their fit in blockchain‍

Stakeholder Need

How might we display Building Blocks' company data in an informative and inviting way?

Building Blocks Technologies (BBT) hopes users will feel invited to use their website as their go-to job search tool for all things blockchain (job-search tool is not launched yet). The stakeholders are the Building Blocks team, and they need the design to be professional and in the spirit of the blockchain industry.

User Need

How might we display technical blockchain information in a comprehensive, yet understandable way?

Given that the users of this visualization likely don't know much about blockchain, the information displayed must be readable, accessible, and interpretable. I understood that the design needed to be practical, substantial, and above all: not flashy. As the UX Designer for the team, this is the expectation. However, dispelling technical information can be challenging, and I knew I needed to conduct user research before I started prototyping.

Solution

I was tasked to design a data visualization for web use. After studying the data, interviewing users, and circling back with my stakeholders, I settled on 5 categories of data: Industries, Blockchain Technologies, Positions, and Skills & Algorithms. To the right is a video of the high-fidelity prototype, and below is a static walkthrough of the design.

User Research

"The simpler, the better. And throwing in a bubbly tech UI makes me way more comfortable."

I started the research process by studying the data and found it to be simple frequency data (how often data point shows up in blockchain job descriptions). I then performed a competitive analysis to see what others were doing with this type of data and gather expectations for the visualization.

I then interviewed 5 potential users: students interested in blockchain who might benefit from an informational visualization like this. I showed them the different graphics I looked at and asked what they found intuitive or unhelpful.

Constraints & Guidelines

"Don't make me sort through a cluttered mess"

The above research, coupled with discussions with my stakeholders, helped form constraints to be placed on the design.

"Focus on a few categories of data. I don't think you'll be fully able to get across the intent of all 10 dimensions of the data."
"Impress me with the content, with how well i can maneuver it, with how much I learned from something. Don't try to win me over with quantity or anything too abstract."
"These visualizations have a lot of names and buzzwords, but what do they all mean? I want to know what these data points are."
Narrow the scope of the visualization - what do users really want to know?
Ensure a simple design and champion accessibility - this design MUST be understood by all
Include descriptions of category names and their data points

Prototyping

How can I best convey the meaning of these 5 categories of data?

Industry, Blockchain, Position, Skill, and Algorithm. 5 categories of data, with no idea how to relate them. A week of sketching, wireframing, and subsequent confusion made me realize something: let these categories stand on their own. After narrowing my scope, I started wireframing and prototyping this pivoted design.

A low-fidelity wireframe
Low-fidelity prototype depicting multiple data categories
Prototype of dashboard depicting individual data categories

Feedback & Iteration

"It doesn't have to look super cool. It just has to make sense."

After completing a round of early prototypes, I sought out feedback from the users I interviewed earlier, as well as some professors from the design school. I performed usability tests with users and received feedback on how to make my design more intuitive. My professors advised me on how to best work with the data at hand. With that, I iterated and achieved my final design.

"Looking at the dashboard, I don't really know what I am seeing. What does each card really mean?"
"I'm having a hard time distinguishing between skill and algorithm"
"These card titles and navigation titles are too abstract for me. What does "Blockchain" mean in this context?"
I can't present internal titles to external users. I need to provide context to each data category.
If skills and algorithms indicate the same thing, then combine those categories for the visualization.
Include hover states that provide descriptions of each card.

Outcome

"I now have a clearer understanding of the big players in blockchain."

After completing the final design, I presented it to the project stakeholders. My direct supervisor appreciated the adherence to professionalism and the spirit of blockchain, and commended my ability to visually represent Building Blocks' data.

I performed a last usability test with new users to determine the value of the final iteration. They appreciated the attention to readability and clarity of the design, and also found the use of simple visualizations like bars, spheres, and the use of color to greatly aid in understanding. Lastly, they found the flow of the design exactly as they'd expect it to behave.

Visualize
Pop Social Inc.