Designet

Сервис аналитики и создания отчётов по проведению конференций в формате телеприсутствия

UX design

Charts

Branding

Web

Dashboard

Analytics

Reports

Responsive

SaaS

Enterprise

Front End

HTML5

AngularJS

Bootstrap

Filters

designet.com

Сайт продукта

Задача

Перенести front-end часть enterprise-приложения с Flex на HTML5 с помощью фреймворка AngularJS, сохранив всю функциональность и улучшив пользовательский опыт.

Предыстория

Первая версия клиентской части сервиса создавалась на Adobe Flex — комплекте средств разработки кроссплатформенных интернет-приложений, расширяющих возможности платформы Adobe Flash. В 2014 году Flash начал терять роль стандарта в веб-разработке. Поэтому клиент обратился к нам с просьбой сделать интерфейс приложения полностью на HTML5. От предыдущей команды front-end разработчиков клиента мы унаследовали некоторое количество кода.

При работе мы обращали внимание на основных конкурентов

Контролирует и оптимизирует видеоконференции

Визуализирует уже существующие данные

Собирает и анализирует данные для оптимизации совместной работы

Vyopta

Tableau

Polycom

Designet позволяет

Анализировать
работу сетевого
оборудования

Составлять
статистику звонков и список устройств

Следить за техническими параметрами сети

Составлять отчёты в форматах .pdf, html, .doc, .xlxs, таблицы с диаграммами

Эпоха Flex

Designet — это сервис со сложной структурой. В неё входят длинные списки и деревья, большие таблицы и другие сущности с данными для редактирования. Хотя сделать на Flex мобильную и планшетную версии Designet было невозможно, он обеспечивал работу сервиса на разных браузерах и операционных системах и был хорошим решением до перехода на HTML5.

В команде клиента не было штатного дизайнера, поэтому он консультировался с нами по вопросам пользовательского опыта. Мы понимали, что ключевым моментом в UX enterprise-проекта должны быть функциональность и скорость.

Поскольку пользователи уже привыкли к определённому интерфейсу, мы не стремились упрощать экраны для новичков. Вместо этого мы уменьшали число лишних действий, чтобы сделать каждый экран удобнымв использовании, но не перегруженным.

Перемены в дизайне

Вместе с переносом приложения хотелось обновить интерфейс. В качестве шаблона использовалась Bootstrap-тема для административных панелей Angulr. Шаблон предлагает готовую стилистику, и дизайнерская работа сводится к продумыванию расположения и взаимосвязи готовых компонентов. Это экономит деньги и время разработки. UI/UX-решения испытывались на реальных данных и прототипах. Для работы с Bootstrap-компонентами интерфейса (выпадающими меню, модальными окнами, дэйтпикерами и т.п.) используется библиотека Angular-strap.

Было — стало

Было

Стало

SCRUM

Работа шла по SCRUM — фреймворку для управления проектами. Частью процесса было планирование и ежедневные встречи большой интернациональной команды без участия менеджера. Разработчики самостоятельно планировали свои задачи и следили за прогрессом других членов команды. Двухнедельные спринты позволяли чаще публиковать новую версию приложения и оперативно реагировать на отзывы пользователей.

Отчёты

По статистике звонков создаются отчёты (Reports). Процесс начинается с выбора шаблона с предустановленными параметрами, учитывающим большое число специфических ситуаций на переговорах. Каждую из таких ситуаций нужно анализировать для оптимизации связи.

Шаблоны разбиты по темам и тегам. Их перечень зависит от выбранной системы — Cisco, Polycom или Designet. Перейти к желаемому шаблону помогает фильтр.

Чтобы настроить отчёт, пользователь выбирает отслеживаемое устройство (MCU), задаёт временной промежуток сбора статистики, пороговые значения загруженности оборудования и единицу измерения шкалы (абсолютные значения или проценты) для построения графика.

Форма любого отчёта определяется на сервере и передаётся через API. Отчёты складываются из множества информации в бесконечное число комбинаций, которые невозможно просчитать заранее. Поэтому на клиентской стороне предусмотрена обработка случаев специального поведения заданных форм отчётов (edge cases).

Собранная информация фильтруется, отчёты сохраняются и в указанном формате рассылаются по почте аналитикам и менеджерам. Расписание рассылки настраивается.

Сохраненные отчеты

Настройка рассылки

Отчеты, находящиеся в рассылке

Дэшборды

Клиент понимал: актуальный и передовой сервис аналитики должен иметь дэшборды — одностраничные отчёты с понятной визуализацией данных в виде графиков и гистограмм.

Изначально разработка дэшбордов шла на программном обеспечении для бизнес-анализа от компании Pentaho. Клиент купил его за обещанную гибкость и удобную интеграцию с базой данных. В процессе работы выяснилось, что Pentaho не справляется с объёмами баз данных Designet и создаёт неактуальные отчёты. Это заставило нас сосредоточиться на собственном решении.

Чтобы сделать дэшборд, необходимо было понять:

— как это будет работать;

— как будут строиться графики;

— как будут обрабатываться данные.

Архитектурные решения, которые мы использовали

Библиотека на базе D3 для визуализации данных, относящихся ко времени.

JavaScript-библиотека, работающая на веб-интерфейсе для создания интерактивной графики Plotly.

Коллекция компонентов для создания графиков, работающая на библиотеке D3.js.

MetricsGraphics

Plotly.js

NVD3

Чтобы конвертировать данные в универсальный формат и подключать нужную библиотеку, мы написали слой абстракции. Для конвертации данных используется Web Workers — технология, которая переносит трансформацию данных в независимый поток, что даёт пользователю работать с веб-приложением.

Виды графиков

Искрографик

Временной ряд

Гистограмма

Показывает нагрузку на отдельный узел системы
за последний день или месяц

Детально показывает нагрузку на отдельный узел за год или больше. График масштабируется и перемещается вдоль временной оси

На основе годовых данных показывает загрузку отдельного узла
в конкретные часы, дни и месяцы

Гибкий фильтр

База Designet хранит десятки тысяч устройств и отчётов. Гибкий фильтр помогает среди множества записей найти одну. Операторы, учитывающие комбинации букв, цифр и условий, прицельно отфильтровывают нужное.

Логические операторы: AND, OR.
Операторы сравнения: equals, contains, starts_with, ends_with, length, content, regex.

Иерархии

Иерархии — это дерево всех устройств компании с 20 тысячами параметров для вывода, построенное на компоненте IntegralUI TreeView. Изменения можно отменять и возвращаться к отменённым действиям.

Если менеджер не работает с иерархиями, сессия автоматически закрывается без сохранения редактирования. Это позволяют сокеты — постоянные соединения для обмена сообщениями от сервера к клиенту и наоборот. Сокет рвётся через 15 минут после последнего действия клиента и доступ к иерархиям получает другой менеджер. Сокеты построены на библиотеке socksjs-client.

Nodes

Nodes — это вкладка, где хранятся данные о десятках тысяч устройств системы: статус активности, прошивка, производитель устройства, модель. Постраничная загрузка обеспечивает работу с неограниченным набором данных. Есть возможность массового редактирования.

Multitenancy

Designet — это SaaS-решение (Software-as-a-Service), которое не нужно скачивать и устанавливать на компьютер или мобильное устройство. До 2016 года Designet работал по системе Single-Tenancy, что требовало обновлять приложение каждой компании отдельно и увеличивать число серверов с ростом числа компаний.
Для оптимизации расходов и уменьшения количества серверов, обслуживающих систему, внедрена multitenancy-архитектура. Когда пользователь входит в приложение, браузер определяет его по JWT-токену, который содержит информацию о правах доступа и компании. После успешной идентификации сервер отдаёт клиенту данные и фирменный стиль для брендирования приложения.

Брендирование

На самом раннем этапе работы над приложением был введён движок брендирования.
Каждая компания-партнёр Designet имеет свой логотип, цветовую схему, оформление и шрифты.

Масштабирование интерфейса под разные устройства

Менеджеры и аналитики хотят смотреть отчёты с любого устройства. Грамотная поддержка планшетных размеров появилась благодаря продуманной модификации готовых компонентов.

Открытая библиотека angular-ui-layout позволяет контролировать и адаптировать размеры блоков на странице. В планшетной версии нельзя редактировать иерархии — эта функция снижает производительность устройства, а перетаскивать элементы драг-н-дропом сложно.

E2E-тестирование

Операторы Designet работают в браузерах Chrome и Internet Explorer. Ручные smoke-тесты для выявления явных ошибок проходят долго и не дают надёжного результата, поэтому мы остановились на End-to-end тестировании (E2E). Метод подразумевает проверку работоспособности приложения от момента запуска до завершения работы с ним. Тестовые сценарии максимально приближены к реальному поведению пользователя. Для E2E-тестов мы использовали сервис BrowserStack. Тестирование занимает около получаса, проходит в нескольких браузерах без участия разработчиков, даёт более полный результат и позволяет выявить незамеченные проблемы.

Continuous Integration

Тестирование и развёртывание сборок новых версий сервиса через FTP-протокол занимало около двух часов. Настройка Continuous Integration на платформе Jenkins дала автоматическое развёртывание на QA и staging-серверы после каждого обновления кода в Git. 2 часа сократились до 15 минут, 10 из которых занимают автоматические тесты.
Подробную техническую инструкцию о настройке сервера сборок на Jenkins читайте в нашем блоге.

Cборка проекта требует от разработчика кучи утомительных операций. Когда менеджеру нужно отчитаться перед заказчиком о ходе работы, разработчик тратит время на выкачивание репозитория, подтягивание библиотек, установку сертификатов, сборку, проверку, выкладывание сборки на сервер и прочие промежуточные этапы. Но на Земле становится всё меньше рутинных действий, которые не подверглись бы автоматизации.

Как за день поднять CI для iOS-разработчиков

Команда Лайв Тайпинг создала новый UI, переписала 95% фронтенда и закончила работу, передав проект новой front-end команде клиента.

КОМАНДА

Аккаунт-менеджер
Влад Коробов

Front-end разработчики
Михаил Хохлов
Максим Никитин
Дмитрий Скрипкин

Особые благодарности за доверие, интересный проект и отличную команду

CEO Designet Джим Айдлсон
CTO Даниэл Эйспанжер

IT Outstaffing specialists
in Live Typing

Developers, testers, designers and analysts for temporary work in a team under your supervision. We will select and engage employees on project in a week

IT-outstaffing is a model of cooperation where a developer from one company is temporarily working for another company. The receiving team gives the person a workload, sets tasks and manages his work on the project

What is outstaffing

Benefits of Outstaffing

You don't need to employ staff

You pay only for the working hours — no additional expenses for taxes, social guarantees and compensations to the employee

Saving on HR

Outstaff recruitment for your tasks saves up to three months and up to 1000 USD on recruitment of a person for your team

Experienced guys only

Already experienced specialists join the development, so you don’t need to invest in their professional skills

You don't need to employ staff

You pay only for the working hours — no additional expenses for taxes, social guarantees and compensations to the employee

Saving on HR

Outstaff recruitment for your tasks saves up to three months and up to 1000 USD on recruitment of a person for your team

Experienced guys only

Already experienced specialists join the development, so you don’t need to invest in their professional skills

Outstaff specialists are helpful if

Project deadlines are close

Outsaff developers will strengthen your expertise and help you close tasks on time

You don’t have an experience in certain technology

With outstaffing, you’ll be able to work with any kind of stack

You need to replace someone

Specialists will quickly get on board and take over another person's tasks

There are not enough free hands

Feel free to take on new projects and expand your team with temporary employees

Project deadlines are close

Outsaff developers will strengthen your expertise and help you close tasks on time

You don't have an experience in certain technology

With outstaffing, you’ll be able to work with any kind of stack

You need to replace someone

Specialists will quickly get on board and take over another person's tasks

There are not enough free hands

Feel free to take on new projects and expand your team with temporary employees

Choose an outstaff developer in Live Typing

Specialists with 3+ years of commercial development experience
Middle developers proven by time, complex projects and deadlines
Book a specialist after the interview
Book a specialist after the interview - you will have 72 hours to make a final decision
Our rates for iOS and Android developers are below-market
Simply profitable and very profitable when you need to hire a full team on outstaff

Specialists with 3+ years of commercial development experience
Middle developers proven by time, complex projects and deadlines
Book a specialist after the interview
Book a specialist after the interview - you will have 72 hours to make a final decision
Our rates for iOS and Android developers are Below-market
Simply profitable and very profitable when you need to hire a full team on outstaff

Stages of partnership

Project Onboarding

We help you form a request for a developer

We select candidates within 24 hours after the request

Schedule interview dates

After a successful interview – we bring the right person to the project within 3 days

Support

Deal closing

If the assistance of an outstaff member is no longer required on the project, we end our collaboration, and you can contact us again at any time

During the whole time of the employee’s work on the project we stay close to you — we support, consult, respond to feedback and help you if something goes wrong

A week after the request, the employee will be onboarding in your team

Any options for testing the skills of a specialist

You choose the method that will help you understand that the person is the one you are looking for

Contact us to see programmers' CVs

Select a specialist

Interviews in several stages

Test assignments

Livecoding

Our stack

FAQs

What is the minimum and maximum period of "renting" a expert?
We understand that the task you have in front of you may be quite small. With us you can hire a developer starting from two months. The maximum term of cooperation is not limited.
What is the grade of your developers?
We offer middle developers with three or more years of experience. We do not provide juniors as outstaffing programmers.
Is my project data secure?
We sign an NDA and do not reveal any information about your project either written or verbally.
Do you have individual terms and conditions?
The length of partnership with us and the number of specialists the customer "rents" influences this. Give us a call +7−495−204−35−03 and we will see how we can help.

FAQs

What is the minimum and maximum period of "renting" a expert?
We understand that the task you have in front of you may be quite small. With us you can hire a developer starting from two months. The maximum term of cooperation is not limited.
What is the grade of your developers?
We offer middle developers with three or more years of experience. We do not provide juniors as outstaffing programmers.
Is my project data secure?
We sign an NDA and do not reveal any information about your project either written or verbally.
Do you have individual terms and conditions?
The length of partnership with us and the number of specialists the customer "rents" influences this. Give us a call +7−495−204−35−03 and we will see how we can help.

Want to know about something else?

Dmitry Makhnachev, head of our partnership program, will answer any questions about outstaffing in Live Typing

+7-495-204-35-03

Why choose Live Typing?

Three years in outstaffing
Helped dozens of clients strengthen their teams and get their projects on their feet
Our developers build federally recognized applications
Our clients include: ZARINA, SEPHORA, CTV, STS, Kaspersky, Valenta Digital, PepsiCo
We constantly educate our employees
We send developers to conferences, organize professional training and make sure that each person in the team grows in skills
We are in Top-50 outstaffing agencies in Russia
According to the largest digital rating «Runet Rating»

Three years in outstaffing
Helped dozens of clients strengthen their teams and get their projects on their feet
Our developers build federally recognized applications
Our clients include: ZARINA, SEPHORA, CTV, STS, Kaspersky, Valenta Digital, PepsiCo
We constantly educate our employees
We send developers to conferences, organize professional training and make sure that each person in the team grows in skills
We are in Top-50 outstaffing agencies in Russia
According to the largest digital rating «Runet Rating»

Reviews about working with us

→

←

«We have been in working with Live Typing for more than 2 years — we can safely recommend our partner as a team of reliable professionals. I would like to highlight the effective work of specialists and focus on the result. This is a great value. We are happy to continue our partnership».

Makarova Alexandra,
Head of 65apps Partner Network

Reviews about working with us

→

←

«According to the project manager’s assessment, the specialist fitted into the team quickly, literally from the first days. He easily understood the logic of the application’s operation. He quickly reacts to changing priorities, which is important for the project. Thoughtfully understands the customer’s tasks and requests, and does not hesitate to suggest improvements. Thanks to his work, we quickly released the long-expected release without any critical comments from the customer».

Alexander Naumenko, CEO Arcsinus

Reviews about working with us

→

←

«The experience of working with Live Typing is definitely a positive one. As part of a request for mobile developers, they introduced an Android developer. He quickly fitted into the team, got to know all his colleagues and started taking on small tasks from day one. After a couple of weeks he got used to it and started to perform more complex tasks along with everyone else. During my work on the project he realized a lot of screens and business tasks. I should note the good quality of the code — very few tasks were returned for improvement after testing. As for soft skills, we should emphasize responsibility, focus on results, responsiveness and positive attitude — the specialist is always on the phone, does not get lost in solving complex tasks».

— Partner's data is under the NDA