FIH
Improving the online web experience for International Hockey Federation (FIH)
Introduction
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.
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.
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.
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.
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.
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.
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.
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.
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 integrate 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.
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.
Redbull Photobooth
custom scalable solution that can eas...
Stubbs & Woottons
take customized orders by applying va...