Designet

Telepresence conference analytics and report generation service

UX design
Charts
Branding
Web
Dashboard
Analytics
Reports
Responsive
SaaS
Enterprise
Front End
HTML5
AngularJS
Bootstrap
D3
Filters
Product's website
The task
Transfer the enterprise application's front-end from Flex to HTML5 using the AngularJS framework while preserving the functionality and enhancing user experience.
Past history
The first version of the service's client end was created using Adobe Flex, a set of tools for developing cross-platform apps that extended the capabilities of the Adobe Flash platform. In 2014, Flash started to give way to other web development standards, which is why the customer requested us to create a fully HTML5-based application interface and provided us with some code written by the customer's previous team of front-end developers.
During our work, we had to take note of our primary competition, namely:
Manages and optimizes video conferences
Visualizes already existing data
Collects and analyzes data for optimizing collaborative work
Designet allows to
Analyze the performance of network hardware
Compile call statistics and make up a device list
Monitor the network’s technical parameters
Write reports and spreadsheets with charts in .pdf, html, .doc, .xlxs
The age of Flex
Designet is a service with a complex structure that includes extensive lists and trees as well as sizeable tables and other entities with editable data. Even though it was impossible to use Flex to make mobile and tablet versions of Designet, Flex allowed the service to work under different browsers and operating systems and was therefore a suitable solution before the transition to HTML5.
The customer’s team lacked a full-time designer, so they consulted us when it came to user experience. We, on our part, understood that speed and reliability were to be the key aspects of the enterprise project’s UX.
Seeing as the users were already accustomed to a certain interface, we did not try to simplify the screens to help beginners. Instead, we cut down on redundant actions to make each screen easy to use and free of clutter.
Design changes
However, we still wanted the interface to be updated along with the app's transition. As a template, we used the Bootstrap theme Angulr for admin panels. This template offers a ready-made style and leaves the designer free to think over the nuances of component position and interrelation, saving development time and costs. The UI/UX solutions were tested on actual data and prototypes. The Angular-strap library was employed for working with the interface's Bootstrap components (drop-down menus, modal windows, datepickers and so on).
Before — After
Before
After
SCRUM
The work was carried out under a project management framework called SCRUM. During the work process, a large international team would assemble for daily meetings and plan without the help of a manager. The developers scheduled their tasks on their own and tracked the progress of other team members, while the two-week sprint system helped publish the app’s new version more frequently and allowed for prompt responses to user feedback.
Reports
Call statistics are put together into reports. The process of creating a report is started by picking a template with preset parameters that takes into account a large quantity of various situations that take place during conferences. Each situation has to be analyzed to optimize communications.
The templates are divided into topics and tags, the list of which depends on the selected system: Cisco, Polygon or Designet. A filter helps to navigate to the required template.
To set up a report, the user selects the tracked device (MCU), specifies the time period for stats gathering, sets threshold values for hardware loads and chooses the unit of measurement (absolute values or percentages) for chart building.
The form of each report is determined on the server and is sent through API. The reports form an infinite amount of combinations out of the vast amount of data, and these combinations can not be calculated ahead of time. To deal with this, the client side processes the cases of special behavior of the set report forms (edge cases).
The collected information is filtered, the reports are saved in the specified format and are sent by e-mail to analysts and managers. Mailing schedule is configurable.
Saved reports
Mailing options
Mailed reports
Dashboards
The customer was well aware that an advanced, modern analytics service is supposed to have dashboards – single-page reports that comprehensively visualize data in graphs and bar charts.
Initially, dashboard development was performed using Pentaho's business analytics software, which the client purchased because it offered prospects of flexibility and easy database integration. In reality, it turned out that Pentaho couldn't handle the scale of Designet databases and created out-of-date reports, so we had to develop our own solution.
To create a dashboard, we first had to understand:
— how it would work;
— how it would build graphs and charts;
— how the data would be handled.
Architectural solutions that we used
A D3-based library for time-series data visualization
The JavaScript library that powers Plotly, a web interface for creating interactive graphics
A set of components for creating graphs that works under the D3.js library
To convert the data into a universal format and plug in the required library, we wrote an abstraction layer. To convert the data, we used Web Workers, a technology that relocates data transformation into an independent thread, allowing the user to work with the web app.
Graph types
Sparkline
Time series
Histogram
Shows the load on a single node
for the last day or month
Shows the load on a node in detail for a year or more. The graph is scalable and can be moved along the time axis
Shows the load of a single node during specific hours,
days and months based on annual data
Flexible filter
The Designed base contains tens of thousands of devices and reports. To a find a single specific entry you require, you can use the flexible filter that employs operators sensitive to character combinations, numbers and conditions.

Logical operators: AND, OR.
Comparison operators: equals, contains, starts_with, ends_with, length, content, regex.
Hierarchies
Hierarchies is a tree containing all of the company's devices with 20 thousand parameters for output, built on the basis of the IntegralUI TreeView component. Changes in the tree can be both undone and redone.
If the manager doesn't edit the hierarchies, the session is automatically closed without saving the changes. This is done using sockets — persistent connections used for client-server message exchange. The socket is terminated 15 minutes after the last action of the client so that another manager is granted access to the hierarchies.
Nodes
Nodes is a tab containing the data on tens of thousands of system devices, their activity status, firmware, device manufacturer and model. Page-by-page loading makes it possible to work with an unlimited dataset. Bulk editing is included.
Multitenancy
Designet is an SaaS (Software-as-a-Service) solution that doesn't need to be downloaded and installed on a computer or a mobile device. Up until 2016, Designet worked under the Single-Tenancy system, which required the app to be updated by each company separately and the amount of servers had to be increased to commensurate with the increase in the amount of partner companies.

Later, multitenancy architecture was implemented to optimize costs and decrease the amount of operating servers. Now, when a user opens up the app, the browser identifies them by their JWT token that contains access rights and corporate information. After the identification is successful, the server sends out the data and the trademark style for app branding to the client.
Branding
During the earliest stage of development, a branding engine was introduced into the app, meaning that every Designet's partner company would have their own logo, color scheme, design and fonts.
Interface scaling for different devices
Managers and analysts want to be able to check out the reports from all kinds of devices. Through elaborate modification of the existing components, we managed to implement tablet size support.
The angular-ui-layout open library allows controlling and adapting the size of the blocks on the page. However, hierarchies are non-editable in the tablet version, as this feature slows down the device's performance, while drag-and-dropping the elements is too difficult.
E2E testing
Designet operators use Chrome and Internet Explorer. While manual smoke testing can reveal obvious failures, it's time-consuming and not reliable enough. We chose End-to-end (E2E) testing, in which app performance is monitored from launch to shutdown. Testing scenarios approximate actual user behavior. We used the BrowserStack service for E2E testing. Testing usually takes up about half an hour and is carried out in several browsers without the participation of the developers, provides more comprehensive results and reveals previously undetected issues.
Continuous Integration
Testing and deploying builds of the service's new versions using the FTP protocol took about two hours. Setting up Continuous Integration using the Jenkins platform allowed for automatic deployment to QA and staging servers that was performed every time the code was updated in Git, cutting 2 hours down to 15 minutes, 10 of which are automated tests.

You can read an extensive guide on setting up a Jenkins-based build server in our blog.
Project building demands a lot of tedious procedures from the developer. When the manager needs to provide the customer with a work progress report, the developer is forced to waste time on downloading the repository, pulling libraries, installing certificates, building, testing, uploading the build to the server and other in-between stages.
The Live Typing team created the new UI, rewrote 95% of the front end code and finished the job, handing the project over to the customer's new front-end team.
THE TEAM
Account manager
Vlad Korobov
Front-end developers
Mikhail Khokhlov
Max Nikitin
Dmitry Skripkin
Special thanks for entrusting us with this challenge and for the opportunity to work with an outstanding team
Jim Idleson, CEO Designet
Daniel Einspanjer, CTO Designet