After popular demand, American robotics company and drone specialist, Autel, have finally decided to add a flight control feature to their drone companion app; Autel Explorer. The new feature will remove the need for a physical controller, allowing the user to control flight directly from within the smartphone app.
After various user testing, the company received data that 78% of customers don't like the bulkiness of the physical controller and would rather control their drones using the smartphone app. Autel founder and CEO, Steve McIrvin, has approached me to design the interface for the feature in time for their 5 year company anniversary. The scope of the project is to ensure the feature fits seamlessly into the existing app and gives the user full control of flight, without cutting corners.
Research was extremely important on this project, since I knew very little about drones — I didn’t know how to fly a drone, I knew nothing about drone technology, and I had never heard of Autel or the Autel Explorer app. This would make it very hard to put myself into the users shoes and make meaningful design decisions. I had a big task ahead of me so I decided that the best plan of action would be as follows:
The secondary research was very successful, I focused on the technology, flight controls and the Autel Explorer app. By the end of it, I was highly confident I could safely fly a drone, and I had a solid understanding of the current Autel Explorer interface. Below are a few of my discoveries:
For the second part of my research, I decided to explore the competition to see how they were tackling the same design problem. To do this, I conducted a competitive analysis on 3 drone flight simulator apps. By testing the competition, I could gain a first-hand perspective. I could determine what works well, possible mistakes to avoid, and gain inspiration for new ideas. The analysis focuses on the usability, intuitiveness, and visual design of the flight controls. Here are some of the opportunities that I discovered:
Through my research I gained an in-depth understanding of flight control however, it was still unclear how to incorporate photography and videography as well as the new features I discovered in my competitive analysis. In order to do this, I carried out a task analysis.
The task analysis allowed me to step into the users shoes to understand how they would go about completing specific tasks. By understanding the steps involved to perform each task and their relationship with the interface, it would help me to select, implement and prioritise controls and features. Below are just a few tasks that I mapped out for the exercise:
After gathering and organising my research data, it was time to decide on what features and controls to include in the design. The feature roadmap helped me to collect and prioritise my ideas while keeping the product goal at the forefront of every decision. Any feature regarded as essential for safe flight was ranked as top priority.
Since I couldn’t run usability tests, creating detailed wireframes on the computer didn’t make much sense. For this reason, I created freehand low-fidelity wireframes in my sketchbook, as they are much quicker and easier. I created wireframes for all the key screens that I would be designing.
The wireframes helped me to organise the content effectively before inserting visual embellishments. Intuitiveness and usability were crucial for the designs success. I wanted to ensure that users found the feature natural and effortless to use. Once I was happy with the designs, I picked a few of my favourite layouts to develop for the UI phase.
It was now time to inject some life into my wireframes by beginning the UI design. One of the product goals was to ensure the feature was in accordance with the Autel branding, however, unfortunately I was not able to access their official brand guidelines. To get around this, I built a rudimentary style tile informed by the design of the Autel Explorer app and other Autel products.
All in all, I am very happy with the results! The design fits seamlessly into the interface, and contains all the controls of the physical remote controller without sacrificing much visibility. Below, I have laid out a few examples of my design solutions.
To see my designs explained in more detail, click the button below to view the FULL Virtual Joysticks User Manual.
Activating the feature is extremely quick and simple to do. The feature is designed to activate automatically when no remote controller is connected. This method is superior to a button or a switch, since it removes a step from the process, users don’t need to figure out how to initiate the feature, and it advertises its existence to otherwise unbeknownst users. Once a controller is connected, the feature is disabled and the remote controller takes precedence.
To make take off and landing safer and easier, I have implemented an “Auto Take Off” and “Auto Landing” feature. When it is safe to do so, initiating the feature will automatically ascend the aircraft to a predetermined altitude. Conversely, once in flight, it will automatically land the aircraft in its current position.
To make take off and landing safer and easier, I have implemented an Auto Take Off and Auto Landing feature. When it is safe to do so, initiating the feature will automatically ascend the aircraft to a predetermined altitude. Conversely, once in flight, it will automatically land the aircraft in its current position.
To make take off and landing safer and easier, I have implemented an “Auto Take Off” and “Auto Landing” feature. When it is safe to do so, initiating the feature will automatically ascend the aircraft to a predetermined altitude. Conversely, once in flight, it will automatically land the aircraft in its current position.
Guided by my research, I determined an optimum size for the joysticks while maintaining enough room around them to decrease the possibility of the users thumbs sliding off the edge of their mobile screen. To improve visibility, when a joystick is not in use while in the air, it will lower in transparency. The transparency will return to normal once the joystick is re-engaged.
Designing a system to adjust the gimbal was challenging and time consuming. I tried a variety of methods, including using a pitch slider on-screen, and using the volume buttons on the mobile device. Each solution had a variety of flaws. In the end, I decided that the best method was pressing and holding on the screen and then dragging up or down to adjust the pitch. Out of all my ideas, this method was the easiest and most intuitive.
Designing a system to adjust the gimbal was challenging and time consuming. I tried a variety of methods, including using a pitch slider on-screen, and using the volume buttons on the mobile device. Each solution had a variety of flaws. In the end, I decided that the best method was pressing and holding on the screen and then dragging up or down to adjust the pitch. Out of all my ideas, this method was the easiest and most intuitive.
In order to optimise control and comfort, the drone pilot can adjust the size and sensitivity of the virtual joysticks to suit their needs. My competitive analysis demonstrated the importance of personalisation in achieving maximum flight precision. Users can also improve their experience by customising the interface. This feature gives users the power to hide unwanted elements from the interface to reduce clutter and improve visibility.
