Designet

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.

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).

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.

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.

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.

Architectural solutions that we used

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.

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

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.

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.

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.

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.

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.

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.

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.

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.