When I began my work, my first priority was to evaluate the state of the current web tool used to design Antz Glyph visualizations. Initially the tool was pretty threadbare, only having a fraction of the desired functionality. At this time, the only design assets were low-fidelity mockups and a couple basic prototypes in Marvel. I started by moving everything into Figma. This helped me set the foundation for my later design work while familiarizing myself with the current design language. An additional aspect of this step was having lengthy meetings with our co-founder to learn about new system requirements.

Product Background

Antz Glyph is a powerful visualization tool that allows people to discover patterns and relationships in massive, unwieldy datasets. Think of a dataset with thousands of data points and a vast array of distinct parameters. Antz Glyph seeks to address data visualization challenges that are too complex for traditional tools like Tableau.

What is an ANTZ Glyph?

Antz Glyph visualizations are a collection complex hierarchical node tree structures, each one representing a singular data point with all its associated parameters. Visually, it's often represented as a cluster of 3d virtual objects (could be spheres, cubes, toroids, etc.). Using the visual attributes of an object, you can create a nuanced visual language and choose which attribute(s) of an object will show changes in a parameter. In this way, you can craft visualizations that allow you to discover critical relationships and patterns in datasets that are otherwise too large or complex to work with.

• Color
• Transparency
• Texture (used in place of color, like a pattern that is wrapped onto the object)
• Geometry (the physical shape of an object)
• Topology (how child objects align around its parent)
• Scale (how an object is compressed or stretched in the X, Y, or Z direction)
• Ratio (how a child object is scaled relative to its parent)
• Translate (the physical shape of an object)
• Rotate (the degrees of rotation of an object in the X, Y, or Z direction)
• Line Width (only applies to objects with a wireframe geometry)

Initial ANTZ Glyph Web Tool

In order to effectively redesign the website, I first needed to understand the ANTZ Glyph product inside and out. To do so, I spent hours playing with the desktop program, opening up visualizations and exploring them on my laptop, asking lots of questions to our cofounder, and finally hard-coding and redesigning a visualization myself using python. I also used this time to learn about our end users, making up two main groups. Data scientists (i.e. anyone who works with datasets professionally or otherwise) and novice users working with data.

Product Background

The visualization I designed used a Covid risk factor survey distributed in southern California. Below are diagrams showing the glyphs I designed to represent the data collected on different variables for each respondent. For this process, I hard-coded the visualization design in python. You will see each object has a consistent color and geometry with the relative size showing the value.

Key for respondent demographics and fever status

Key for respondent risk factors

Spending time getting comfortable with ANTZ Glyph, I came to understand all the possible functionalities it presented for data scientists as well as novices. Becoming a product expert then allowed me to better identify opportunities for improvement in the user flow of the website. Above all, I focused on emulating a clean design and conserving space on an already dense UI. Being a highly-multifunctional tool, I also needed to consider how to make different functionality discoverable while keeping the interface clean.

Having developed a profound understand of ANTZ Glyph, I was ready to begin rethinking the design of each component. I started by rebuilding each piece from scratch, keeping in mind that a developer would need to then reconstruct it using the Vuetify React framework that the web tool was built with. Accordingly, I spent time along the way carefully reading the Vuetify documentation so that I could ensure I was creating feasible designs.

At this point, I had developed a holistic understanding of the design process for creating ANTZ Glyph visualizations. I used that to inform my design process, imagining what it would be like if I were using these components to design a visualization.

For example, I would think about "what if I wanted to create this structure and then delete it?" or "what I wanted to duplicate a set of nodes and copy them as children onto a different parent node?" For testing, I would take each component in Figma and resize it in different directions and then try to change the color or text field as if I were trying to use it for a prototype or mockup.

Each time I finished doing a set of components needed for a particular ANTZ Glyph design step, I would create a hi-fidelity prototype that demonstrated their behavior. For each prototype, I would try to include as many edge cases as possible. Ideally, I wanted to show every state and what would happen when the user clicked or performed a certain action on a component. If a component had buttons, I made sure that the prototype clearly showed each button's function. Aside from showing behavior, the prototypes also served to give a feel of the general user flow of the web tool.

Sample Prototype

Although user testing was not part of the process due to constraints on time and resources, these prototypes would have been valuable for user testing. The below prototype demonstrates conditional attribute setting using different types of conditional statements. This paradigm was hardest to establish because there were no previous examples to serve as guidance.

With a freshly-built design system and hi-fidelity prototypes created, my last step before shipping was leaving detailed instructions for our developer. The purpose of documentation was to maintain the project rhythm and give more space for the developer to ask complex questions about the design and prototypes. It's also impossible to determine if and how many roadblocks will crop up during development; good documentation can reduce and mitigate these. For each component, I designed detailed diagrams and instructions to demonstrate behavior and appearance in various states. For components that could take numerous attributes and have different states, I created additional diagrams to show edge cases.

Example of an object navigator component with multiple column mappings and a multi-nested structure

Documentation Sample

Below is the documentation for the node label component which nests inside the larger glyph tree builder for creating the structure of each ANTZ Glyph.