Mapware Fly Design
TL;DR
Mapware sought to design and build a mobile drone flight planning and automation application. This application would address known pain points with existing software and gain a footprint in the mobile application marketplace.
The project goal was to deliver a functional and usable application within an aggressive timeframe.
Although this project posed challenges such as a lack of initial requirements prior to development start, extremely tight business-driven deadlines, and technical hurdles, the v1 Android tablet application has been delivered to the Google Play store and has a 4.3 star rating. The team is currently developing feature enhancements.
The Process
Discovering the problem
Prior to starting this project, I was unfamiliar with automated drone flight planning. I had to become educated quickly.
Getting out in the field
Luckily, I had access to an internal team member who happened to fall within our target audience for the project. I scheduled a contextual inquiry with this team member and then I traveled to his location, observed his end-to-end process, asked questions, and took notes. This was helpful so that I could acquire a sense of the general steps, technology, and particular pain points involved in planning and flying automated drone missions.
Carrying out an automated data capture mission
Learning more, from more people
After taking a crash course in flight planning and mission execution via contextual inquiry, I designed a discovery survey to gather more information from a larger sample size around general process, pain points, and experiences with competing products. I collaborated with project stakeholders to finalize the discovery survey and posted the survey link to the Commercial Drone Pilots Facebook group, and the r/dronemapping subreddit. With this approach, 29 people completed the survey in a relatively short period of time.
An affinity diagram of the survey results
Talking to drone pilots
As part of the discovery survey, I included an option for respondents to provide their contact information if they were willing to chat more about their experiences. Fortunately, multiple individuals provided their information. I recruited a handful of drone pilots for video interviews to further dive into their workflows.
Checking out the competition
When bringing a new product to market, it’s critical to have an in-depth understanding of the competition and the value that they are providing to your target audience. I worked with the Product Owner to carry out a competitive analysis of key competitors in the space. We documented the findings in an Airtable base for easy collaboration and sharing. As a part of the analysis, I completed dissections of various competitor products to document their functionality in detail.
Airtable is a great tool for tracking competitor data
Screen by screen dissection of competing products
Defining the mental model
Articulating the drone flight planning and execution process
Boxes and arrows were at the start of this phase. I mapped out the steps observed from the discovery phase in the form of a task flow. This artifact was communicated to project stakeholders and used as a foundation for later product ideation.
A task flow articulating the drone mission planning and flight process
The board from a proto-persona workshop
One of the finalized personas
Defining our target audience
Based on user data, a series of personas were constructed to help anchor our team’s understanding of the target audience. A v1 group of personas were drafted in a workshop that included project stakeholders and internal sales personnel.
A note...☝🏻
Remember how I said this project had a lack of initial requirements prior to dev start? In an ideal world, I would have allocated time for UX discovery prior to providing requirements to any development team. However, that was not possible with this project - and it posed some real challenges. I had a week between learning about this roadmapped product and the development start date. An external development team was given a written Statement of Work (without design requirements) prior to my involvement with the project. This was outside of my sphere of influence at the time. So, a lot of these discovery methods were exercised in parallel with initial (SOW-based) development. In this very real-world scenario, I was handed a pile of “UX debt” and had to make it work.
With that said, let's read about DESIGN! 🚀
Designing the solution
Ideating a potential workflow
A high-level user flow diagram was created to show how a potential product could facilitate the user goals identified in previous research. This diagram began at a lower level of fidelity and became more granular after feedback-based iteration cycles.
An early iteration of a user flow for the Mapware Fly application
A later iteration of a more granular user flow
Sketching and low-fi wireframing
In parallel with some of the discovery work, I began creating a set of low-fi wireframes to get a sense of information architecture and hierarchy within the application. A goal for the design was to maintain consistency with the company’s core product, which accelerated some of the initial UI design work (since I could repurpose a few design components that exist in another Mapware product). The wireframes followed the initial user flow generated as part of product definition. Feedback was gathered from internal project stakeholders and target users.
Low-fi wireframes created in Figma
Showing the wireframes in action
Once the low fidelity wireframes were mocked up, I created an interactive prototype to showcase the designs in the context of tablet interaction. This prototype was shared with target users and project stakeholders for feedback and iteration.
Setting up for design efficiency
An atomic component library was created to increase efficiency of design and development handoff. Various "atoms" were sampled from a larger Design System to create product-specific "organisms."
Component library created in Figma
Pushing the design forward
After collecting feedback on the low-fidelity wireframes, I felt confident to begin increasing the visual fidelity of the designs. I carried out a few iterative design cycles and landed on a set of high-fidelity wireframes that became the source of truth for product requirements.
High-fi wireframes created in Figma
All of the wireframes
Evaluating the solution
Validating the prototype
A series of feedback sessions were conducted with target users to evaluate and validate the high fidelity designs. This helped to validate the user flow, visual design, information hierarchy, and proposed functionality of the application. However, this product is not designed to foster a purely digital experience. This is a drone flight planning and control application. This means that it must work in tandem with a very physical object in an outdoor environment. To this end, the team released functional prototype builds of the application for testing. This was our first opportunity to validate the application’s real world usability outside of internal QA testing. We recruited testers willing to try an experimental piece of software with their drones and followed up with post test feedback sessions. This data further informed design iteration and feature improvements.
Behold, Mapware Fly!
Personally field testing the application with my DJI Mavic Air 2 drone