Design work at Autodesk: Autodesk Infraworks

tags: sketching/illustration, icons, desktop, synthesis, storyboards, prototype/wireframe, finished ui

An array of artifacts I did as part of my work on Autodesk Infraworks (formerly known as Autodesk Infrastructure Modeler).

About InfraWorks Autodesk Infraworks helps transportation planners, urban planners, and civil engineers design all aspects of a city layout in order to share plans with stakeholders (e.g., city councils and local citizens, police, private developers) and begin to visualize proposed infrastructure updates. Engineers can import GIS data or an existing map, view it in 3D, edit elements within the drawing canvas, and export specific views to share with stakeholders.

Screenshot of the Autodesk InfraWorks intersection tool

About this sketch I sketched this to help myself understand the steps in the conceptual design phase of infrastructure design—what our software targeted.

Fun Fact This scenario was based loosely off a real-life proposal to find a location for the first Starbucks in Waltham, MA. (Sadly, the chosen intersection was already a huge headache at rush hour, so the public spoke out against it and the plans were scrapped.) Still, it was cool to find a real-life example of these situations a half-mile from our office!

Synthesis sketch: civil engineering conceptual design process

These images are my initial brainstorming efforts (including whiteboarded "storyboards"), trying to compile the necessary data into a plausible workflow.

About My Team I ultimately joined the Roads and Highways team, focusing on the intersection design process. I attended daily scrums with fellow designers in New Hampshire and Guemligen, Switzerland, and nightly scrums several times a week with Team Crux, the Shanghai-based development team building out the intersection functionality. (I was the only team member in the US—a conscious decision by my managers, due to my prior experience in Japan—and this led to some creative split-shift scheduling to collaborate with everybody to the best of my ability.)

Initial effort: mapping intersection conceptual design to a UI workflow
GIF ALERT - frame-by-frame concept whiteboarding session
Initial effort: mapping intersection detailed design to a UI workflow

Visualizing all the permutations/combinations of intersections that we had to support, and starting to think about roundabouts. (The "plunk it down" quote was from an intersection design SME I interviewed.)

The Object Card Infraworks (at that time) employed what we called the "object card"—contextual controls based on what part of the UI a user has selected. Beyond just encapsulating all these road variations in our own subspecialties, it was a real challenge finding a way to "unify" the object card across the radically different controls for different aspects of infrastructure design (drainage vs. roadway, for example).

Visual inventory: documenting all potential right-turn configurations Visual inventory: documenting all potential left-turn configurations Visual inventory: documenting all other turn configurations Regions of a road, and region-specific properties/editability Initial survey of roundabout types

"Going wide" with my brainstorming - thinking about 3-dimensionality, sight distance, visualizing the view from a driver's perspective, and other ways to interact with intersection "objects."

Brainstorming sketches: what about a 3D cross-section or a driver's view? Brainstorming sketches: what about sight distance and simulating design vehicles?

Interchanges Though I never got to actually work on this, I did spend time familarizing myself with it all. (Interchanges differ from intersections in that "the pavement doesn't meet"—the crossing roads have vertical clearance between them.) I had to do a lot of sketching to examine all the difference between interchanges and intersections (3D, region-specific properties, speed and vehicle differences, etc.).

Visual inventory: starting to document various interchange types Brainstorming sketches: considering interchanges in terms of editable layers Identifying regions of interchanges 3D visualization exercise - how to render interchange over/under ramps from various angles?

My major wireframes/workflow deliverable. These were overlaid on b&w screenshots of the Infraworks drawing canvas. I drew all the intersection and UI elements in Illustrator (and re-created the default toolbars, etc. in a simpler style to deemphasize them).

Download the full PDF (it's fun to click through and watch it animate!)

Conceptual intersection design wireframe

Sprint-by-sprint wireframes Examples of the wireframes I delivered to my scrum team. In hindsight, I definitely would have done higher-fidelity and digital wireframes instead, but it's a testament to my team's shared vision that they delivered precisely what I had in mind, even with just these sketches.

agile/scrum and design Our organization adopted 3-week-long sprints for all ˜20 Infraworks scrum teams. (All teams were named after constellations, and our team, Crux, was named after the Southern Cross.) Thanks to all my prior research, it was easy for me to stay at least 1 sprint ahead of the team and develop sprint-by-sprint wireframes quickly.

These intersection features were complex enough to implement that it took several months before I could even run a 30-minute usability testing session. I conducted research both internally with SMEs (in part to pick up domain knowledge) and with external customers in several waves. We were unfortunately not permitted to do onsite research with clients, but the upside to this was that I did remote sessions with transportation planners across the Americas and learned about some great fringe cases (e.g., angling mountain roads in northern climates to handle icy wintry conditions).

Wireframe deliverable to my team: selecting a design vehicle Wireframe deliverable to my team: creating a custom design vehicle Wireframe deliverable to my team: how to prevent the user from going astray Wireframe deliverable to my team: working with grips to manually edit intersections

As we started development, I proposed including images of the design vehicles* for quick reference, and created these small illustrations of the various vehicles (18 in all, according to AASHTO standards). At one point it looked like they had to be removed from the object card design, but according to the screenshot above, they have indeed been readded!

*design vehicle This is the largest standard vehicle type for which a road is designed to accommodate. Knowing the dimensions, weights, max speeds, height clearances, etc. of vehicles allows planners to make decisions on road speeds, turning radii, and even the materials used to build a road (if they can't typically support vehicles over a certain weight, etc.).

Design vehicle illustrations
want to move to another piece?
AutoCAD Utility Design
Autodesk InfraWorks
Information Design: Designing Information Spaces
Information Design: Self-Portrait
Presentation: Intercultural Design
Presentation: What is UX?
Shirt Design: CMU's All University Orchestra
Convergence
Master's Thesis: Designing for Reverse Culture Shock
Video: A Meditation on Reverse Culture Shock