Hybrid integration
platform

elastic.io

Introduction

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.

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.

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.

Approach

The customer came to Onix with a general concept of the new product page. After landing on the product page, the visitor should scroll down the page and view six main sections dedicated to particular benefits/features, with subsections in each, which would be accessible through an active action by the visitor.

The new design was intended to make the unique services offered by elastic.io really stand out in the over-saturated market of SaaS while highlighting the simplicity and ease- of-use of the products.

When it comes to choosing services for a business, most of the stakeholders are not really interested in ‘how things work’, but rather in how they will help their business flourish. The idea was to show the future customers of elastic.io how its products make complicated processes simple and easy.

Moreover, as the stakeholders are not always proficient in digital stuff, we intended to make the illustrations appealing to both people who can code and those who cannot. This approach is perfectly in line with elastic.io’s culture of openness, transparency, flexibility and immediate support for the customers.

Regarding the look-and-feel, it was decided from the onset that:

the design would need more air to be lighter and "milder" than the present website

except for the corporate orange color, there are no color palette restrictions

only one section/feature should be displayed on one scroll

All this should add simplicity to such a complex product.

Major challenges

We immediately realized that we are dealing with a relatively complex product with multiple technical features which are not easy to understand and appreciate at first sight.

However, we have been lucky to form a supportive, creative, and mutually encouraging team, exactly as was needed for this project.

Everyone at elastic.io, from the CEO Renat Zubairov to the development team members, with their clear vision and a passion for the technology, were willing to share their knowledge and provide us with all necessary materials in due time.

Olga Annenko became the product manager and collaborated with us on all aspects of the design and development.

In our turn, Onix team members were eager to analyze the information, process the knowledge, and synthesize it into a comprehensive artistic presentation of the sophisticated feature-rich processes.

The team was thus well prepared to face, and has successfully completed, several challenges:

Introduction to the hybrid integration platform

The new page must explain what elastic.io is about in the first place. The task is to clarify the concept of an integration platform as a service (iPaaS) by simple means.

It was actually a proof-of-concept/first milestone of the project. Onix had to demonstrate its creativity by molding the idea, company's values, and art into a dynamic presentation of elastic.io’s nature and functions. The first prototype, as the video shows, was about the cloud-based platform ‘connecting’ various software applications represented by logos.

The customers generally approved of the concept but felt it lacked the desired dynamics and the logical development of the ‘connection’ into tangible benefits for the users.

Thus we came up with the idea of scattered floating logos merging with elastic.io’s logo, which at scrolling flows down and transforms into Speed, Extensibility and Elasticity - three primary benefits promoted by elastic.io. This was successfully realized into what is now the header of the home page.

Visualization of complex technology processes

The section of the product page titled Deployment is dedicated to the explanation of data exchange among the various software applications connected by the cloud- based platform: elastic.io can be easily connected to cloud applications, existing on-premises IT estate, or deployed on-premises altogether.

The task was to show elastic.io working in various environments, starting from the easiest to manage and ending with multi-component systems, but always visually emphasizing the equal simplicity and efficiency of the platform’s operations. After dozens of rough drafts and high-fidelity prototypes, the designer’s work resulted in four motion graphics that clearly and vividly demonstrate how elastic.io is equally efficient for cloud applications and on-prem software.

Other examples

Speed illustration
Gantt chart

A minimalistic yet clear and impressive Gantt chart Illustrates the speed of integration with elastic.io’s pre-built connectors for mainstream business applications and high reusability of any integration component as compared to other services.

Explanations using screenshots

After the benefits explained by the means of motion graphics, other features seemed easier to illustrate with screenshots. However, these needed a good consideration as well, as the images required a smart logical way to display and accompany them with compact text. Moreover, each screenshot of the software must be viewed easily and in detail and must provide a clear idea of how the product works and what its benefits are.

We found a solution in switching between multiple tab-like topics, which is best illustrated by the Designer section of the product page.

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

Technology stack

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

We have managed to overcome the hardships implied by the product’s complexity and the required motion effects and completed and released the new landing page on a budget

Since the release, elastic.io has already seen an increase in the number of leads, the goal being to grow repeat visits, references and trial requests on the product page.

Elastic.io product page has become an engaging challenge, a creative quest, and inspiring experience for a whole team at Onix. The work enhanced our knowledge of integration platforms and improved our skills in the design and implementation of motion graphics.

What’s even more exciting, the project has paved a way for a valuable long-term cooperation: brand new pages are on the way!

Made with 💛by

Hybrid integrationplatform