AeroVironment CIS - Website Design Case Study & Strategy by SPINX Digital

(213) 894-9933 hello@spinxdigital.com

OVERVIEW

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.

Key Team Members

Sukesh Jakharia CEO
Greg Szimonisz Account Executive
Keyur Ajmera Lead Developer
Lisa Steward Director of Creative & Strategy
Jeffrey Lo Lead Designer
Ryan Gould Project Manager

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 a 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 lay out aesthetic goals.

Aerovironmentcis Discovery Image

Aerovironmentcis UX Startegy Image

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.

Aerovironmentcis Webdesign Test & Launch Image

aerovironmentcis-webdesign-casestudy-0

Before

aerovironmentcis-webdesign-casestudy-1

After

aerovironmentcis-webdesign-casestudy-2

Before

aerovironmentcis-webdesign-casestudy-3

After

aerovironmentcis-webdesign-casestudy-4

Before

aerovironmentcis-webdesign-casestudy-5

After

aerovironmentcis-webdesign-casestudy-6

Before

aerovironmentcis-webdesign-casestudy-7

After

aerovironmentcis-webdesign-casestudy-8

Before

aerovironmentcis-webdesign-casestudy-9

After

aerovironmentcis-webdesign-casestudy-10

Before

aerovironmentcis-webdesign-casestudy-11

After

By employing custom fields, we were
able to give website administrators access
to edit certain parts of the website while
restricting other sections ensuring the
website adheres to the brand guidelines.

CLOSING THOUGHTS

Thanks to our beautiful designs, seamless development, and inclusion of animated SVG graphics, we were able to clearly speak to the benefits of AeroVironment CIS’ innovative products while retaining user engagement through an intelligently strategized user experience.

VIEW SITE

Explore Our Related Expertise