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 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. It was cool that there was a real-world example 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 designing road intersections. My initial team was located in New Hampshire and Guemligen, Switzerland; I then joined a Shanghai-based scrum team. (I was the only team member in the US—a conscious decision by my managers, due to my prior experience in Japan. It involved a split-schedule, working with my US/European colleagues by day and my Chinese colleagues by night.)

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 combinations of intersections, and starting to think about roundabouts. ("Plunk it down" was a quote from an intersection design SME I interviewed.)

The Object Card This was a floating control menu whose contents changed based on what was selected. It was a real challenge finding a way to "unify" the object card across all the 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 An early exploration; I didn't get to actively design these tools. (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. 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 validation 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). As of 2017, they're still in the app!

*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, for example, they can't typically support vehicles over a certain weight).

Design vehicle illustrations
want to move to another piece?
Pittsburgh JET Alumni Association
Presentation: Classical Music and UX
Autodesk ReCap
Pirates of Dark Water
Autodesk InfraWorks
Information Design: Self-Portrait
Presentation: Intercultural Design
AutoCAD Utility Design
Information Design: Designing Information Spaces
Presentation: What is UX?
Shirt Design: CMU's All University Orchestra