Hands-On Approach to UAV Website Design
Challenge
AeroVironment has been an industry leader driving innovation in the fields of automotive and aeronautical energy efficiency and unmanned aircraft systems for over 40 years. Recognized as being the largest supplier of small, unmanned aircraft systems to the Pentagon and to dozens of allied nations, AeroVironment is no stranger to life saving technology. Whereas their previous unmanned aircrafts were designed to save soldiers in the field, their newest innovation, Quantix™, coupled with their cloud-based analytics and reporting system, Decision Support System™ (DSS), is designed to save farmers’ crops. The drone uses five different lens lenses to asses plant health, photosynthetic activity, stage of growth, and plant anomalies so farmers can quickly and accurately monitor their crops health. Animated SVGs provide a subtle and very powerful way to increase the user experience and visually guide a user’s eyes to areas of interest on the site. Discovery With such an incredibly innovative product, we at SPINX Digital sought out to design a website that spoke to the technological superiority of Quantix™ and DSS without leaning too heavily on product specs, graphs, and numbers. We wanted to design a beautiful website that simply and clearly spoke to the benefits of these innovative products inlaid with beautiful imagery and truly enjoyable user experience, and this is how we did it. With such a complex set of products we knew it was incredibly important to conduct a thorough discovery process so we understood how these products work; allowing us to better articulate this information to site visitors. We spent a significant amount of time diving into the products and the competition to begin strategizing ways to set our website apart from theirs. Additionally, during our discovery meeting, we learned a great deal about AeroVironment CIS’ brand aesthetic. They come in with predetermined brand guidelines which--although can typically be seen as a constraint for designers--we find it to be creatively liberating for a client to be able to layout aesthetic goals.
Solution
UX Strategy The UX phase of the AeroVironment CIS website was focused on strategizing about how to present complex information, simply. We experimented with several UX techniques to find the best way to present information to users in a way that was easy to understand up front, but could grow in complexity as the visitor dug into a particular section. Additionally, with such a technical product, there was a lot of information to provide to users and we needed to break up this text into digestible pieces with complimentary imagery to provide some visual stimulation. This led to long scrolling pages, which can be timely to navigate for some users (if they need to scroll down a lot before finding the content they are looking for). To solve this issue, we implemented a sub-navigation on each page highlighting key parts of the page that users could quickly jump to. Build AeroVironment CIS had clearly defined brand guidelines which helped immensely in the design process. They had outlined colors, logo usage, and fonts before we began designing the site and those restrictions allowed us to expand creativity in other areas of design. One of those creative expansions we were able to do was the implementation of animated SVGs. In our case, we implemented an illustrated version of AeroVironment CIS’ Quantix drone that flies across the page as users scroll. Not only is this highly entertaining and engaging, but the flight path we used also leads users’ eyes to the next content section on the page. We’ve found this to be incredibly effective and a great way to keep users engaged and visually lead them to the next important content area. With well thought out designs and a solid UX strategy, the build process was seamless. Integrating the animated SVGs was a technical challenge, but nothing we couldn’t handle, and the results were stunning. Building the site on .Net allowed us to create a fully custom website with an extremely easy to use CMS, allowing for AeroVironment CIS to have control over all necessary sections of the new website. This doesn’t mean that AeroVironment CIS was given control over every aspect of the site. With .Net we were able to create custom editable fields, restricting what an administrator can and cannot edit. This provides enough control to be able to add/edit/delete content, but restricts them from doing something that could break the design of the website. Test & Launch After developing the new AeroVironment CIS site we spent countless hours testing it to ensure everything was working as planned. With such an innovative product and huge amounts of content available to users, we needed to make sure all content was being pulled from the database and populated on the appropriate page. Once the site was tested and everything was working perfectly, the site was launched on our hosting environment. This was followed by retesting the site once it was live to ensure nothing was broken during the transition from the dev environment to the live server.
Results
Once the site was launched, AeroVironment CIS found praise from both new site visitors interested in the product and internal stakeholders. Although this is a brand new project for AeroVironment, the AeroVironment CIS website fits within the AeroVironment brand guides and takes it to the next level through the use of animated SVGs.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.