UX Design Sprint

A Software Tool for a Transportation Engineer

Duration: 1 week

2022

Context

The 1 week Design Challenge

In July of 2021, while pursuing my HCI MSc, I took up a UX interview design challenge. The following describes the challenge as it was shared with me:

Produce a high-level design of a software tool to allow a transportation engineer to design a new subway system for a given city.

Focus your design on allowing the transportation engineer to decide where to place the stations and how to connect them to increase the flow and minimize road traffic during rush hour while fitting within the budget. The transportation engineer is only concerned with the road traffic data and the cost. Cost is determined by number of stations, number of connections, and length of connections.

The software tool should display the map of the city, and the information on population and traffic during the day. There is sufficient technology to support the proposed design and underlying data analysis logic within the tool.

User Goals and Pain Points

The focus of the Design Challenge

The primary user for this software tool would be a transportation engineer. Transportation engineers are concerned with the design, installation, and operation of transportation structures and facilities.

User Goals

Create a plan for a new subway route using the data provided on population and traffic
Create a plan that does not exceed the allocated budget
Compare possible solutions to identify the one that serves most users, and that best reduces the current road traffic

The brief provided some data regarding user pain points which I mapped as follows:

The design challenge stated to focus on two areas:

Create a solution that allows the transportation engineer to plan a subway route.
The transportation engineer should be able to easily compare two solutions to help them recommend the best option.

Software used by Transport Engineers

Benchmarking

I decided to benchmark tools used by transportation engineers. I observed demos/tutorials of these tools. I wanted to understand how these tools allow users to overlay data and create complex workflows. I also thought this was a good opportunity to learn from products used by architects and graphic designers since they allow users to draft designs, iterate, and compare solutions.

Remix.com

Provides real time data of distances, construction costs etc., while the design is being drawn.
Allows user to visualize layers of information.
Web-based. Works on a browser.

TransCAD

Allows user to visualize layers of data on a map
Data can be input informs of multiple entry styles; maps, networks, matrices etc.
User can open multiple windows simultaneously.

Optibus.com

Data driven
Provides a schematic of routes and calendar
web-based. Works on a browser.

AutoCAD

Used by architects and engineers for building designs
Designers can draft polylines, shapes and customize these
Allows designers to create multiple sheets.

User Needs

Identifying Key Requirements

The benchmarking helped me understand some critical requirements and user flows. Combining this with my understanding of the user pain points, I arrived at the following user needs.

User Flow

From Creating a Project to Exporting it; the Happy Path

Based on my understanding of user pain points and the benchmarking I created a user flow for a Happy Path.

Lo-Fidelity Wire-frames

Balsamiq to the rescue

I created low-fidelity sketchy screens for each step of the user flow. I used Balsemiq, a tool that allowed me to try out different compositions and layouts while focusing on the UX flow. I wanted the user experience to be simple and easy, where the transport engineer's focus remains on the data maps of the city for them to design, with floating UI components that contextually appear depending on which stage of the work they are in.

Final Designs

High-Fidelity

Having benchmarked various tools I decided to take an approach of creating a web based application which would allow the engineer to collaborate and share their workspace. Since the workspace had to be designed for different use cases it was sensible to make it customisable, and provide contextual controls for different stages of the user flow. Considering the tool to be so data driven,

I introduced the concept of AI based nudges. This AI would offer suggestions for best practices, and could be turned off. The control of the design and decision making would always remain with the user, but the AI could give certain smart suggestions which the user had the choice of accepting or rejecting.

I started putting my ideas into Figma and over a couple of iterations developed the following screens.

Creating a Project

The program opens on a browser and the ‘New Project’ dialogue box opens. The transportation engineer can select a location and the type of system they want to design for.

Considerations

The most recent map opened by the engineer shows by default on the search box.
The engineer can locate maps through a preloaded data base.
Since the application is loaded on a browser it can be shared with other team members and accessed from any location.

Work Space

The work space consists of panels over-layed on the city map which gets imported as a layer.

Considerations

Familiarity and Recall

The draw tool is located on the left and the layer tool on the right. This is done to follow patterns of design in other softwares which have such features. Familiarity over recall to allow ease of use for users.

Customizable workspace

The panels are floating and the workspace can be customised based on user preferences.

Dynamic Data Panel

The data panel would be empty since it gets updated dynamically as a user draws metro lines and adds stations

Import Traffic Data

Traffic Data is imported onto layers and is represented on the map based on the intensity of the traffic.

Considerations

Flexible Layers

Layers can be turned on and off to allow the engineer to work with as much information as they want

Design Scenario A

The engineer can use the tool panel to place stations, draw metro routes, add comments and labels.

Considerations

Dynamic Data Panel

The data panel starts showing simulated data of the chosen parameters based on how a user designs the route.

Contextual Tool Tips

A tool tip appears when the user places a station to display relevant data for better decision making

Note:

It is important to give documentation of how the algorithm models the simulation as well as offer a developer mode if the engineer wants to change or customize the algorithm. This would prevent the AI appearing as a black box to the user.

Design Scenario B

The engineer can create a second sheet and design a new Scenario. The smart suggestion option has been turned on and the program suggests certain improvements to the design.

Considerations

AI powered Suggestions and Nudges

The smart suggestions should provide information to the engineer regarding the parameter it considered to offer the suggestion.

AI powered Guardrails

Helps the user always consider the best practices and bylaws. User always has a choice to ignore the suggestions

View Schema

Auto-generate a schematic of the subway system which is particularly useful if the engineer is designing multiple lines which intersect and create a complex network.

Considerations

Manipulate Variable Values

The Schema panel allows the engineer to change default values related to certain design and operational decisions which may impact the parameters in the data panel.

Compare Scenarios

When the transportation engineeris happy with both designs they can choose to compare the scenarios by clicking on the Compare tab. This takes them to the compare workspace.

Considerations

Scenario Picker

The dialogue box allows the user to select as many sheets they want to compare

Compare and Compose

The ‘Compare’ workspace creates a composition with the selected design scenarios and their corresponding data .

This allows the transportation engineer to compare and arrive at an informed decision.

This composition can also be shared with important stakeholders as a medium to tell the design narrative and its implications driven by data.

Considerations

Storytelling through Data:

Compose the sheet to communicate effectively

Contextual Drawing tools

The draw tool panel is contextualized to the ‘Compare’ workspace, offering the engineer data visualization tools to easily understand and express the data.

Visualise Simulations on the Map

The software also simulates data on the map updating certain layers and the corresponding data.

Note:
This is a high-level conceptual design of the ‘Compare’ workspace and hence details regarding text and data is omitted.

***