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 User Interfaces (UI), 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 any 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, and hence, it’s hard to keep the design consistent across products.

Our customers 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 customers 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, so that it can be reused in other business applications having similar requirements.

Challenges

  • The existing UI technology used to display the reports was very 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 UI with the client 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 backend layer. This reduces the front end dependency with the old backend system.

Tech stack

How our solution helped

The new UI as a service increased the application performance by 40%, achieved around 80% reduced time to setup 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 remains the same. The change done here was the way the microservices layer connects to the backend 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 backend application.

This 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 done using the existing central authentication mechanism.

If valid, the request will be forwarded to the microservice, which will then identify to which backend it should connect. Now, the JSON object properties used between microservice and backend will differ for each business, but it 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