Bringing Innovation and Superior CX for Abu Dhabi Commercial Bank

Client in numbers

39 yearsFounded in 1985
#3Largest bank in UAE's
1m + Customers

Problem statement

Design a unified process for paperless interaction with its individual private customers spanning all phases of the customer journey from initial contact, onboarding, and KYC to ensuring all customer interactions can be digital, convenient, and fully compliant.

Approach and solution

We created fully functional iOS and Android mobile applications utilizing a set of Open Bank APIs to demonstrate the capabilities of Flutter for rapid prototyping and to create rich applications with great customer experience. The POC that we developed had the potential to define the technology direction for the bank’s future projects in the field of mobile banking.

Impact achieved

  • Mobile apps with superior UI design and CX
  • Faster prototyping and time to market
  • More cost-effective development

Expertise and scope

  • Tech Stack: Flutter, Open Bank API

Accelerating Digital Transformation

Overview

Abu Dhabi Commercial Bank (ADCB) has embarked on an ambitious digital transformation program as part of the bank’s next 5-year strategy. The digital transformation roadmap covered multiple initiatives across business units and products/channels. One of these initiatives revolved around customer journey re-imagination and digitization to improve customer experience using mobile at the centre of a multichannel strategy and back-end processes digitization. ADCB relied on the knowledge and support of our digital user experience experts to help them deliver a best-in-class customer experience.

Challenges

ADCB sought to evaluate alternatives to Kony Visualizer to enhance customer experience. They aimed to develop an entire application flow using either Flutter or React Native to create a superior user experience, free from technological constraints. The goal was to facilitate a fresh user experience and enhance existing design language. ADCB required a strategic partner to help create, optimize, and evolve their digital journeys.

Solution

We designed a flow for an existing customer to secure personal finance and upgrade to Excellency through a promotion. Developed using Flutter and Open Bank API, the flow showcased several advantages of Flutter, including:

  • Near-native app performance
  • Ease of developing complex UI animations
  • High-performance cross-platform rendering engine
  • Shared UI and business logic across platforms
  • Reduced development time with ready-to-use widgets
  • Potential beyond mobile application development

We created fully functional iOS and Android applications utilizing Open Bank APIs to demonstrate Flutter’s capabilities in rapid prototyping and creating rich user experiences. This POC set the stage for ADCB’s future mobile banking projects.

Unlocking Customer Insights for Kaufland

1530Locations globally
40 yearsFounded in 1984
€34.2BRevenue for 2023

Problem statement

  • The client needed to gain a deeper understanding of their customers and market dynamics to optimise customer satisfaction through tailored products and services. 
  • Lacking comprehensive knowledge of their customers’ preferences, habits, and feelings, they risked not meeting customer expectations, leading to potential dissatisfaction and inefficient utilization of resources.

Approach and solution

  • We used advanced analytics techniques like K-means clustering, DBSCAN, Regression analysis, ANOVA, and PCA to segment the customer base by attributes and preferences. 
  • Using XGBoost and Random Forests, we developed predictive models to forecast behavior, make personalized recommendations, and optimize marketing. 
  • With insights from customer behavior, we tailored effective loyalty programs for specific segments.

Impact achieved

  • Enhanced understanding of customer segments and behaviors led to more targeted and effective marketing campaigns.
  • Tailored loyalty programs improved customer retention and engagement.
  • Robust systems allowed for better monitoring and analysis of key performance indicators, supporting strategic decision-making.

Overview

Kaufland, a leading international retailer in the fast-moving consumer goods (FMCG) sector, operates over 1,500 stores and warehouses across eight countries, along with an online marketplace in Germany.

Challenges

Kaufland faced the challenge of understanding their loyal customers and market dynamics to optimize customer satisfaction through tailored products and services. With limited insights into customer preferences, habits, and sentiments, they risked falling short of customer expectations, potentially leading to dissatisfaction and inefficient resource allocation.

Solution

To address these challenges, we implemented customer segmentation and advanced analytics. Utilizing techniques such as K-means clustering, DBSCAN, regression analysis, ANOVA, and PCA, we identified distinct customer segments based on a variety of attributes and preferences.

We then employed XGBoost and Random Forests to develop predictive models that forecasted customer behavior, enabled personalized recommendations, and optimized marketing strategies.

With these insights, we designed and implemented effective loyalty programs tailored to specific customer segments. Additionally, we established robust KPI tracking and transparency systems, enabling data-driven decision-making and facilitating comprehensive business performance evaluation.

Complete Digital Transformation for Mashreq

Client in numbers

13Countries
Since 2000Listed on DFM
57 yearsFounded in 1967

Problem statement

A complete transformation of all customer-facing channel applications, including Customer Mobile Banking Application, Customer Desktop Banking Application, Credit Cards Marketing Application, KYC Application, and Branch Service Tablet Application.

Approach and solution

  • Develop a unified backend for all frontend channels, reducing dependency on legacy infrastructure.
  • Implement deployment pipelines for Continuous Integration and Continuous Delivery, allowing each microservice to be deployed independently in staging and production environments.
  • Fully digitize and automate all existing user-facing services while introducing new features for the Branch Tablet Application development.

Impact achieved

  • In three months, the team developed and automated more than 50 service journeys, including Funds Transfers, Print Statements, Transaction Dispute Requests, Cheque Book Requests, Card Replacement, and Update Details.
  • Developed a complete set of backend services around the main domain object initially backing up the tablet application.
  • Achieved greater scalability
  • Improved the development process by implementing CI/CD pipelines

Expertise and scope

  • Deliverables: A fully-featured MVP tablet application
  • Tech Stack: Java 8, Spring Framework – (Boot, Batch, Cloud, Redis), RabbitMQ, MSSQL, React Native, Azure DevOps
  • Team: 5 Backend Developers, 4 Frontend developers

Digitalization of All of Customer-Facing Channel Applications for the Oldest Bank in the UAE.

Overview

We partnered with Mashreqbank PSC, the oldest and one of the largest privately-owned banks in the UAE, providing financial solutions to customers since 1967. In 2019, Mashreq bank started an initiative to completely transform all of its customer-facing channel applications, including their Customer Mobile Banking Application, Customer Desktop Banking Application, Credit Cards Marketing Application, KYC Application and Branch Service Tablet Application.

Challenges

Other competing banks in the UAE had already started similar initiatives to upgrade or entirely redevelop their channel applications which put pressure to deliver working solutions fast. The MVP phases of the apps were about to roll out almost simultaneously, and they were expected to be completed within approximately one year. Delivering a solution of that size for such a limited period was a big challenge. Mashreq could not achieve this internally on its own.

They required assistance from several departments and vendors to complete the digital transformation initiative in the desired period. Overall the team consisted of 40 members from different vendors, McKinsey Digital, and in-house Mashreq developers distributed in squads. Great cohesion, understanding, and cooperation among all units were required. Communication and alignment between teams were a primary concern, considering the required delivery speed and different deadlines set for the other applications.

Also, a key component in the old architecture – the Middleware (ESB) – was exposing all functionalities available within the bank operations. This imposed a challenge for the performance of all applications, as all applications would utilize the ESB instance, which in turn would lead to bottleneck & latency issues. To deliver the architecture promptly, we needed to quickly analyze how the bank’s existing components work and identify the best architecture concept whilst having security in mind.

Solution

We were responsible for developing the backend infrastructure, which would be used by all channels, and for creating the first MVP (tablet branch application), which the bank’s customers would use in the physical branches.

The issues with the old architecture were mainly handled through the use of the CQRS pattern & proper caching on the backend Layer. The new backend architecture was built using Java Microservices based on the Spring and Spring Cloud Frameworks. Each microservice is a stand-alone application that encompasses a bounded context (domain) following Domain-Driven Design (DDD) principles. The aim was to create one backend for all frontend channels and to detach as much as possible from the legacy infrastructure. Therefore, we introduced two main layers before the communication with the ESB.

To ensure the quality of the architecture, we developed deployment pipelines for Continuous Integration & Continuous Delivery so that every microservice is deployed autonomously in different environments – staging & production.

For the development of the MVP of the Branch Tablet Application, the goal was to completely digitize and automate all current user-facing services and introduce new ones. Account Closure was the most complex and was the first to be digitized and automated in the UB Tablet Application journey as it took about a week to complete manually. In 3 months, the team managed to develop and automate more than 50 service journeys, including Funds Transfers, Print Statements, Transaction Dispute Requests, Cheque Book Requests, Card Replacement, Update Details, etc. We successfully delivered the MVP, and the production version was first introduced in the Dubai Mall.

Digital Transformation for Coca Cola Istanbul

Client in numbers

since 2015Member of BIST Sustainability Index
60 yearsFounded in 1964

Problem statement:

  • Optimize processes across the company and streamline everything
  • A partner to co-lead the digital transformation efforts and help deliver several large internal projects spanning Digital Customer Experience, Loyalty Management, and NextGen CRM

Approach and solution:

  • Program structure, goals and progress audit and Improvements Report 
  • Introduced cross-functional squads and increased technical leadership 
  • 4X improvement of the velocity of the delivery teams
  • Enabled monthly delivery life cycles and better management visibility over the progress

Impact achieved:

  • Increased Velocity: Achieved a 4X improvement in the delivery teams’ velocity.
  • Monthly Delivery Cycles: Enabled efficient monthly delivery cycles and improved management visibility over progress.
  • Enhanced Planning: Improved team planning and commitment to the program goals.

Overview:

We partnered with CCI which is headquartered in Istanbul, Turkey and is the 6th largest bottler for Coca-Cola that takes care of the entire production, sales, and distribution. With a total of 26 plants in 10 countries close to 9,000 employees, CCI produces, distributes, and sells sparkling and still beverages of The Coca-Cola Company to a consumer base of 400 million people. 

CCI aspired to become a digital-first company and in 2018 they started a Digital Transformation initiative to optimize processes across the company and streamline everything. CCI trusted us to co-lead the digital transformation efforts and help them deliver on their goals.

Challenges:

CCI had a large IT legacy organization that relied on many different vendors so in 2018 with Digital Transformation as a priority #1, they started a new Digital Unit to perform a major cleanup job across the company and streamline all processes. CCI was seeking excellent external partners that could speed up the implementation of the initiative and help them deliver several large internal projects spanning Digital Customer Experience, Loyalty Management, and NextGen CRM. 

The NextGen CRM project was the highest priority and the first one CCI wanted to kick off. CCI had bought an eBest SFA solution that automates the sales process to increase the sales reps’ efficiencies and productivity, which, however, didn’t exactly meet the needs of CCI and didn’t support integration with CCI’s ERP system out of the box. 

Time was of the essence and all modifications and integrations had to be completed in an extremely tight deadline. The final solution had to meet the needs of CCI and serve all distributors across Turkey and then be launched in all countries where CCI operates.

Solution:

CCI entrusted us to co-lead their digital transformation. We provided tech guidance and consultancy to ensure successful project delivery. Key actions included:

  • Management Audit: Evaluated the program structure, goals, and progress, presenting a Management Report for Improvements.
  • Team Restructuring: Introduced cross-functional squads and enhanced technical leadership.
  • Agile Methodology: Improved requirements gathering processes, procedures, and templates in line with agile practices.
  • Standardized Criteria: Enhanced technical design and standardized DoR (Definition of Ready), DoD (Definition of Done), and acceptance criteria across all teams.

Enterprise Transformation with Advanced Software Solutions for BOSCH

Client in numbers

$91BPer year
400,000People globally
60Countries

Problem statement:

  • Bosch wanted to transform itself into a digital organization to meet consumer demands.
  • At the same time Bosch must stay competitive against other big industrial players from the US and Asia.

Approach and solution:

  • AI/ML research and PoC projects related to knowledge graphs.
  • Development of Android applications.
  • Digital anti-counterfeit solutions for physical goods.
  • Open-source cloud stack for developing applications.

Impact achieved:

  • Remarkable success in multiple projects.
  • Improving manufacturing at scale with digital tools based on Java and Angular.
  • Digitizing the customer experience

Expertise and scope:

  • Tech Stack: Java, Python, php, DevOps tools

Overview:

As with many international companies, Bosch Group, the global industrial conglomerate, faces a dual challenge. On one hand, it must transform itself into a digital organization to meet consumer demands. On the other hand, it must stay competitive against other big industrial players from the US and Asia.

On top of that, the company is keeping an eye on emerging AI/ML technologies that set the market pace today. Bosch is well-positioned to benefit from this trend since it has accumulated large amounts of data. However, for a company to stay ahead of the competition, sometimes it all boils down to having the right talent with a skill set at the forefront of innovation.

Solution:

In 2021, Wiser became a partner of Bosch.IO. Thе company, now called Bosch Digital, is an IT subsidiary of the global enterprise. It works on IoT, AI, and other digital technologies in the fields of industrial engineering, energy, automotive, building solutions, and others.

Wiser’s role is to contribute to the creation of software engineering teams that drive the digital transformation of Bosch and its software product development. While Bosch boasts excellent in-house engineering staff, it also benefits from external help that brings fresh perspectives and know-how. Together, we collaborate on numerous projects, with the most captivating focusing on:

  • Improving manufacturing at scale with digital tools based on Java and Angular.
  • AI/ML research and PoC projects related to knowledge graphs.
  • Development of Android applications.
  • Digital anti-counterfeit solutions for physical goods.
  • Open-source cloud stack for developing applications.

Frequently, the collaboration happens in a hybrid mode. Joint teams work together either remotely or in the offices of Bosch and Wiser. Depending on the unique project needs, our colleagues travel to Stuttgart or other Bosch locations for workshops, tech conferences, or other face-to-face events. 

MS Teams Voice API BOTs Integration for Technology Service LLC

25 yearsOf experience
10 yearsIn business

Problem statement: 

  • Automate tasks of the customer support team to achieve faster, more convenient, and responsive processes.
  • Identify and verify customers quickly during initial interactions to save agents’ time.

Approach and solution:

  • Developed an IVR BOT to identify callers and display their info to IT reps.
  • Created a Teams BOT to join calls, listen for keywords, and provide real-time information.
  • Implemented speech-to-text for transcriptions and email summaries.
  • Integrated Face Analysis for insights during video calls.

Impact achieved:

  • Faster Identification: Reduced time for customer identification.
  • Increased Responsiveness: Improved response times and efficiency.
  • Enhanced Customer Service: Provided real-time information and insights, improving overall customer experience.

Expertise and scope:

  • Tech Stack: .NET Framework, C#, Azure, Azure Web Services, Azure Bot Framework, Microsoft Graph API, Microsoft Teams, Microsoft Skype SDK

Overview

Technology Services is a trusted Microsoft partner with over twenty years of experience supporting the technology and business needs of midsize and enterprise institutions. The client was looking for a solution for internal use that would automate certain tasks of the customer support team in their IT department to achieve a faster, more convenient, and more responsive process as well as enhance the customer experience.

Challenges

The client was looking for a way to automate certain tasks of the customer support team in order to make the process faster, smoother, and more efficient. When a customer phones our client’s organization, for example, identification and verification usually take place during the initial 30 seconds of interaction. Identifying a caller’s identity can take up a large part of the agent’s time. Thus, the client wanted us to find a solutiоn with MS Teams that will automate the process in some way and will help them achieve their goal. 

Microsoft provides tools for real-time manipulation of audio/video stream data from an MS Teams call and LUIS – a tool for keyword detection. However, the output from MS Teams calls does not match the input required for LUIS, making them unable to interact with each other in a direct manner. To solve this problem, we had to split the entire data stream from MS Teams calls into bits and put them back into the type of data required for LUIS.

Solution 

We completed two different mini-projects, both related to demo BOTs in Microsoft Teams. The first project was on an Interactive Voice Response (IVR) BOT that allows the user to place audio calls and communicate via their keypads. We enabled the BOT to intercept incoming calls, identify who is calling, then redirect the call to the IT department and show a popup with the caller information on the screen of the customer service representative answering the call. The information gathered about the caller can vary depending on the industry and client needs and aims to reduce agent handling time and increase operational efficiency. Ultimately, this demo is designed to work not only with Microsoft Teams but also to allow you to attach a phone number to the BOT. This will be implemented as soon as Microsoft allows it as an option, which they are currently working on.

The second BOT is again connected to calls, but this time the user does not connect to an automated system but enters a call room in Microsoft Teams. When a customer service representative is in a call room with a customer, he can connect the BOT to the call and the BOT will enter and start listening for keywords. The entire conversation is processed in real-time, and the keywords that the BOT should detect can be customized using third-party software. When a certain word is detected, the BOT displays information about the respective keyword on the screen of the customer service representative. This eliminates the need for the representative to search for information during the conversation, which again facilitates and speeds up the process.

In addition, sentiment analysis is performed to detect when the words that the customer uses are negative. When this happens, a red flag is raised and the BOT notifies the supervisor of the respective customer support representative that the customer they are talking to is not happy with the conversation and provides the supervisor with two links through which he can either connect to the customer support rep via chat or directly join the call. 

We also implemented a speech-to-text functionality that transcribes the conversation whilst collecting the names, timestamps, and emails of participants, and automatically sends them the transcript via email at the end of the call.  

Last but not least, we implemented Microsoft Face Analysis, which offers the possibility to analyze the face of the customer when the camera is on and provide insights about their face and behavior. This could be used to build engaging customer experiences and maximize their satisfaction.

Transparent Donations for Disaster Areas

Client in numbers

10+International NGOs and social enterprises
100,000+Blockchain transactions
20+Countries

Problem statement

  • Lack of trust in traditional aid funding due to poor governance and financial control in charities.
  • Prohibit NGOs access to fiat money and facilitate collaboration between different finance organizations    to ensure the effective use of resources and hold institutions accountable.

Approach and solution

  • Created a token-based peer-2-peer ecosystem that securely connects worldwide donations directly to the beneficiaries in need.
  • Ensured transparency, traceability, and secure funds allocation to those in need with micro-transactions with zero fees.

Impact achieved

  • Ensured complete traceability of all transactions, enhancing trust among donors and beneficiaries.
  • Minimized overhead through efficient blockchain mechanisms and zero-fee micro-transactions.
  • Facilitated direct interaction between donors and the communities receiving aid, fostering a more accountable and responsive aid process.

Expertise and scope

  • Technology Stack: Sketch, InVision, Adobe Xd 

Overview

AIDONIC aims to transform traditional aid funding by creating a token-based peer-2-peer ecosystem that securely connects worldwide donations directly to the beneficiaries in need. The client wanted to develop a blockchain platform that ensures traceability and provides 100% transparency, secure funds allocation to those in need and micro-transactions with zero fees. As an early-stage startup, Aidonic required both our consulting and development services regarding the UX/UI design of their platform.

Challenges

The lack of trust is a major problem in traditional aid funding. The poor governance and financial control in charities and generally the lack of transparency make you wonder whether investments are contributing to development outcomes and how you could be sure without information on results. Without transparency, we lack the tools to facilitate collaboration between different finance organizations in order to ensure the effective use of resources and to hold institutions accountable. The solution we had to develop ought to tackle these challenges and satisfy the client’s requirement to prohibit NGOs access to fiat money. Furthermore, since the client was a startup company seeking potential investors to increase capital and funds, the project was highly time-constrained. 

Solution 

The Aidonic Platform aims to facilitate charity campaigns and enable NGOs to raise funds from donors in a transparent way, displaying the cash-flow in real-time until beneficiaries receive the aid. As an early-stage startup, Aidonic required our consulting services regarding the UX/UI design. In two months the team helped Aidonic form the concept and vision of the product and decide on its design. The product would be a blockchain-based platform that serves as a communication channel between the involved parties and provides traceability of fund transactions. During the UX phase, we developed for the client an interactive prototype of a web-based platform using high-fidelity wireframes. The team specified the platform actors and defined all communication paths and workflows including these for the fund donation, transferring and management processes. We also developed the information architecture of the functionality and User registration type, profile (Unlogger/Donor/NGO/Beneficiary/Retailer), and management. We further specified how to proceed with both successful and unsuccessful campaigns. On the UI side, we created all visual components, the UI visual guideline, and all desktop screens for the platform.

Thrive Community. Making  Caregiving Less Stressful

10,000+Active members globally
50+Countries in the community
Over 100Projects & initiatives

Problem statement

  • The client had a great concept but lacked the resources and expertise to develop the product. They trusted us to turn their vision into reality.

Approach and solution

  • Developed an intuitive iOS application designed for seniors and caregivers, allowing easy account setup with one-click functionality.
  • Implemented mood check-in feature for seniors, facilitating easy communication with the care circle.
  • Introduced a schedule for daily check-ins.

Impact achieved:

  • Launched intuitive, easy to use iOS and Android applications
  • Reduced the number of apps needed for the coordination of care plans
  • Achieved a seamless user experience and reduced maintenance costs
  • Improved call and chat stability through an integration with a more reliable VoIP provider
  • Improved overall quality and stability of the application, by implementing automation tests

Expertise and scope

  • Technology Stack: Swift, Dart, Kotlin, Flutter, Reactive programming, VoIP, WebSockets, Fastlane 

Overview

Thrive Community wanted to develop a platform that takes the guesswork, disruptions, and guilt out of caring for aging loved ones. We developed an app that simplifies the process of getting updates, coordinating people, and doing virtual appointments so that seniors, their families, and the care circle can feel supported and encouraged.

Challenges

Thrive Community wanted to build an app that makes caregiving less stressful by bringing doctors, nurses, family, and other caregivers into a central place and reducing the number of apps they need to get everyone on the same page. The client had a great idea but lacked the resources and expertise to develop the product and trusted us to turn their vision into reality.

Solution 

We developed an intuitive, easy-to-use iOS application designed with seniors’ involvement and caregiver responsibilities in mind. To reduce the number of apps needed for the coordination of care plans, the team enabled users to add up to 7 circle members, health practitioners, and doctors to the platform. The app is easy for seniors to use, allowing them to set up an account with one click. It also provides the option for seniors to share how they feel with a single tap on the “check-in mood” icon letting the care circle know if they’re sad, neutral, or happy. We also added the option to set up a schedule for how often seniors need to check in every day. This allows caregivers to look out for missed check-ins or sad notifications and in case something is not quite right ask questions that mitigate the risk of deterioration in health or a sense of loneliness. 

To keep seniors engaged the team added a news feed layer for photo sharing and a separate news module allowing caregivers to set permissions for news providers. The app was also integrated with Amazon to allow seniors to purchase suitable products for them. In addition, the team added HIPAA-compliant video call and private chat features for iPhone and iPad through a VoIP SDK integration allowing members of the circle to stay in touch with the senior and manage virtual check-ups. The chat offers an easy way for sharing updates, reminders, and tasks. For maximum ease, we enabled seniors to make video calls to family and caregivers simply by tapping the “face” icon of the person they need to speak to. 

After the launch of the product, the client received a large number of requests from Android users, which required the development of the application for Android. To save Thrive future maintenance costs, we recommended developing the applications in Flutter. After approval by the client, we developed all the features using Flutter for both the Android and iOS applications, while making some enhancements to the existing Onboarding journey. 

Furthermore, to improve the call and chat stability we changed the VoIP provider to ConnectyCube which also allowed us to add new features such as receiving calls and messages while the app is offline using VOIP push notifications. In addition, we were able to offer a seamless user experience through Platform-specific API integrations.

Maximizing Productivity and Profitability for MachineMax

Client in numbers

over 90%Accuracy in predicting machine needs
100,000+Machine hours tracked annually

Problem statement

  • Incrementally refactor the code base and release new features according to new standards without collapsing the legacy code base
  • Extend the existing product with new features and improve UX by enhancing user interfaces 

Approach and solution

  • Developed a new customized UI component system and redesigned the whole UI of the app
  • Enhanced user engagement through detailed weekly analytics and reports 
  • Profound visualization of the data & ML predictions

Impact achieved

  • Custom UI Component System: Created a new, customized UI component system and redesigned the entire UI of the app.
  • Enhanced Data Visualization: Implemented profound data visualization tools.
  • Customizable Email Templates: Developed highly customizable email templates for effective user engagement.
  • Improved UX Satisfaction: Enhanced user experience with new UI tools.
  • Smooth Transition: Achieved a smooth transition from the legacy codebase without breaking functionality.

Expertise and scope

  • Tech Stack: React.js, Redux, Go, Python, Google Cloud Platform, SQL

Overview

MachineMax is an award-winning global company based in London UK that provides an equipment management platform for off-highway heavy machinery users to maximize the profitability of every machine in their fleet… any make, any model, anywhere!

20-30 Million Heavy Machines worldwide are unable to provide meaningful insights to industries such as Construction, Mining, Manufacturing (material handling), Agriculture, Forestry, Waste recycling, and Infrastructure (e.g., ports).

Leveraging Internet of Things (IoT) technology, MachineMax is a breakthrough machine analytics service that helps construction and mining companies maximize profitability by increasing machine utilization and reducing fuel consumption and CO2 footprint.

Challenges

The company has an MVP that worked well and was developed three years ago. After gaining a pool of constant customers and attracting new investors the company decided to extend the product with new features and improve UX by enhancing user interfaces. The old codebase didn’t fit well with new requirements so the company decided to incrementally refactor the code base and release new features according to new standards. That created an issue of properly processing legacy code and incorporating new functionality with the old one. 

The Machine Learning module was added to the product to be able to give predictive analytics based on the deep learning of existing data and analysing trends. Therefore, predictive analytics results should be well represented in the front end.

Additionally experienced UX designer joined the team and worked closely with the existing UI designer. As a result, new flows of usual processes have been developed and implemented in the front end.

Also, the company decided to enhance user engagement and start sending detailed weekly analytics email reports for the users with key indicators.

Solution 

All the new and refactored code has been stored in a separate Portal folder to avoid collapsing with the legacy code base.

There was developed a new Design Component system based on Material UI but customised for its own purposes including supporting several coloured themes. 

Main flows were implemented as multistep forms with a focus only on grouped data with the ability to check selected information in the final step. All main user actions were gathered in the user panel right under the main navigation bar. This user panel contains an icon button for applying filters, searching, downloading reports and adding new machines/groups/geofence etc.

All table pages with aggregate data and dashboard were enriched with sticky horizontal and vertical headers, the ability to scroll by many means (scrollbar, mouse dragging, special button indicators) and a predefined filter and date range. Additionally, new metrics have been added like shifts and off-hours.

Data analytics including ML predictions were implemented with the D3 library for profound visualisation and the ability to see all data segments. The general stats were represented with popular graphs in the Chart.js library.

New email templates have been developed to support images of graphs with data analytics for a week. Also, these templates were optimized to render conditionally supported/unsupported pieces of analytic data with the support of all popular email agents including Outlook Windows. We use a combination of tools such as MJML email framework, Handlebars template engine and integration with Quickcharts.io based on Chart.js.