Vexo Spikes are safe, durable and effective bird spikes that have been trusted for over 20 years around the world to protect building from birds. Their product is of the highest quality and can be found in a variety of buildings around the globe.
The objectives of the project were to:
- Bring the product: bird control spikes… to life!
- Deliver a responsive website that performs exceptionally on mobile devices.
The primary target audience are potential customers who are looking to purchase Vexo Spikes, who are seeking further information regarding the product(s) and credibility of the product(s). The secondary target audience is any organisation or individual looking for a solution to their bird problems.
- Custom SVG animations with both stroke animation and fill animation.
- Layout transforms appropriately based on content entered in the back-end CMS.
- Custom scrollbars.
- Full screen spread (with header, banner video and product categories) on all screen sizes except mobile where a full spread showcase image is used instead to fill the mobile screen.
- Custom and dynamic animations using CSS transitions triggered by class change using jQuery.
- Auto-play video on the homepage banner, whilst having separate lightbox video with YouTube video embedded further down the same page.
- CSS sprite animations that functions on desktop, tablet and mobile.
- Product feature “dot points” are custom and unique to each product (controlled by and editable by the custom Wordpress CMS back-end).
- Product feature “dot points” are responsive for all desktop sizes.
- Custom Modernizr file.
- Homepage animations to create user immersion.
- The layout and design remains proportional from desktop through to mobile on all device sizes.
- Multiple mobile device friendly layouts.
- CSS sprite animation to preview 180 degree view of the product CAD file before fading in a candid product photo with “dot points” opening pop-outs describing key features of the product on desktop view.
- Intelligent form validation using a red border to indicate invalid field inputs .
- Bringing a seemingly uninteresting product to life.
- Responsive design and development was a definite challenge due to the unorthodox nature of the user interface and layout.
- There were many decisions regarding how the animations and dynamic functionality of the website would function on responsive views.