Microsoft AirSim

Time Frame: February 2020-April 2020
Team: Individual Project
Methods: Observation, Wireframing, Visual Design, Prototyping, UI Design

About AirSim

Microsoft AirSim is a simulator tool for autonomous vehicles. It’s a platform for AI developers to test autonomous vehicles such as drones or self-driving cars without worrying about cost and real-world damage.

THE CHALLENGE

Microsoft AirSim is a new tool with minimal user interface. Its users need an onboarding process for configuration and set up.

Understanding the pain points

No GUI based interface

Microsoft AirSim is a simulator tool for autonomous vehicles. It’s a platform for AI developers to test autonomous vehicles such as drones or self-driving cars without worrying about cost and real-world damage.

Glitchy, it crashes

AirSim is a computationally heavy software and it is liable to crash.

Technical barriers

High technical expertise is required to navigate and use AirSim’s features.

This is some text inside of a div block.

Ideation and exploration

Based on these pain points, I sketched a few initial ideas for an onboarding process for AirSim.

Step-by-step tutorial

Video game style mission

Feedback

Feedback from the team...

Insights

Users with technical expertise

The user base of AirSim will have programming experience and will need to use APIs to control many aspects of the software.

User demographics are diverse

Different people of vastly different industries ( from agriculture to retail) and demographics will be using AirSim. Hence, the onboarding process needs to be focused on function.

High barrier to entry

AirSim in its current form is complex and is used mainly by academic researchers. It lacks its own interface and is a plug-in on Unreal Engine, a gaming engine.

Wireframing the solution

I created wireframes of a personalized onboarding process, in which users answer a few questions about their background and purpose of use to have a customized configuration of AirSim.

Second round of feedback

Second iteration of wireframes

Based on feedback, I added a screen directing users to a list of APIs at the end of the onboarding process.

A basic wireframe for the API List.

A high fidelity version of the API List screen in a light interface (later changed).

Branching user flows

Setting a style with Fluent

As AirSim is a Microsoft product, I ensured that my design followed Fluent design system guidelines. Although initially the screens were in light mode, I created a design language for a dark UI to match with the surrounding interface of Unreal Engine.

The final look