Screenshot of QGroundControl interface showing a planned drone flight route, featuring my updated UI design with streamlined navigation, clear workflow panels, and a real-time map display.
Screenshot of QGroundControl interface showing a planned drone flight route, featuring my updated UI design with streamlined navigation, clear workflow panels, and a real-time map display.
Screenshot of QGroundControl interface showing a planned drone flight route, featuring my updated UI design with streamlined navigation, clear workflow panels, and a real-time map display.

Flight Planning

Software application for drone and autonomous vehicle flight planning

QGroundControl is an open-source, cross-platform flight planning software for mission control and real-time telemetry. Usability testing with beginners and professionals revealed friction caused by complex navigation and cluttered layouts. I streamlined workflows, simplified navigation, and introduced customizable views, making flight planning more intuitive and accessible for users of all levels.

Role

UX/UI Designer

Timeline

4 Months

Tools

Figma

Team

2 designers, 1 data analyst, 1 PM

Problem

How might we make QGroundControl more intuitive for beginners while maintaining advanced functionality for professionals?

How might we make QGroundControl more intuitive for beginners while maintaining advanced functionality for professionals?

Outcome

The redesign streamlines navigation, improves feature discoverability, and enhances flight planning.

Design System

To ensure consistency and improve usability, I introduced a design system with clear typography and accessible colour standards. I chose Inter for its readability in technical interfaces, using a range of sizes and weights to establish hierarchy. The primary brand color—a vibrant purple—was applied to interactive elements like buttons, links, and inputs, meeting WCAG contrast standards. This system streamlined design decisions and created a cohesive user experience.

Typography and color style guide for QGroundControl design system. Displays Inter typeface in various styles, including Display Small in Regular, Medium, Semibold, and Bold weights. Shows the primary brand color, a vibrant purple, with WCAG contrast ratios, applied to interactive elements like buttons, links, and inputs.
Typography and color style guide for QGroundControl design system. Displays Inter typeface in various styles, including Display Small in Regular, Medium, Semibold, and Bold weights. Shows the primary brand color, a vibrant purple, with WCAG contrast ratios, applied to interactive elements like buttons, links, and inputs.
Typography and color style guide for QGroundControl design system. Displays Inter typeface in various styles, including Display Small in Regular, Medium, Semibold, and Bold weights. Shows the primary brand color, a vibrant purple, with WCAG contrast ratios, applied to interactive elements like buttons, links, and inputs.

Redesigning the Mission Planner’s Structure

Before

Although the interface showcases different sections, these all appear as floating panels which can be distracting for the user and hard to identify where feature live on the interface.

AFter

Redesign the structure of the mission planner window to include 5 distinctive sections including: Navigation Bar (highlighted in pink), Status Bar (highlighted in yellow), Map Interface (highlighted in gray), Tool Bar (highlighted in red), Control Panel (highlighted in blue), and Flight Tracker (highlighted in green).

Key Decision Decisions

© Crafted by Amy Li with copious cups of tea

© Crafted by Amy Li with copious cups of tea

© Crafted by Amy Li with copious cups of tea