FIH

Improving the online web experience for International Hockey Federation (FIH)

Introduction
To FIH

The Fédération Internationale de Hockey, known as FIH, is the international governing body of field hockey comprising of 137 nation members.

Hockey World Cup 2018 was the biggest event in the organization’s history with over 3 million viewers in Asia alone. They wanted to launch a more powerful web presence before the event to be the digital companion of viewing experience.
https://slicestart.se/wp-content/uploads/2020/03/fih-banner@2x-min.jpg

Challenges and goals

We had to deliver fully tested QUALITY website in a tight timeframe of 3 months before the World Cup started on November 26th. On the front-end side the goal was to create a platform that supports different content types, widgets/components, DYNAMIC content page creation with the ability to iteratively adopt changing requirements without breaking the architecture. FIH was clear in their vision and expectations from the new website. To make the website digital companion for all things Hockey, they wanted increased user engagement, usability, discoverability, while providing modern user experience (UX). The architecture of the website needed to be scalable, cut costs, and be flexible while following GDPR guidelines. We helped set up cloud migration and DevOps CI CD pipeline to improve deployment times.

We became their
extended team

Our team worked closely with their tech team on user research to understand what users want and need. This research helped us choose the right features and in designing a user experience containing these features. After the successful launch of the site, we have now become an extended team of FIH.
https://slicestart.se/wp-content/uploads/2020/03/dsfsdfdfsdfs.jpg
https://slicestart.se/wp-content/uploads/2020/03/overview-banner@2x-min-1.jpg

Result

We successfully launched the fully tested and performant site before the World Cup. FIH was able to gain traffic and increase the number of repeat readers through subscriber count. The site was performant to handle over thousand visitors during the World Cup final.

The site has garnered rave reviews and as a side effect resulted in word of mouth business generation for us. We supported FIH through World Cup and are now continually supporting them through other tournaments.

Smarter Publishing

Content authors gain more control with the UI/UX decoupled from the CMS. This helps authors control the look and feel of the content without coding work from designers and developers.

Better Scalability

The entire CMS application will be hosted on a cloud platform, which scales up or down automatically based on business needs.

Zero Downtime

The entire application build was completely automated with Jenkins. This will ensure no downtime during new deployments.

Lean UX and Agile Development
for faster delivery

We only had three months to launch a completely revamped web presence. Usually in projects like these when the website already has millions of visits a month, three months or more are spent on UX and user research alone.

We employed Lean UX principles with Agile development to deliver UX driven development. We made sure all stakeholders, UX team, and technical team were working as one cross-functional team.

Our goal was to research and test before, during, and after development.
If we identified friction in a UI, it was resolved before it even went into development. By being able to test throughout the process, we were able to reduce our risk and increase the speed for time-to-market.

We used design spikes in-between sprints to provide us the freedom to do the research we need to do for a particular feature set. It gave us the time to think about the big picture. The design spikes consisted of usability testing, user research, and prototype building etc so that every feature and page was designed according to users’ needs and goals.
https://slicestart.se/wp-content/uploads/2020/03/sprint@2x-min.jpg

Headless CMS with
performant front-end

Our client had built the site on legacy architecture and invested heavily in licenses for Enterprise Web Content Management (EWCM) platform for managing its business-critical content assets. There was a need for improving the current CMS platform in terms of reducing dependency on developers and improving application performance. To address these challenges, our team of experts had recommended the client to migrate it to a headless CMS delivery. This approach helped realize the advantages of decreasing vendor dependency in addition to reducing software license costs. Headless CMS also gives scalability by decoupling CMS and Front-end. We wanted a common language and repository for creating and reusing components. If a new developer joins the team, we wanted to point them at a single page of documentation that explains how to get up and running — and to start building apps the same day. We chose to architect the site with component driven React front-end.
https://slicestart.se/wp-content/uploads/2020/03/headless-cms@2x-min.png
https://slicestart.se/wp-content/uploads/2020/03/fihscreen1@2x-min.jpg

Our new architecture has the
following characteristics

We separated the core application infrastructure and UI from data by using App shell architecture. All of the UI and infrastructure is cached locally using a service worker so that on subsequent loads, retrieve the necessary data, instead of having to load everything. We chose the caching strategy so that we show time-sensitive data like scores, match results, latest news, as fresh as possible, while match images or article content were updated less frequently.

Server-side rendering

We rendered the entire HTML server-side in React. We filled it out with as much data as possible (such as the user’s email address) so the user sees a complete UI even before Javascript loads.

Load libraries separately from application source

With our new custom architecture, we were able to load all our libraries from popular CDNs where it’s highly likely that the user already has them cached. Additionally, when we push a new version of our app, the users don’t need to re-download these libraries.

Lazily load anything and everything we can

As we found out in our analysis, some libraries are very expensive to load. Fortunately, they aren’t required for first render to show anything meaningful to the user. So we are loading them using async script tags at the very end of the page.

Responsive progressive web-app like site

Mobile is the biggest source of traffic for FIH. We aimed to create a mobile web experience that matches native app experience. We decided to go in the direction of responsive progressive web-app by following Google’s guidelines.
https://slicestart.se/wp-content/uploads/2020/03/decoupling-mobile@2x-min.jpg

Testing client side

At Simform, we care about testing! It contributes to reliable, maintainable code, and makes software easier to maintain in the long run which reduced the overall ownership costs.

Most of our competitors focus on testing their servers and APIs. But server-side testing is not enough. Since websites have Javascript/Ajax enabled, measuring performance from server/API level is not enough. Even poorly written javascript code can majorly affect the performance of the app.
First, let's consider the metrics to measure. Few of the important metrics that should always be considered are:

+ Response time which could include Javascript file load time, Image load time, CSS file load time, Content Download time etc.
+ Number of HTTP Request and HTTP Response status.

We used JMeter WebDriver Sampler with Selenium to test client-side performance. We create custom scripts for different use cases and create a threshold for various metrics. Jenkins was used to integrating tests to run tests with each new build. As a result - moving to the new architecture was a huge improvement. Our time to first render dropped considerably, from almost 8sec (90th percentile) down to about one second. We also already received great feedback from our users.
https://slicestart.se/wp-content/uploads/2020/03/Capture235.jpg

Successfully migrating
the older site

Migrating sites with thousands of pages is always a huge challenge from SEO and marketing angle. We worked with their technical and marketing teams on the site migration plan. This involved doing thorough technical SEO audit and making sure the new site not only stays consistent but improves on the technical SEO. In the older version of site, FIH team had a tough time managing their content library as it gave them limited choice. Our key objective from the start was to allow CMS users to utilize the power of content that best suits their workflow. We had to design CMS so that content managers and site moderators can utilise all the content assets they had by creating powerful content widgets with dynamic pages. Component driven architecture from React.js and headless CMS architecture made it easier for us to give flexibility to content managers and moderators. Usually the UX for these users is neglected but we worked closely with them to ensure it came out as they had imagined. At the end, we were able to deliver a flexible CMS that was both powerful and fit users’ workflow.

Cloud and DevOps engineering for
better and faster performance

Simform is an Amazon AWS partner and to handle huge spikes in traffic while providing low latency, we decided to use AWS. We use Amazon Elastic Compute Cloud (Amazon EC2) instances to run the site, and Amazon CloudFront as its content delivery network (CDN), serving content to 100,000 daily visitors to the site. ElastiCache is used for in-memory caching and Elastic Load Balancing provides load balancing. We also used Amazon S3 to store videos and Amazon EC2 to run the system used to manage the video content. Amazon Elastic Transcoder converts FIH video files from source to different formats for viewing on a range of devices. We managed the AWS Cloud infrastructure using AWS CloudFormation, using it to create and manage a collection of related AWS resources, provisioning and updating them in an orderly and predictable way.

FIH has experienced cost savings by using the AWS Cloud rather than a traditional data center. They have also saved time on infrastructure maintenance. “Time is our most valuable resource,” says, CTO. “If we had an in-house data center, it would take three to five days to provision a new instance, With AWS, it only takes us three to five minutes.” Our DevOps team worked with their tech team to set up CI/CD process for faster releases. Set up started in the lower environments, and included a CI/CD pipeline, to aid the deployment process. Incorporating Continuous Integration using Jenkins framework added value not only to the delivery quality but also to the process efficiency.
https://slicestart.se/wp-content/uploads/2020/03/utilizing-diagram@2x-min.jpg
https://slicestart.se/wp-content/uploads/2020/03/dsdasda.jpg

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2020  Slice Start Software Solutions AB. All rights reserved.
Designed, Developed and Maintained at Slice Start Labs.

Translate »