Nano Visualization

Autodesk Life Sciences is a diverse group of designers, scientists, and engineers who build and launch technologies to solve the world's most complex design challenges from nano design, molecular visualization to genetic engineering.

One of the leading causes of fatalities in cancer is due to the immunity to treatments. In recent years the costs to produce artificial DNA has decreased rapidly, enabling a new generation of scientists to research and synthesize nanoscale structures - DNA origami. DNA origami has found a number of applications from drug delivery systems to uses as circuitry and sensors.

DNA nano structures. Courtesy of Shawn Douglas and Hendrik Dietz

Autodesk Life Sciences approaches challenges that have the aspiration and riskiness of research with the ambition of a startup. Possible projects are developed and rated within a short period of 3-6 months. To minimize risk we follow a flexible design process. 

1. Research: Understanding context, opportunity, and user needs
2. Analysis: Defining the problem in human-centric ways
3. Ideation: Creating many ideas in ideation sessions
4. Validation & Iteration: Prototyping, testing and refining the solution

The purpose of steps 1 and 2 is to understand the problem, that we can prepare to explore possible solutions. We want to be confident that we’re solving a problem that will provide value for our users, customers, and stakeholders.

A strand of DNA consists of four base pairs. A, T, C, and G. Like magnets those bases are attracted to each other. These physical interactions are responsible that two opposite single strands of DNA will bind together and twist into the double helix structure of DNA. In DNA origami scientists print strands of DNA, with specific sequences of base pairs, that will attract and bind with one another, so that they fold up into three-dimensional shapes. 

Complementary strands of DNA bind together 

Autodesk Life Sciences focuses on technology with high risk and high potential. DNA origami has proven to be a promising field in cancer research. Traditionally reserved for established research labs and Pharma companies, the sinking costs of DNA synthesis has opened a new market of emerging and undergraduate scientists. 

We interviewed undergraduate students and established domain experts to develop our target persona. Our target group has a high tolerance for technical and visual complexity and are enthusiastic adopters of experimental technology. All participants collaborate in teams and are highly dependent on specialized contributors - domain experts, engineers, and 3D designers. We followed several teams over the course of a year, getting a better understanding of their challenges at various stages of their projects.

Existing solutions are limited to 2D visualizations of DNA nano structures

Possible challenges are ranked according to impact and feasibility in collaboration with engineering, marketing, and product divisions. For our initial milestone, we decided to focus on the development of a 3D visual language, capable of displaying the high complexity of DNA structures. 

• Timeframe: 6 months
• Functional: Enable exploration of existing designs to asses their feasibility of production
• Technical: Leverage Autodesk’s IP in 3D visualization and technology stack
• Target: Undergraduate students - high tolerance for 0.1 software, early adopters, domain experts 

We needed a language that would allow us to display relevant information in a clear manner while staying true to the physical form of DNA. Looking at successful examples of information design we investigated various examples of metro maps. Our approach was to apply their visual cues to our 3D visual language. Initial sketches were rendered in Sketch, Maya, Cinema4D, and Plexus. 

Metro maps 

Applying vlsual cues of metro maps to the 3D language

3D language in context of the 2D browser

The goal of steps three to five is to release software that solves the problem identified by the first two steps. We explore a variety of potential solutions and get iterative feedback before committing to full implementation. We start sketching, paper prototyping, then interactive prototyping of the strongest solutions.

Interactive prototypes were developed in Framer and node.js. We measured the readability of the 3D language with remote participants and focus groups at BioMOD - a yearly DNA origami focused design convention. We validated the general direction, but the readability of structures decreased with increasing complexity.

Readability of the 3D language decreased with increasing complexity

Our next goal was to reduce visual noise within the language. There is only a limited amount of data a user is able to parse at once - beyond that, data is perceived as noise. We developed a function that balances the noise threshold by hiding or consolidating data. In practice this means as the user zooms out to see the entirety of the model, less detail is shown. As the user zooms into a smaller part of the model more detail is revealed. Further user testing validated this direction. 

Balancing the amount of detail with the zoom factor

In later iterations, we focused on simplifying 3D navigation. Navigating 3D takes practice and time - our users spent a lot of time zooming, panning and rotating the model to access points of interest. By analyzing the structure we generate a pre-scripted tour of points of interest allowing users to quickly frame those points without the need for navigation. 

Pre-scripted tour through the DNA structure

Focus group at Autodesk Pier 9

Interviews showed that users need to analyze different sections of the underlying DNA sequence to assess their 3D structure. Due to the immensely large datasets of A, T, G and Cs known solutions, like tree-view browsers tested as inefficient. Highest efficiency was measured, using a novel interaction that combines the qualities of a list and column view.

The 2D browser allows users to quickly pinpoint and compare different sections of the DNA sequence

The current release of Nano Designer brings needed improvements to the promising field of DNA Origami research. Further enhancements will focus on simulation and analysis of DNA structures.

UI architecture: 2D visualization and browser (left), 3D visualization (center) and tools (right)

2D visualization for DNA strand lengths

UX architecture and visual style of the application were developed in parallel with the 3D visual language. Colors are inspired by the qualities of electron microscope imagery, evoking a deep, rich and immersive environment.
Early on we decided to develop a design system, to unify experience and visual design across the portfolio of Life Sciences applications. The application is based on React components, to allow for faster iteration and the development of reusable design elements.

The application consists of three functional parts: 2D navigation, 3D visualization, and analysis tools. In later iterations, we moved from a light to a dark interface theme.

The initial design vision was to create a logo that embodies the underlying math, geometry, and beautiful symmetry when working with living materials. We then decided to create a single logo for the complete portfolio of Life Sciences products. The final version is an abstract rendering of a molecule inspired by the images of electron microscopy. Logos are color-coded according to their product line.

Logo sketches and iterations