Olga Annenko, Marketing Manager at Elastic.io, approached Onix with the idea of a massive re-design, or rather new design, of the landing/product page for their SaaS. It was stipulated from the beginning that the project should include several motion graphics to illustrate certain technical concepts and that the product page should be built with Wordpress’ capabilities and limitations in mind.

manager

Olga Annenko

Marketing Manager at Elastic.io

The task instantly seemed interesting. Elastic.io presents a new generation integration platform serving large corporations and mid-sized businesses. In just 4 years of its existence, over 6,000 individual users and companies of different sizes have appreciated the benefits of its various products. The opportunity to contribute to the further promotion of the services and growing the already vast body of customers sounded like a privilege.

Just before the offer, Onix designers had dealt with a dynamic product page for ConceptSauce and a luxury shoe store with 3D configurator, and were eager to enhance the experience.

However, we suggested that we should separate the design and development stages of the project; this approach, in our opinion, improves both the speed of work and the quality of products. Starting with design, the team decided to break the project in a more granular way: to craft the features’ designs individually and in the end bring them together like interlocking bricks.

Background image

For whom
this product is

Elastic.io’s products help businesses to spend less time on gathering data together across the entire organization, and instead, have enough time and resources to focus on using this data to improve business operations or to develop new products and services.

When developing the landing page, we were keeping in mind the needs of two types of visitors: IT professionals looking for tools to optimize their work, and less tech- savvy entrepreneurs in search of digital strategy initiatives for their business.

Background image

Implementation of the motion effects

Upon completion of the design, Onix was further entrusted with integrating it with elastic.io website. The landing page required dynamics and non-standard approach in front- end development, and we pride ourselves on the successful realization of virtually all of the designed features.

The development, like the design, was divided into tasks based on the number of elastic.io’s benefits featured on the landing page.

We launched with the most challenging part - the hybrid integration platform animation. It did take longer than the other parts and required more revisions than anything else. In the process, we even had to give up one of the designer’s ideas for usability reasons, but instead ensured a neat parallax effect and smooth animation at scrolling at all desktops, in all browsers.

Result

result-laptop

Technology stack

tech-stack-1tech-stack-2

For the implementation, Onix developers were using ScrollMagic library, LESS CSS and jquery.