By 
Overview
- Led the development team behind the launch of www.artemisfunds.com.
- Multi-region and multi-locale website, compliant with investor type FCA regulations.
- Built on Sitecore Experience CMS platform and a custom responsive user interface layer.
- Integration and display of near-realtime Fund & Shareclass performance metrics.
- Componentised UI layer driven by SystemJS and bespoke build system
Introduction
I recently wrapped up the launch of www.artemisfunds.com for Artemis while at digital agency ORM. Artemis are a great brand, who really stand apart from the crown in the investment banking sector due to their use of bright illustrations and strong brand aesthetics.
I led the technology team delivering the site, carrying out duties such as client liaison and stakeholder management along with day to day coding of the frontend.
The site is a complex beast due to the multi region/locale requirements, Sitecore componentisation and the Financial Conduct Authority requirements for investment banks, but I am pleased with how the site turned out.
Website features
Fund details and charting
A core requirement for the site was to allow visitors to browse the vast array of funds managed by Artemis and also display up to date fund details and performance metrics.
Using a custom developed integration with a third party provider, up to date Fund and Share class data is displayed throughout the site along with commentary by fund managers. The charts are responsive and can be viewed across all devices.
Accompanying the Fund chart data is a Fund Explorer that allows all the Funds and share classes to be filtered and searched using faceted navigation techniques.
Audience restrictions and social sharing
A little known requirement to those outside the investment banking industry is that the Financial Conduct Authority (FCA) require organisations such as Artemis to know the type of investor/audience prior to being allowed to provide investment advise. This can cause real problems when attempting to build a investment bank website, since the content needs to be published and tagged to specific audience types.
As such the site features a sitewide audience selector that restricts and modifies content based on a user selecting an audience type on first visit. This combined with the multi-region and locale requirements make for a very complex matrix of content that is managed behind the scenes in Sitecore CMS.
Custom routing and best effort redirects had to be implemented in order to allow sharing on social media.
For example if a page that is visible to UK private investors is shared on LinkedIn and then a user who is a German Professional Adviser follows the shared link, our system identifies whether the page is available to both audiences and then routes to the correct audience specific address for the page.
Browser duotone effect
The Artemis brand expression on the website wanted to use a custom duotone effect across many photos and illustrations throughout the site, most of which needed to be CMS controlled.
I devised a great solution whereby the duotone effect is applied in the browser using some custom Javascript and Canvas effects. This allows the content authors to upload imagery without concern for the effects applied on the website
On page load a custom script finds images tagged for the effect and then processes them all in parallel using web workers (in order to not lock the user interface) and then inlines the newly processed image data as a data URI. This method ensures CSS and page geometry are not affected but also means it can fallback to the standard image if JS is disabled.
Componentisation using SystemJS
Sitecore is a component driven CMS, and it tries to provide content authors with as much control as possible with regard to what components are composed together on any given page. This can make frontend development difficult since rich UI components can exist any number of times on any page.
We devised a solution to this problem by creating a custom SystemJS driven script loading system whereby components can instruct the CMS to load custom Javascript scripts, and SystemJS ensures the scripts and their dependencies are loading in the most efficient manner.