Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Vardot on
TL;DR
Immediately at launch in Jan. 2019; the revamped Amman Stock Exchange (ASE) website witnessed a surge in traffic from organic mobile and tablet search in comparison with the same period last year.
- 61% increase in Organic Mobile Search and by 9% via tablet devices.
- Bounce rates reduced by 20% on desktop, 15% on tablet and 3% on mobile.
- 99% decrease in error rate.
- New visitors increased by 18%.
- Seamless automated feeds of market data from 12 sources.
------------------------------------------------------------------------------------------------------------
The Amman Stock Exchange (ASE) plays a vital role in stimulating the Jordanian economy.
The ASE seeks to provide a strong and secure environment to ensure the interaction of supply and demand forces for trading in securities in proper and fair trading practices and raising the awareness and knowledge of investing in the financial markets and defining the services provided by the ASE.
Their decision to build their digital platform on Drupal 6 was arrived at after careful consideration of their technical and strategic requirements.
By 2019; both technology and user behaviors had evolved and as such ASE partnered with Vardot to rebuild and reimagine the digital experience that their target audience demanded from them.
Visit the new ASE Drupal 8 site: www.ase.com.jo
Why Drupal was chosen:
We needed to ensure that the new digital platform will be rebuilt according to the best standards and practices out there. The ASE’s importance to the Jordanian economy cannot be overstated and as such we can only rely upon Drupal 8 as a platform, and Vardot as its experts. - Adel Abu Assaf (CTO of Amman Stock Exchange)
An Intelligent User Experience
Traders and investors appreciated the convenience that their smartphones and tablets afforded them in browsing the ASE website contents on-the-go.
The ASE realized that they needed to match their website user experience with what their users demanded; a mobile-first digital experience with impressive and intuitive design features.
Users were expected to read, manipulate, analyze and export all sort of market data visually via charts, tables and graphs without the need to change devices.
All of ASE’s UX features needed to be uniform and responsive across all devices at any given time.
An Upgraded Performance
ASE’s website needed to have a robust and reliable system that can integrate with multiple systems in order to provide the ASE website and users with essential financial and market information at all times without negatively impacting the website’s performance quality.
The ASE stressed the need for the site to handle spikes of traffic without compromising quality of performance (i.e.) page loading speed and decrease in error rate.
Another crucial need that impacted both resource management and performance was ASE’s ability to manage digital assets within the CMS itself.
Ongoing Support, Scalability, and Security
The importance of having a secure platform and protecting their information cannot be understated.
Drupal is world-renowned for providing best-in-class security; however, support for Drupal 6 was ended soon after Drupal 8 reached maturity and as such, they needed to upgrade to Drupal 8 to ensure a higher and more sophisticated level of supported security by the open-source community.
Moreover; thanks to the extensive framework that Drupal enjoys, ASE will have the ability to implement and introduce new features to their platform in the future.
A Multilingual Experience
In addition to the business owners that had their enterprises listed in ASE; investors from around the world were taking an interest in investing in those enterprises. ASE needed to ensure that their new website would cater to the needs of not only local traders but an international audience as well.
The new website had to be multilingual and a seamless experience across all devices.
The client was further impressed by the fact that we will be building their new digital experience using Varbase which will guarantee that the development time will be significantly shorter.
Describe the project (goals, requirements and outcome):
A Seamless Migration
The old ASE website hosted a massive amount of content in the form of financial records for publicly listed companies, as well as user accounts for various stakeholders who used to login to the website.
Careful measures were taken when we upgraded the website to ensure that the legacy data and user accounts were migrated safely.
Moreover, we enhanced the data structure in the new website.
Digital Asset Management
A website as important as the ASE cannot afford to have performance issues. One way of ensuring that performance quality remains consistently high is by upgrading their Digital Asset Management (DAM) process and tools.
ASE editors used to upload digital assets each time they needed them resulting in duplicate files that weigh on the CMS.
With their upgraded Drupal 8 media library, ASE’s editors can now:
- Upload each file once without repeating the process all over again.
- Index or categorize their digital assets to make them search-friendly; saving precious time for the editors.
- Reuse all digital assets whenever needed without choking the CMS with duplicate data.
- Edit images with certain design features such as cropping.
- Drag and drop digital files for a more efficient editing experience.
Empowered User
In the new website; every user will have access to a new account dashboard.
All users will be able to easily create and manage their portfolio/accounts from this customizable dashboard that is meant to boost user convenience. Users can personalize their notifications, display only relevant content and have quicker access based on their preferences.
The new website even allows users to manage and customize market data ticker.
Intelligent UX Design
Supported by user research and behavior analysis; our UX/UI specialists delivered an intelligent design that focuses on boosting functionality and user convenience.
The new user experience is customizable thanks to Varbase and enables the ASE to deliver a seamless multilingual website to all the relevant target audiences. Translations can be easily implemented and updated from the website’s admin interface.
Data Integrations
The new ASE website aggregates data from multiple sources and displays the information on the front-end seamlessly.
This data consists of:
- Real-time feed of market information (i.e.) stock prices, ask & bid orders and etc.
- Historical information (i.e.) corporate details, closing prices, bulletins and etc.
To guarantee that no delays occur while importing real-time data; feeds are updated via binary protocols. Historical data, on the other hand, is updated in a timely manner whilst providing triggers for other integrated systems to ensure data consistency.
Moreover; we gave the ASE admins the ability to manually override the previous data by uploading files directly to a parsed data directory.
Upgraded Performance
Due to the strategic and important role that the ASE website plays in the daily routine of traders and investors operating within the Jordanian market, we were tasked to identify technologies that optimize the website’s performance and ensure that downtime is minimized.
As such, the infrastructure was designed for high availability and redundancy using technologies such as MySQL replication, Memcache to handle the internal Drupal cache and Varnish as a reverse proxy.
Enhanced Data Visualization
Realizing the importance of a dynamic UX and data visualization to the end users (traders and investors who browse mainly via mobile), we utilized best-in-class interactive data visualization solutions from the Highcharts library.
The ASE now has highly customizable charts with sophisticated navigation and annotation. Analytics and over 40 built-in technical indicators.
Here are a few highlighted examples of charts enabled in the new ASE site:
A - Market Index Chart
The market index chart displays both real-time and historical data with the ability to customize views based on timelines. Users will also be able to zoom into the chart to identify particular indices.
Also; the chart can be downloadable in various formats such as reports and presentations by the users.
B - Company’s Historical Performance Chart
Users rely upon historical performance trends and patterns when it comes to trading and investing in a particular listed company’s stock. This chart can be easily manipulated by the user to display the relevant data needed.
Personalization criteria include the date, timeline, prices, trade volume, ability to compare with other stocks & the general index to name but a few.
Tabular Data Manipulation
Integration with Drupal Views was implemented for multiple data formats to take advantage of the Drupal cache system and make future edits to tabular data much easier to implement.
In addition; this integration allows for all relevant data to be exported to spreadsheets.
Integrated Services
Many 3rd party websites and mobile applications rely upon the ASE to provide them with critical data.
We provided the ASE with dedicated end-points that enable 3rd party systems to pull the required data needed.
Technical specifications
Drupal version:
Drupal 8.x
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
Varbase
Varbase is a website builder base distribution that combines powerful editorial features, mobile, lead-generation, SEO, social media integration, and beautiful bespoke designs. Varbase is packed with adaptive functionalities and essential modules.
Varbase was built to reduce the amount of time it takes any Drupal developer to build a high-quality website, it includes over 160 checklists item to implement best practices SEO, performance tuning, security considerations, and best practices in Drupal development.
Varbase is also built utilizing Bootstrap theme, and takes advantage of several Bootstrap-ready modules, all packaged with the base distribution.
Bootstrap
The Bootstrap theme is HTML & CSS, JavaScript framework that is used to create responsive website themes and outlooks. Bootstrap aims to make mobile-first web interfaces.
Data
Data module helps you model, manage and query related sets of tables. It offers an administration interface and a low level API for manipulating tables and accessing their contents. Data module provides Views integration for displaying table data and Drupal search integration for searching table content.
Feeds
Feeds is a pluggable system for importing or aggregating content into Drupal. We used the module to import data from across 20 sources needed to display information on charts and graphs.
Charts
Transform Data into Information. Charts are a very good way to visualize a lot of data in a way that can be quickly digested.
Views Data Export
This module is designed to provide a way to export large amounts of data from views. It provides a display plugin that can render progressively in a batch. Style plugins are included that support exporting in the following types:
- CSV
- Microsoft XLS (or really simple HTML understood by Excel)
- Microsoft DOC
- Basic TXT
- XML
Excel Serialization
This module provides an Excel encoder for the Drupal 8 Serialization API. This enables the XLS format to be used for data output (and potentially input, eventually). For example:
- Drupal 8's REST module can return data in XLS format.
- Views can output XLS data via a 'REST Export' view, or a
- Data Export view.
- Module developers can leverage XLS as a format when using the Serialization
- API.
Organizations involved:
Sectors:
Banking and Financial
