Autodesk · CFD

Time Period

2011-2017

Disciplines

UX, Interaction Design, Visual Design, User Research

Autodesk CFD is a professional yet easy-to-use computational fluid dynamics (CFD) tool for engineers; in other words, an approachable way to simulate fluid flow and heat transfer to understand how designs will perform in the real world. It is used to simulate everything from pumps & valves, to electronics cooling, to aero & hydrodynamics, to HVAC systems in buildings. Our product is designed with the belief that simulating design performance virtually, early, and often in the product lifecycle results in cheaper and better-performing real-world designs, with faster time to market.

Preparing to simulate a valve assembly in Autodesk CFD
Autodesk Simulation CFD 2013 shown in simulation setup mode

Role and Responsibilities

I was the UX Design Lead for Autodesk’s computational fluid dynamics (CFD) apps from 2011 until 2017, supporting the following successful releases:

  • Autodesk Simulation CFD 2012
  • Autodesk Simulation CFD 2013
  • Autodesk Simulation CFD 2014
  • Autodesk Simulation CFD 2015
  • Autodesk CFD 2016
  • Autodesk CFD 2017

In this role I owned user experience and product design, supporting most new development initiatives. Responsibilities include:

  • User research
  • Product design strategy, planning, & facilitation
  • UI, interaction design, and prototyping
  • Visual Design
  • Front-end development (XAML-based WPF UIs)
  • Usability testing
  • Design evangelism and cultural evolution

An example of a large-scale, post-acquisition UI overhaul follows.

Case Study: UI Modernization

Classic CFdesign layout before redesign
Before: Autodesk CFD had inherited a pretty standard Windows UI (for the time) consisting of application-level menus and 24px docking toolbars. As the software had grown, the toolbars had become a mix of file operations, view controls, selection methods, commands, and mode toggles. There were two primary modes that were not strongly differentiated and a few secondary. The left-docked "Design Study Bar" worked quite well with a top-down approach but felt discontinuous from the other UI. The "in canvas" controls felt like they had been layered in as an afterthought.

User Research and Synthesis

In the field performing interviews and ethnographic research to learn about user workflows
In the field performing interviews and ethnographic research to learn about user workflows
Workflow analysis for results and reporting, to inform redesign
We generalized & mapped our learnings to diagrams that would inform the updated software workflows; these broke down by simulation setup, results processing, reporting, and design comparison (intentionally blurred)
Persona synthesized from over 20 user interviews, for the infrequent simulation user (intentionally blurred)
From 20+ interviews, we identified two primary personas with distinct needs and goals: a full-time simulation analyst and a design engineer who used simulation infrequently at key points in their design process (intentionally blurred)
A card sort to better understand how users related various commands and operations
I conducted a deep-dive card sort with several power users to better understand how they related various modes, commands, and operations

Interface and Interaction Design

The following images show the general process, with a focus on the ribbon toolbar since it is the primary interface: starting from low-fi sketches exploring broad design concepts, to digital wireframes, to mockups, to actual UI prototyping, and finally to polishing the icons and visual design.

Thinking high-level about UI component architecture
High-level UI component architecture; blue-numbered components were part of the redesign while green-lettered were untouched components
Starting low fidelity to explore broad concepts and constraints
Office 2010 had popularized a new ribbon toolbar paradigm and Autodesk had embraced it in its flagship products. Microsoft and Autodesk research showed major usability improvements across the board, so this is the direction we embarked on. Here, I started with low-fidelity sketches to explore broad concepts and constraints including left-to-right vs. free-form flows, mode selection at different levels, context tabs vs. context panels, and high-level layouts.
Refining the more promising designs and validating iterations with internal experts
Through dozens and dozens of cycles, I was refining the more promising designs and validating iterations with internal subject matter experts from services & support. The primary modes were split by ribbon tab, e.g. Setup, Results, and Manage. Each tab generally followed a left-to-right flow, with sub-modes centered in the ribbon toolbar. Each sub-mode activated a context panel (green) with commands and controls exclusive to that mode.
Prototyping and rapidly iterating ribbon UI layouts
Once we started building the ribbon in software, prototyping and rapid iteration were made easy with Microsoft Expression Blend. The WPF framework enabled me to design the ribbon layout, microinteractions, and behaviors while engineering worked on connecting functionality within the application. I could simply export updated XAML files to a folder in the installation directory to see my updates immediately working in code.
Prototyping interactions and evaluating the visual design
Prototyping interactions and evaluating the visual design styling of the live component
Prototyping responsiveness, element prioritization, and resize interactions
Prototyping responsiveness, element prioritization, and window-resizing interactions
Iterating on visual design based on user testing, feedback, and design principles
Iterating on visual design based on user testing, feedback, and design principles
Nearing a final design after testing the prototypes with users
Nearing final v1 designs after internal use and testing the prototypes with real users

Feedback and Additional Work

This project was a resounding success that made our application easier to learn and use. We ended up finishing ahead of schedule thanks to an incredible engineering team and great tooling from Microsoft. In the end, nothing is as satisfying as positive user feedback:

I’ve used a lot of software since entering the product research field. Some were not too difficult to figure out, while others did require a bit of study to get running. Autodesk Simulation CFD 2013 is one of the easiest I’ve encountered.

Anyone fresh into a new piece of software can feel a bit out of sorts, but CFD is laid out in my favorite manner: a progressive ribbon. By this, I mean a ribbon layout that works from left to right in the general order that parallels the standard workflows expected.

The interesting thing to note here is that I never studied how to manipulate planes in CFD. I just followed my instincts, and the tools were there. Nice job usability.

John Evans, designandmotion.com

Comparatively evaluating design scenarios in Autodesk Simulation CFD
Comparatively evaluating design scenarios in Autodesk Simulation CFD

This particular project serves as a broad example of my approach and my varied, technical skillset as a designer. I have designed a majority of the new and redesigned features in the products listed above, so am happy to answer additional questions and requests. For a list of what’s new in each release, see the Autodesk Knowledge Network articles:

For earlier work, check out my post about CFdesign.