Introduction
The Atmos software tools are used to plan the flight path of the drone, and to process the data it collects. Presented below is the new UX and UI design system of Atmos’ software tools. The goal of the redesign was to improve overall usability of the software and to minimise accidents and or mistakes during flight planning and execution of flight missions.
A highly complex project spanning multiple years, managed end to end; from user research, prototyping, designing, through to testing and development.
Research
Various forms of both quantitative and qualitative research were conducted internally, and externally with our user base. From simple feedback surveys, to in person flight observations, user interviews, and user interaction observations. Our thorough research across multiple continents and languages lead us to a finalised set of insights we used to inform the development of the new platform.
Insights
A simplified summary; Users found many basic features missing in both planning and processing procedures. Users were easily able to make errors during flight planning which could have dangerous consequences. Users found certain procedure flows such as the pre flight checklist lacked efficiency. The great majority of users struggled with the software’s overall complexity.
Key Feature; Terrain Following where the flight is planned according to ground elevation automatically.
Interaction Hierarchy
From our user research and analysis of the existing product, it became clear we could significantly increase the usability and safety by specifically focusing on the Interaction hierarchy. In the old software the user is offered all of the options at the same time on the same level regardless of their need or intent to interact. The new design offers a user only what they need to see and interact with when required, offering features less frequently required layered deeper in the interaction.
A Red Route board defining the user priorities during flight planning.
Ideation
Red routing was regularly used during the ideation process to help identify, clarify, and understand the interaction hierarchies of critical features. A highly effective and flexible design methodology; Red routing enabled a clear path of focus and prioritisation, and most importantly regular alignment amongst stakeholders.
Consistent reference anchors and navigational pathways increased user efficiency and confidence.
Key Feature; The new project management overview.
A much cleaner and easier to use UX and UI for the post processing user flow.
Information Architecture
Above you can see the master UX flow; mapping out in precise detail every user behaviour, function, and feature connection within the app. This formed the core reference for wire framing and product pipeline planning.
User Testing
Multiple rounds of user tests were conducted internally and externally. Tests were conducted with a variety of working wireframe prototypes. Feedback was carefully documented and analysed, informing further design changes and testing rounds.
Some of the working wireframes used throughout user testing, UX review, and design iteration.
Design System
Our lean and highly modular design system paved a solid foundation for the roll out of new apps and the overhaul of existing apps. Below you can see how the interaction framework and design system have been used to build the Atmos Toolbox with the same consistent navigational pathways and branded UI design. Maintaining a sharp focus on reducing total components and increasing modularity allowed for a very efficient developer rollout.
The Atmos Toolbox; A utility app for the servicing and maintenance of the Marlyn Drone.
Team
Elmar van Zyl — Design Lead
Oskar Suhre — Junior Designer
Luke Slotjes — Intern
Hylke Faas — Developer
Sandar Swart — Developer
Sander Hulsman — Project Owner
Deliverables
High fidelity wireframes
Interactive functional prototype
Finalised component library
Design system guide
Tools Used
Figma
Figjam
Miro
Mural