Back
Expertise Overview
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.
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.
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.
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.
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.
Keep an eye out for awesome web content heading straight for your inbox!