News Website Redesign

Our client is a large business publication provider operating in a specific region and managing a news website and some social media pages. It does also have a printed version that is released once a week. Some publications are only available based on a paid subscription.

Besides, this company operates a few media projects on some aspects concerning economics of that specific region.

Since both the news website and the media projects had been created over 15 years ago, they no longer satisfied user needs, with both dated design and slow performance.

There were some internal issues as well, as the website and its infrastructure were based on outdated technologies and got updated in a disorganized manner, with almost no refactoring involved. This complicated matters when it came to the website support, so it was clear the entire ecosystem needed reworking.

When our client said we had to redesign all websites, we came to a conclusion it was virtually impossible to change anything in the UI on an as is basis. This is why we got the following approved with the client:

• We had to restructure the entire system and database.
• We needed to migrate the client side to Angular.

The entire architecture was to be designed from scratch, while still taking the existing system into account, so as not to lose the important features. After analyzing the tasks and the existing issues, we planned the following steps:

• Restructuring the database
• Porting the client side, i.e. the website UI, to the latest version of Angular in line with the new design mockups, keeping the existing business logic as is
• Migrating the server side to the latest versions of .NET and convert the application from MVC into Web API
• Recreating the additional services, such as publication planning, newsletter, push notifications, etc.
• Creating an appropriate infrastructure for the website functioning and process automation, which included NPM and NuGet packages, SQL Server, ElasticSearch, RabbitMQ, etc., using such cloud techs as Object Storage for storing media files
• Automating the new version deployment process for both sandbox and production servers
• Migrating the existing data to the new infrastructure overnight

System component logic

Database

Apart from changing the data schema, which included restructuring, indexing review, external key links, etc., we also redesigned the approach to how the code worked with the database.

In particular, we decided to leverage the EntityFramework ORM, which allowed us to migrate the business logic from the database to the code and automate the database schema update for further convenience in development.

Chart showing automated database structure update

In order to minimize the website's downtime when switching to the new infrastructure, we developed a utility enabling quick data migration from the existing database to the new one, taking all structure modifications into account.

Client Side (UI)

To rework the website design, we used up-to-date UX best practices. With the ever increasing number of users viewing websites from mobile devices, we designed each website as a progressive web application that looks like and works on a mobile device as if it were a native one. Each app is fully cached in the browser, with minimum network transfers basically limited to API and cloud storage requests for loading content, which means the website will be working fast even with poor connection.

We also configured server side HTML page rendering when a website is being loaded for the first time; this enabled faster initial loading with low connection speed and correct website link preview in social media posts. This also matches SEO best practices, as some search engines cannot process scripts correctly, while many of them see the loading speed as an important factor when ranging the pages.

To process internet access errors, we created a user notification system that issued No Internet Connection and Reloading warnings.

Finally, we configured global authentication, which means any user could get access to all websites after signing in on any of those.

Server Side (Web API)

Within quite a short time frame, we developed all services needed to run and maintain the websites, which namely included:

• Multiple Web APIs working as a data source for the client side and using such techs as caching, request validation, heath check, etc.
• Full text website search with ElasticSearch
• Logging useful events and errors with Elastic Stack
• Global error handling
• Authentication, including that through external providers via OAuth, and role-based and subsription-based controller method access restriction
• Working with services through RabbitMQ queues, e.g., pending task processing

To automate workflows, we created a few services for routing tasks, such as:

• Scheduled generation of XML files for RSS feeds
• Sending newsletters and push notifications
• Integration with banks, online cash registers, and fiscal data operations, including the case of recurring or automatic payments
• ElasticSearch indexing as new posts and articles get published

Infrastructure and DevOps

While planning and designing both architecture and infrastructure, we were working closely with the client's DevOps engineering team. As a result of such cooperation, we imported some pieces of code containing general business logic into NPM and NuGet packages, which allowed us to use them in various apps, websites, and services, while also simplified the development, updating, and testing processes and minimized errors.

To enable fault tolerance, we placed a load balancer with flexible management and automated server heath monitoring behind all websites and the infrastructure. All errors and events occurring on the server side got logged with Elastic Stack deployed on a dedicated virtual machine.

To store and manage source code, we used GitLab, which also houses the NPM and NuGet packages and manages production CI/CD. Finally, we used Octopus Deploy to manage the deployment process.

Chart showing the CI/CD process, from new component development up to its deployment in the production environment

As a result, we managed to create a quick intuitive news website with dynamic updates and modern design; we also developed a few lesser websites with global authentication. Thanks to PWA, we enabled quick loading and convenient UI for users of all types of devices. The time to load a page got reduced by 75%. Apart from customer satisfaction, this is also good for the SEO, as search engines regard time to load as an important criterion when ranging website hits, which is especially crucial for online media services.

Speaking of the server side or back end, we were able to keep all existing business logic and functionality, while having completely reworked the architecture, database, and code through up-to-date approaches and technologies. The new version development and deployment processes also became more flexible, while many routine workflows got automated, leading to simplifying system maintenance and development moving forward.

After we migrated the entire content to a cloud based storage, the loading time got additionally reduced, while restructuring the system and using modern technologies enabled reducing costs on infrastructure maintenance by 1.50x. With a load balancer in use, the system became fault tolerant and more scalable: disabling a single virtual machine, whether planned or unplanned, as well as peak loads, no longer affected the website performance on the users' end.