File: /home/imensosw/www/imenso.co/imenso-case-study-2/muhakemat.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Case study</title>
<link rel="icon" type="image/png" href="../images/favicon.ico">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" media="all">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<link rel='stylesheet' href='css/styles.css?v=2' media='all' />
</head>
<body>
<nav class="navbar fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/brand-logo.png" alt="logo" /></a>
<div class="ms-auto">
<a href="javascript:;" class="btn btn-bordered js-action">Discuss a Project</a>
</div>
</div>
</nav>
<section class="t-burger banner1">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto text-center mt-5 cs-banner-heading">
<div class="banner_sub d-flex mt-4 justify-content-center">
<span class="shade">Case study</span>
</div>
<h1 class="mt-4">Business intelligence dashboard for legal industry.</h1>
<!-- <h1 class="mt-4">Contract management and due diligence system.</h1> -->
<ul class="cs-client-info">
<li>Industry: <strong>Legal</strong></li>
<li>Country: <strong>Turkey</strong></li>
</ul>
</div>
</div>
</div>
</section>
<section class="b-burger pt-5">
<div class="container ">
<div class="row cs-banner-img">
<div class="col-lg-10 mx-auto">
<img src="images/muhakemat-main-1.png" class="img-fluid" alt="image">
</div>
</div>
</div>
</section>
<section class="b-burger custom_bg">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto">
<div class="">
<p style="font-size:26px; font-weight: 500;">The goal of developing a business intelligence dashboard for the legal industry is to <span class="underline-2">empower legal professionals with actionable insights</span>, foster efficient decision-making, and enhance the overall effectiveness of legal practices through the strategic use of data visualizationand analytics.</p>
</div>
</div>
<div class="col-md-8 mx-auto common">
<h4 class="mt-5 mb-4" style="font-weight: bold;">The core challenges.</h4>
<ul class="inner_list main_points">
<li style="margin-top: 20px;"><span class="high_black">Dynamic layout creation: </span> Empower users to tailor their own layout according to their specific needs and preferences.</li>
<li><span class="high_black">Min-Max value algorithm: </span> Adjust the default behavior of charts to effectively accommodate small values in relation to significantly larger ones.</li>
<li><span class="high_black">Nested filters: </span> Establish a hierarchical or layered structure for refining data, enable users to save filters for future use and prevent applied filters from being reset on page load.</li>
<li><span class="high_black">Data transform algorithm: </span> Organize extensive raw data into a format tailored to meet the specific requirements of the chart.</li>
<li><span class="high_black">Export reports: </span> Generate a dynamic report based on selected charts, KPIs and specified filtered records.</li>
</ul>
</div>
</div>
</div>
</section>
<section class="burger">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto">
<p style="font-size:26px; font-weight:500;"><span class="sm_main_heading primary_heading">Solution</span>We have developed advanced data visualization tool that to represent complex legal data in an easily understandable format. This tool equipped with a diverse array of charts, enabling the <span class="underline-2"> graphical and visual representation of data</span> for enhanced clarity and interpretation.</p>
</div>
</div>
<div class="row">
<div class="col-md-8 mx-auto common">
<!-- <h4 class="mt-5 mb-4" style="font-weight: bold;">Not just order management.</h4> -->
<ul class="key_points ps-2 mt-5 icon_shadow">
<li>
<div class="key_points_icon"><img src="images/ccg-configuration1.png" class="img-fluid"></div>
<div class="">
<span class="high_black">Centralized data management: </span> Context API is utilized to store data for access globally in application.
</div>
</li>
<li>
<div class="key_points_icon"><img src="images/graph.png" class="img-fluid"></div>
<div class="">
<span class="high_black">Presentation: </span> Customize your layout by incorporating a variety of charts and KPIs on individual pages.
</div>
</li>
<li>
<div class="key_points_icon"><img src="images/touch-and-drag.png" class="img-fluid"></div>
<div class="">
<span class="high_black">Drag and drop charts: </span> Organize and automatically preserve your layout by rearranging charts using the drag-and-drop feature.
</div>
</li>
<li>
<div class="key_points_icon"><img src="images/translation.png" class="img-fluid"></div>
<div class="">
<span class="high_black">Multi language: </span> Users can select their preferred language from the available options, ensuring a more personalized and user-friendly experience.
</div>
</li>
<li>
<div class="key_points_icon"><img src="images/expand.png" class="img-fluid"></div>
<div class="">
<span class="high_black">Drill down: </span> Explore supplementary charts related to a specific main chart by utilizing the expand option.
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="burger gray_bg1">
<div class="container">
<div class="row info-section">
<div class="col-md-10 mx-auto">
<h2 class="big-heading"><span class="primary_heading">Integration.</span> <br>Equipped with a variety of chart types.</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 offset-md-1 common">
<p>The application offers a diverse and comprehensive range of visual representation options for data. We have integrated different types of Fusion charts and amCharts.</p>
</div>
</div>
<div class="row">
<div class="col-md-10 mx-auto common">
<div class="row">
<div class="col-md-6">
<div class="dotted_pionts">
<h5>FusionCharts.</h5>
<div class="row">
<div class="col-md-6">
<ul class="key_points_red">
<li>Heat Map chart</li>
<li>Time series chart</li>
<li>Bubble chart</li>
<li>Stacked bar 2D chart</li>
<li>Treemap chart </li>
<li>Maps chart</li>
</ul>
</div>
<div class="col-md-6">
<ul class="key_points_red">
<li>Sunburst chart</li>
<li>Radar chart</li>
<li>Pie 2D chart</li>
<li>Doughnut 2D chart</li>
<li>Column 2D chart</li>
<li>Bar 2D chart</li>
</ul>
</div>
</div><!--inner-ul-row--->
</div>
<div class="dotted_pionts">
<div class="row">
<div class="col-md-6">
<h5>amCharts.</h5>
<ul class="key_points_red">
<li>Treemap chart</li>
<li>Bubble chart</li>
</ul>
</div>
<div class="col-md-6">
<!-- <p style="margin-top:20px; margin-bottom: 0px; font-size: 16px;">All charts</p> -->
<h4 style="color:#20376A; font-size: 32px; margin-top:20px;">Optimized for fast loading</h4>
</div>
</div><!--inner-ul-row--->
</div>
</div>
<div class="col-md-5 offset-md-1 text-center">
<img src="images/muhakemat-5.png" class="img-fluid" alt="image" style="height: 490px;">
</div>
</div><!--inner-row-->
</div>
</div>
</div>
</section>
<section class="t-burger bg2">
<div class="container">
<div class="row info-section">
<div class="col-md-10 mx-auto">
<h2 class="big-heading"><span style="color:#fedc86;">Customization.</span> <br>How we played with charts.</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 mx-auto common_white">
<p>We haven't just integrated the charts; we've tailored them to <span class="text-white">enhance data visualization</span>, ensuring a more <span class="text-white">precise representation</span> that perfectly aligns with each chart's unique characteristics.</p>
</div>
</div>
</div>
</section>
<section class="burger bg2">
<div class="container solution_points small_heading">
<div class="row common_white">
<div class="col-md-6">
<div class="card">
<div class="sol_img">
<img src="images/muhakemat-12.png" class="card-img-top img-fluid" alt="image" style="width:73%;">
</div>
<div class="card-body sol_des">
<h5 class="card-title">Data transform algorithm</h5>
<p>Developed an algorithm for <span class="text-white">transforming raw data</span> to align with the specific requirements of the chart and optimize the information for <span class="text-white">effective visualization</span>, ensuring that the chart accurately and meaningfully represents the underlying data.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="sol_img">
<img src="images/muhakemat-6.png" class="card-img-top1 img-fluid" alt="image" style="width:73%;">
</div>
<div class="card-body sol_des">
<h5>Color palette algorithm </h5>
<p>The algorithm for <span class="text-white">dynamically adapting</span> a color palette involves the utilization of a set of rules and procedures that <span class="text-white">automatically adjust the colors</span> used in a chart based on changes in the values of the underlying data.</p>
<!-- <p>When there is a <span class="text-white">substantial difference in magnitudes</span>, the smallest value bar may not be visible. To address this, we have implemented a min-max algorithm to ensure the <span class="text-white">proper representation</span> of all bars in the chart.</p> -->
</div>
</div>
</div>
</div>
<div class="mt-5">
<div class="d-flex align-items-center p-5" style="background: #274382; border-radius: 10px;">
<div class="col-md-5 text-center">
<img src="images/muhakemat-7.png" class="img-fluid" alt="image" style="width:73%">
</div>
<div class="col-md-7 common_white">
<h5 class="card-title">Min-Max algorithm</h5>
<p>When there is a <span class="text-white">substantial difference in magnitudes</span>, the smallest value bar may not be visible. To address this, we have implemented a min-max algorithm to ensure the <span class="text-white">proper representation</span> of all bars in the chart.</p>
</div>
</div>
</div>
</div>
</section>
<section class="t-burger">
<div class="container">
<div class="row info-section">
<div class="col-md-10 mx-auto">
<h2 class="big-heading"><span class="primary_heading">Enhancement.</span> <br> By adding useful features.</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 mx-auto common">
<p style="font-size:24px;">To elevate the application and provide an <span class="high_black">enhanced user experience</span>, we've incorporated a <span class="high_black">range of features</span> empowering users to interact seamlessly with charts and data.</p>
</div>
</div>
</div>
</section>
<!-- <section class="t-burger">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto">
<img src="images/ccg-8.jpg" class="img-fluid" alt="image">
</div>
</div>
</div>
</section> -->
<section class="burger">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto">
<div class="row common small_heading align-items-center">
<div class="col-md-5">
<h5 class="">Create and save layout</h5>
<p>Users have the flexibility to craft and save personalized layouts by incorporating their preferred charts and KPIs, facilitating quick access to them from a centralized location.</p>
<p>The system empowers users to create multiple layouts based on their convenience and specific needs.</p>
</div>
<div class="col-md-6 offset-md-1 text-center">
<img src="images/muhakemat-9.png" class="img-fluid" alt="image">
</div>
</div>
</div>
</div><!---/row--->
<div class="row t-burger">
<div class="col-md-10 mx-auto">
<div class="row common small_heading align-items-center">
<div class="col-md-6">
<img src="images/muhakemat-11.png" class="img-fluid" alt="image">
</div>
<div class="col-md-5 offset-md-1">
<h5 class="">Nested filters</h5>
<p>Implemented advanced filters to apply multiple levels of filtering, with each layer refining the dataset based on specific conditions, and prevented the applied filters from resetting on page load.</p>
<p>Moreever users have the ability to customize and save their filter configurations for future use.</p>
</div>
</div>
</div>
</div><!---/row--->
<div class="row t-burger">
<div class="col-md-10 mx-auto">
<div class="row common small_heading align-items-center">
<div class="col-md-5">
<h5 class="">Atomic design</h5>
<p>To establish a well-organized framework for constructing user interfaces, we adhered to the principles of the atomic design methodology. </p>
<p>This approach fosters a modular and systematic method in UI development, emphasizing the importance of reusability and maintainability.</p>
</div>
<div class="col-md-6 offset-md-1 text-center">
<img src="images/muhakemat-14.png" class="img-fluid" alt="image">
</div>
</div>
</div>
</div><!---/row--->
</div>
</section>
<section class="t-burger gray_bg1">
<div class="container">
<div class="row info-section">
<div class="col-md-10 mx-auto">
<h2 class="big-heading">Export preferred charts/KPIs.</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 mx-auto common">
<p>Through the export option, users can effortlessly <span class="high_black">refine their data</span> and download it. The resulting PDF is enriched with <span class="high_black">embedded metadata</span>, including the export date and details about the selected or applied filters.</p>
</div>
</div>
</div>
</section>
<section class="burger gray_bg1">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 ps-0">
<div class="h-100 position-relative">
<div class="bg-holder" style="background-image: url('images/muhakemat-2.png');"></div>
</div>
</div>
<div class="col-md-6 common">
<div class="h-100 row small_heading">
<div class="col-md-7 offset-md-1">
<div class="vertical_features ">
<h6>Select charts/KPIs</h6>
<p>Developed a user-friendly option that empowers users to seamlessly select the charts and KPIs of their choice for export.</p>
</div>
<div class="vertical_features mt-5">
<h6>Preview selection</h6>
<p>Before proceeding to the next step of the export process, the system enables users to preview their selections.</p>
</div>
<div class="vertical_features mt-5">
<h6>Export to PDF</h6>
<p>After ensurinig all selections are accurate, simply press the export button to obtain your customized PDF. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="t-burger">
<div class="container">
<div class="row info-section">
<div class="col-md-10 mx-auto">
<h2 class="big-heading mb-0"><span class="primary_heading">Explore more. </span><br>Additional features.</h2>
</div>
</div>
</div>
</section>
<section class="burger">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto common icon_shadow_2">
<div class="row">
<div class="col-md-6 pe-5">
<img src="images/deadline.png" class="img-fluid feature_icon" alt="icon">
<p><span class="high_black">Activity log.</span> The Activity log option serves as a meticulous recorder, systematically capturing and presenting a chronological history of user interactions and changes within the application.</p>
</div>
<div class="col-md-6 ps-5">
<img src="images/breadcrumb.png" class="img-fluid feature_icon" alt="icon">
<p><span class="high_black">Breadcrumbs.</span> We've developed custom breadcrumbs that facilitate effortless switching between chart tabs, all while preventing any unnecessary page reloads for a smoother user experience. </p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6 pe-5">
<img src="images/enter.png" class="img-fluid feature_icon" alt="icon">
<p><span class="high_black">Single Sign-On (SSO).</span> Implemented an integrated Single Sign-On authentication mechanism, empowering users to seamlessly access a multiple applications with a unified set of credentials. </p>
</div>
<div class="col-md-6 ps-5">
<img src="images/kpi.png" class="img-fluid feature_icon" alt="icon">
<p><span class="high_black">Key Performance Indicators (KPIs).</span> We have seamlessly integrated a diverse set of KPIs to systematically evaluate and optimize the effectiveness, efficiency, and overall performance of legal practices. </p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="">
<div class="container-fluid p-0">
<img src="images/muhakemat-15.png" class="img-fluid" alt="image" style="border-radius: 0;">
</div>
</section>
<!-- <section class="burger ">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto text-center">
<div class="testimonial">
<img src="images/user-img.jpg" class="img-fluid" alt="image">
<h3 style="font-size: 30px; line-height: 45px;">Oncall is cost-effectiveness in every outreach, maximizing the efficiency of communication strategies. Oncall allows effortless searches via keywords across multiple categories.</h3>
<p style="margin-top:40px; font-size: 24px;"><stong>Alexander Keith </stong></p>
</div>
</div>
</div>
</div>
</section> -->
<section class="burger gray_bg1">
<div class="container">
<div class="row">
<div class="col-md-8 text-center mx-auto">
<h2 class="big-h2">Looking to build similar <br>solution for your business?</h2>
<p class="mt-4" style="font-size:20px;">We have all the required expertise to help your business grow</p>
<div class="mt-5">
<a href="https://www.imensosoftware.com/contact/" class="btn btn-primary">Get a Quote</a>
</div>
</div>
</div>
</div>
</section>
<footer class="">
<div class="text-center copyright border-top"> Copyright © Imenso Software. All Rights Reserved. </div>
</footer>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Swiper -->
<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<!--AOS-->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
var swiper = new Swiper(".slideswipe", {
slidesPerView: 4,
spaceBetween: 15,
loop:"true",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
breakpoints: {
400: {
slidesPerView: 1,
spaceBetween: 20,
},
640: {
slidesPerView: 2,
spaceBetween: 20,
},
991: {
slidesPerView: 3,
spaceBetween: 40,
},
1024: {
slidesPerView: 4,
spaceBetween: 50,
},
},
});
</script>
<script type="text/javascript">
/*Top Menu*/
$(document).ready(function () {
$(window).scroll(function () {
// alert(1);
$('.navbar').toggleClass("navbar-sml", ($(window).scrollTop() > 100));
});
});
/*Review*/
var swiper = new Swiper(".testimonial_review", {
loop: true,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 30,
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
<script type="text/javascript">
var swiper = new Swiper('.slides', {
loop: true,
centeredSlides: true,
slidesPerView: 'auto' ,
pagination: {
el: '.swiper-pagination',
clickable: true
},
breakpoints: {
1024: {
slidesPerView: 1,
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>