Reusable UI – UI as a service

Case study

Reusable UI – UI as a service

To provide a responsive user experience irrespective of the user’s device, it is essential for organizations to continuously monitor the User Interface (UI) of applications. Surrounded by easy to use applications and intuitive UIs, today’s consumers expect a seamless experience. With the latest trends in UI development, organizations can:

  • Increase customer retention by increasing the time spent by the user on the application/platform
  • Increase user productivity, translating to more users and a substantial increase in revenue
  • Increase customer acquisition by offering user experience as the key differentiator
  • Reduce support costs; well-designed apps work well without additional support

Requirements

Our client is a pioneer in global market research and data analytics, providing valuable insights about markets and consumers. With operations in multiple countries, our client offers data and analytics services to its customers in media, FMCG, and retail. For all the detailed data offerings, some are sourced from legacy systems; this makes it difficult to keep the design consistent across products.

Our client had new UI standards, based on which they were standardizing their applications. While it was easy to standardize their newer applications, they faced difficulties with legacy applications. In this scenario, our client had two requirements:

  • Design a new front-end application to replace one of their old legacy UI applications to conform to their UI standards.
  • Develop UI as a service, which can be reused in other business applications having similar requirements.

Challenges

  • The existing UI technology used to display the reports was old
  • The old UI design was incompatible with the latest designs
  • The old UI was counterintuitive and had performance issues

Solution

Imaginea offered to integrate the UI with the client’s application. Using this method, the UI becomes dynamic and different applications can be accessed by the end-user, based on their access rights. In this model, based on the user’s access rights, the front-end application connects to the relevant middle (microservices) layer and not directly with the back-end layer. This reduces the front-end dependency with the old back-end system.

Tech stack

How our solution helped

The new UI as a service increased application performance by 40%, achieved around 80% reduced time to set up and configure the new application, and a significant reduction in user onboarding time.

Overall approach

Our customers have a microservices-driven middle layer and a central authentication mechanism, which enables rights-based access to the end users. We leveraged the existing setup and created a front-end application using the latest Angular version (Angular 7), which will connect to a middle microservices layer for quick communication. The new UI will also access some of the core modules of the existing legacy UI that was built using ExtJs. The models used between front-end application and the microservice for data transfer remain the same. The change was the way the microservices layer connects to the back-end application. Whenever there is a need for a new UI, it is easier to set up a new microservice that understands the models of the back-end application.

The new UI was integrated into the main client.

Once a user navigates to the new application, a request will be sent to the authentication gateway, which will validate whether a user has access to that product. This validation will be performed using the existing central authentication mechanism.

If valid, the request will be forwarded to the microservice, which will then identify to which back-end it should connect. The JSON object properties used between microservice and back-end will differ for each business, but will remain the same between UI and microservice.

Results

  • The new front-end application conforms to the modern UI standards and design
  • Consistent UI across applications helped in quick onboarding of users
  • Time to set up and configure new application reduced from 22 weeks to 4 weeks
  • Application load time reduced by 40%, resulting in better user experience

Talk to us