Selftrade responsive home page

Selftrade is an online share trading portal that has become one of the UK’s leading execution-only stockbrokers. Founded in 2000, it has won many accolades for its trading platform and the value it provides customers. The Selftrade business was taken over by new investors, requiring the development of a new Selftrade site.

Selftrade’s new owners expect to develop the business based on customer feedback. Hence, a flexible platform was essential, in order to cope with development that simply could not be planned in any great detail at the point the initial site was developed.

The key for Selftrade was a web portal that looked fresh and new, yet pulled together essential third party information such as real-time share prices and stock trading; historical performance data across a range of financial products; and continued to provide a platform for customers to debate and comment.

Key objectives:

  • a fresh, up to date look and feel to the site
  • connect with existing Selftrade community and develop the relationship
  • create a responsive, mobile friendly site
  • integrate smoothly with a number of information and data partners
  • prepare for future developments
Why Drupal was chosen: 

The previous website was written using a custom CMS which had proven difficult to maintain and hard to update content with as the site grew in size.

When Equiniti bought the site, they undertook a project to determine the best CMS system to build the new Selftrade with, with an absolute requirement that the system was neither a bespoke nor a custom written one. An open source CMS was a desired but not essential additional requirement.

Having investigated the major commercial and open-source CMS systems available, the decision was made to go with Drupal for a variety of reasons, the major ones being:

  • open source with an established community
  • a strong commercial ecosystem
  • a well planned roadmap for future development
  • support for mobile devices and responsive design
  • support for many web standards required to integrate with third party services
  • modular system to support custom functionality
Describe the project (goals, requirements and outcome): 

Goals

The prime goal for the new Selftrade website was to deliver a bold and modern design incorporating the updated branding guidelines together with support for responsive mobile functionality.

The site needed to integrate with Equiniti's Xanite share dealing platform using a custom authentication system and also a number of external news, price and information providers using a range of web standards such as Atom, XML and SOAP web services.

Financial compliance regulations meant a highly customised internal content management workflow with revisioning was required with "Draft", "Needs Review" and "Published" statuses managed by separate administrative roles each with their own dedicated content management dashboards.

The Qubit Opentag enterprise-class Tag Management Solution needed to be tightly integrated with the front end of the site to provide secure analytics and A/B testing functionality.

Finally, as the share dealing market is so competitive and time-sensitive, the site needed to respond very quickly to end-users so that page loads are barely noticeable.

Home Page

The Selftrade home page showcases many of the integrations built for the platform.

Selftrade - Drupal home page

At the top of the page, there is a custom popup which satisfies the EU Directive on Privacy and Electronic Communications that came into effect in the UK on 26th May 2012. This links to a dedicated page detailing Selftrade's cookie policy. This notice can be closed to save screen space, and this setting is persistent per user.

The next region provides access to the unified search bar which searches content from across the Drupal site as well as live share prices from the Equiniti EQXanite platform. There are also context-sensitive links to become a member and login or maintain your account and log out if already logged in.

The following region contains the latest curated news for investors using a responsive and touch-sensitive carousel. To the right is a call to action to open an account.

This region also demonstrates the Risk Warning system. This context sensitive block displays relevant risk warnings across the Selftrade site, as required by Financial Conduct Authority regulations. The risk warnings are maintained in a dedicated section within the back end of the site using a dedicated content type, and entity references are used to link these to the relevant sections of the website. When a particular risk warning needs to be updated to reflect regulatory changes - this change is immediately reflected on all related pages.

The next region contains two calls to action which highlight particular products or services that the marketing team wish to promote.

This is followed by the news & analysis bar which displays the top financial news articles with media in a touch enabled and responsive ticker. Each block links to the full article.

Selftrade - Widgets

At the bottom of the homepage, there are several widgets, prefaced by a real-time disclaimer.

The first widget displays a graph of the top 5 indices, currencies or commodities which are colour coded and selected by the user.

The second widget displays the top five risers and fallers for either the FTSE 100 or FTSE 250, as selected by the the user.

Finally, there is a third widget which highlights another share dealing news and advice provider.

Each of these widgets is responsive and the data is pulled in from the respective authorised technology partner. All three widgets are maintained through the Drupal backend.

Unified search

Selftrade - Unified search
At the top of all pages there is an AJAX powered unified search box.

When a keyword is typed into this box, a JSON powered query is sent to the Equiniti EQXanite platform to obtain a share or stock price if the keyword is a valid share or stock name or code.

If a result is found, this is highlighted at the top of the search results with a coloured icon representing the price movement and a link to the detailed stock page.

Another AJAX query is submitted to the Drupal site using the Search API system to search across public content types including news articles, questions and answers. Any Drupal results are then displayed beneath in a unified interface with direct links to the item of content in question.

News & Analysis

The News & Analysis section is a key offering of the Selftrade platform.

Selftrade - News section

Financial news together with in-depth analyses are aggregated from a number of key information providers, categorised and then displayed to the member or end-user, depending on their role and permissions.

Key providers of news and analysis include:

  • categorised financial news wire with featured photographs
  • video broadcasts from BRR Media covering the latest company announcements and displayed in a pop-up HTML5 media player for cross device and platform compatibility
  • Regulatory News Service briefings from the London Stock Exchange
  • Tips and archived investing tips from Investors Chronicle as additional benefits for registered members of Selftrade

All of these sources are imported as nodes on a regular schedule using XML and parsed with XPath. The content is then categorised into a number of taxonomies for display on the news & analysis section, as well as full-text searching on the site.

Question and Answers

A major feature of the Selftrade site is the member's "Questions and Answers" section.

Selftrade - Questions and Answers

This section allows for members to ask questions of their fellow members in a style somewhat similar to sites like answers.com where the question asker is able to mark a question as answered when it satisfies them.

Separate sections of the screen allow the member to pose a question, to view answered questions and to read through questions that have not been answered and offer an answer if they wish.

Frequently asked questions

Another important area of the Selftrade site is the Frequently Asked Questions section.

Selftrade - FAQ section

This section features curated questions and answers managed by the Selftrade administrative team. Some of the FAQs are provided by the support team to answer the most common queries, and others are promoted from the member's questions and answers section if they have been particularly popular.

A keyword search is provided to allow a site visitor to type their own question in, popular questions are highlighted on the sidebar, and questions are also grouped together by shared categories.

An accordion-style interface is used to show the question and answer pairs, and to provide a quick and intuitive interface for end users.

Authentication

We wrote a dedicated module to interface with Equiniti's custom authentication system based on secured cookies and a shared, encrypted, token. This module allows for single sign-on across the number of websites that power the Selftrade platform - including the Drupal front end, the Equiniti EQXanite share dealing service and the stocks and shares pricing website.

Once a member logs in, they are able to navigate between all of these sites seamlessly as the themes and CSS styles are shared across them all. Signing out on one site invalidates the cookie and so results in a log out from all sites.

High performance hosting cluster and content delivery network

Speedy performance of the website was a key requirement, and so we built several layers of caching into the development of the website.

Key technologies used included:

  • Nginx webserver configured for performance and as a reverse-proxy
  • Redis in-memory cache
  • MariaDB
  • Zend OPcache
  • PHP-FastCGI Process Manager (FPM) for superior PHP speeds
  • Entity cache
  • Advagg

We then worked with the Equiniti IT department to specify a resilient and high performance clustered hosting solution for the production website, leveraging the power of the MariaDB Galera Cluster and csync2 and lsyncd running under xinetd providing file and configuration syncing.

Finally, the entire system was placed behind the Amazon Cloudfront Content Delivery Network to serve static assets and media as quickly as possible and add an additional security layer to protect against Distributed Denial of Service attacks.

Outcome

The new Selftrade site was delivered with minimal interruption to share dealing customers. It is poised for further development to grow the Selftrade business in several directions.

The site has a fresh new look and is ready to develop in response to customer demand and market moves.

Future phases are planned to increase user customisation of the site and to enable widgets to be edited and rearranged on demand.

The site was so well received that we were commissioned by Equiniti to develop a similar website for the Saga Share Direct service on the same Drupal platform.

Organizations involved: 
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

Drupal 7 was chosen as the most stable version of Drupal core which also had the best support for contributed modules needed to integrate with a number of third-party services and partners.

Theme and Display

The Zen theme was selected as the most suitable HTML5 starting theme providing component-based CSS and a responsive, mobile-first grid design to build the Selftrade design with.

The Owl Carousel module and library is used to provide a responsive slider supporting both touch events from smartphones and tablets as well as mouse slide effects from desktop browsers.

jQuery Update is used to power more advanced Javascript functionality and transitions throughout the site.

@font-your-face is used to manage web fonts throughout the site following the branding guidelines. It is also used to enable fontawesome which allows for font-based and responsive vector icons.

Colorbox is used to provide lightbox functionality for photos and video news content, enhancing the usability of the site for visitors without adversely affecting the layout of the page to accommodate larger media items.

Display Suite is used to give fine-grained control over the display of fields on publicly viewable content types and to power node displays with multiple responsive columns required by the site design.

Views Accordion powers the FAQ display section improving the display of FAQ content and providing an intuitive interaction for users to reveal the answers to frequently asked questions about the Selftrade service.

EU Cookie Compliance together with some custom CSS is used to deal with the EU Directive on Privacy and Electronic Communications that came into effect in the UK on the 26th May 2012.

Workflow

The client, being in the financial services industry, had very strict requirements for content creation and moderation workflows to ensure that all legal guidelines were followed and enforced.

We used the Workbench and Workbench Moderation modules to translate their business logic into Drupal processes. The addition of the Diff module increased staff efficiency by highlighting the pieces of content that had changed between revisions and needed approval before publishing.

Wysiwyg module is used to enable CKEditor for content entry on the site with a customised profile to allow only style guide listed displays to be used.

The Styleguide module is enabled to give content authors and site maintainers a visual reference to the authorised site styles.

Login Destination is used to direct content administrators, editors and site members to their respective dashboards after login.

Navigation

We used the Superfish module to produce drop down menus which were responsive, accessible and screen reader friendly.

Menu Item Visibility and Content Access modules allow for different pieces of content to be shown to members and visitors based on their roles to help upsell services on the site by showing previews of enhanced content and functionality which are only available to full members.

Variables, Token and Token Variable were used to allow our client the ability to administer links to other sites easily between development, staging and production versions of the site without having to change many individual menu items manually.

Crumbs, the Breadcrumbs suite, is used to power intelligent and flexible breadcrumbs across the site which are context and context sensitive.

Quick tabs powers tabbed navigation used in various subsections of the site to group related content together and providing an intuitive display for users.

The Sitemap module is used to provide a constantly-updated, human readable and accessible sitemap for major content sections on the site.

Search Engine Optimisation, Social Media and Analytics

Path and Pathauto are used to give human and search engine friendly URI aliases across the site.

Redirect and Global Redirect modules are used to enforce a single authoritative URI for each piece of content and to track automatically generated path aliases as they may adjust to reflect edits to content, ensuring that embedded and incoming links always find the correct content.

The XML Sitemap module is used to provide a search-engine friendly XML sitemap of all content on the site, and to alert the major search engines, in particular, Google and Bing, when new content is published to the site to ensure rapid crawling and indexing of the content.

The Service Links and Forward modules are used to provide social sharing links for the major social networking platforms and "share with a friend" functionality on key content types and pages throughout the site.

Metatag module is used to provide enhanced metadata to the search engines and also to provide Open Graph and Twitter Card compatibility on the site so that socially shared content displays in the best possible way across all social media platforms.

The Qubit module provides a management interface for the Qubit OpenTag enterprise tag management system which is used in preference to Google Analytics for privacy and data protection reasons.

Questions & Answers Section

The Chosen, Answers and Flag modules are used together with Views and Rules to power the questions and answers section.

Search

Search API is used to power a customised search using the Views module integration across the Selftrade site.

Views, Views Field View, Views JSON and Views JSON Query modules are used to power the unified drop down stock and price search functionality which queries a number of external services as well as the local Drupal content from Search API.

Imports & Integrations

Feeds, Feeds Tamper and Web Service Client modules are used to pull news, video and share dealing tips content from a number of official content providers using RSS, XML and Soap standards.

These imported items are then categorised using the Drupal taxonomy system and displayed using Views, Colorbox and Crumbs.

Features

The Features module is used to package, manage and maintain discrete elements of site functionality as they are developed, updated, tested and moved between development, staging and production environments in a version controlled manner.

Universally Unique IDentifier is also used to include key menu items, blocks and fixed taxonomies in these feature packages.

Miscellaneous Modules

The crucial Ctools, Date, Entity API, Entity Reference, Prepopulate, Rules, Views and Webform modules are used as the glue for the site - powering context sensitive displays of data, relationships between content and a number of site-wide workflows and interactions.

Team members: