Autodesk Infraworks: sketching and creative wireframing / Design portfolio of Smitha Prasadh

What this is about

An array of artifacts I did while working on roads/highways tools for Autodesk Infraworks. This was early in my career and I was given a lot of creative freedom and flexibility.

A screenshot of Autodesk Infraworks, displaying the implementation of the intersection tool that I designed. — Autodesk Infraworks, ca. 2013

About Autodesk 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.

Conceptual design: learning concepts via sketching

A "comic" 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!

A pencil-sketch comic that summarizes the conceptual design process in civil engineering. In essence, police are concerned about the high level of accidents and traffic at an intersection. Developers want to put in a Starbucks at that same intersection. They talk to an urban planner, who comes up with a new layout for the whole area that will mitigate traffic. — Lightweight comic that captures the stakeholders, issues, and steps that go into a typical conceptual design workflow.

A couple of sketches of different turn lane configurations as I was learning them:

A series of sketches of as many different left-turn configurations with standard roads as I could think of. — Sketching numerous left-turn setups.

series of sketches of as many different right-turn configurations with standard roads as I could think of. — And right-turn setups.

Beginning to delve into interchanges...

Examining highway/expressway interchanges in terms of layers. There are three layers: the bottom is a north-south expressway (in brown), the middle is an east-west expressway (in green), and the top - again, this is conceptual, so not ACTUALLY on top, but just separate - is a ramp connecting the two throughways (in pink). — Examining highway/expressway interchanges in terms of layers. This was a visual experiment, to consider how to break up an interchange into components that could be configured/edited. The layers aren't necessarily meant to be top-to-bottom (which of the three would be on top, right?), but I was exploring the basic idea of breaking this into 3 parts.

A sketch of a cloverleaf intersection with different areas color-coded. A north-south expressway is colored blue, an east-west expressway (that runs beneath the north-south) is brown, loops are in green, ramps are in pink, converge/diverge/merge areas are in orange, and vertical supports for elevated areas are in black hashmarks. — Color-coding components of a cloverleaf interchange, to identify areas with different properties that might need different editing configurations.

Storyboard-style wireframes

Mocking up three interaction styles in order to create and edit intersections "in-canvas" (in the context of the visual Infraworks UI).

You can download the full PDF to click through them and watch them animate.

A digitally illustrated wireframe of a new intersection configuration tool in Infraworks. — Digital illustration of a new intersection configuration tool for Infraworks.

Illustrations: design vehicles

These are the largest vehicle that a road is designed to accommodate, either due to construction materials used or just sheer size/dimensions.

I did a series of vector illustrations of the design vehicles, which users could then choose from a palette. They were still in the product as of a few years ago! I could do a more refined job today, but I'm still quite proud of them. :)

A series of digitally illustrated vehicles: cars, trucks, buses, and more. — Digital illustration of a new intersection configuration tool for Infraworks.