Case study

Creating UX & UI of a portal for monitoring data visualization

Monitoring & alerting
Monitoring data visualization
UX
Full stack development
UX & UI services

Client type

A startup offering a platform for operational intelligence of digital infrastructure

Business goal

Design and implement a Portal UI for visualization of monitoring data collected by an AI-based real-time digital infrastructure monitoring platform

Our approach

  • Provide a team of frontend engineers & UX designers experienced in working with information-heavy network monitoring environments
  • Research benchmarks and propose solutions
  • Create a clickable UX prototype
  • Ensure proper data visibility
  • Design and implement the ultimate solution 
  • Apply an iterative and agile approach to software development
  • Work in very short iteration loops with feedback from end-users
Requirements

Business benefits

Requirements
  • Created a UX prototype: UX design phase helped reduce costs and ensure user experience in the product’s final design.
  • Improved user experience: effective monitoring data visualization made it easier for data center operators to detect potential problems.
  • Ensured performance: effective monitoring data visualization did not hamper the Portal’s UI performance.

Technical highlights

  • Developed Portal UI (frontend) and user management (front- and backend).
  • Created high-fidelity mockups and prototypes to test solutions prior to development.
  • mobX used instead of the usual Redux in order to minimize boilerplate code, and reduce rerendering while allowing individual components to govern their own connection with API.
  • Simplified integration flows with 3rd parties and other system modules/agents.
  • Visual component design allowed for quick customizations for each of our customer’s individual clients.
Requirements

Technology stack

https://d33wubrfki0l68.cloudfront.net/6c9cb8ea7363c3b52aa3b140d8a6144e9f606e03/2bbad/img/figma_logo.svg
https://d33wubrfki0l68.cloudfront.net/0e730d6b657aa8edfbd4f0954f263a5fee620a68/89c5d/img/react_logo.svg
https://d33wubrfki0l68.cloudfront.net/37f822810edacb1ff49d9818663702ddc5edd3b1/6bfd4/img/mobx_logo.svg
https://d33wubrfki0l68.cloudfront.net/9700d264a72dfd9e3cd8c5aa05c1f3cd843a464a/8a77f/img/ant_design_logo.svg
https://d33wubrfki0l68.cloudfront.net/e542f48e36088ac203f55cf288d373825b98acd6/65e74/img/d3_logo.svg
https://d33wubrfki0l68.cloudfront.net/de0f27b7f43335b5e3cc9ede2eb4d3276f29f2b6/2f309/img/typescript_logo.svg
https://d33wubrfki0l68.cloudfront.net/ee456fb6fb5415b9ababad7d98d8d62adbc85560/11876/img/highcharts_logo.svg
https://d33wubrfki0l68.cloudfront.net/2c9b765764582efcfb74f4d7e6ef91cd833ba412/683f7/img/nestjs_logo.svg
https://d33wubrfki0l68.cloudfront.net/7115edcd5185b8539fbd8fe6d0f77e0c73c50b36/dc6b6/img/mongodb_logo.svg
https://d33wubrfki0l68.cloudfront.net/69b07837ab7ab989899fdb05f0ab1a94d85534ce/13e0a/img/typeorm_logo.png

Need support with your specific case?

For more information see our Privacy policy