Наш клиент — врач, который помогает людям улучшить условия жизни с помощью авторских обучающих программ. Сейчас они представлены на сайте, его разработкой занимались специалисты Ziex.
Чтобы понять, насколько люди довольны тем, что у них есть, он провел большое социальное исследование на тему уровня жизни и хотел:
-
перенести собранную информацию в цифровой формат на сайт;
-
получать данные от новых пользователей, которые будут проходить опрос на сайте;
-
показывать пользователям персональные результаты опроса удовлетворенностью жизнью и общую картину всех участников.
Как мы предложили реализовать идею
При обращении к нам у клиента был готовый макет от дизайнера в Figma и обязательное требование — сделать форму опроса с верификацией по номеру телефона, чтобы получать данные от «живого» пользователя. Только в таком случае результаты исследования будут максимально точными.
Наши разработчики собрали все вводные данные и предложили:
Создать веб-приложение (страницу application) для расчета статистики и ее визуального отображения на сайте.
В качестве основных технологий выбрали разработку на React и Node.js. Вторую использовали для создания серверной части приложения, чтобы обеспечить быструю и масштабируемую обработку запросов, а также эффективное взаимодействие с клиентской частью.
Так как важна быстрая обработка сложных данных — функционала и визуала в большом количестве, но так, чтобы это не повлияло на общую загрузку системы, выбор React оправдан. Концепция программирования с использованием Virtual DOM на React как раз дает возможность совместить одно с другим, обеспечивая высокую производительность и эффективное управление интерфейсом при работе с большим объемом данных.
К тому же, использование компонентного подхода в React позволяет эффективно организовывать код, улучшая его читаемость, поддерживаемость и масштабируемость.
В результате у нас должен получиться уникальный функционал, который предназначен исключительно для работы с данными исследования на конкретном сайте.
Мы, к сожалению, не можем показать ссылки на работы, т.к. разработка выполнялась совместно с дизайн-командой под NDA.
Что делали
Backend — стек технологий:
-
Создание типа данных «Вопрос» с определенными полями:
-
название вопроса;
-
пол;
-
возраст;
-
ответ на данный вопрос в формате 5 степеней удовлетворенности.
-
-
Разработка функции обработки данных с формы, которую заполнил пользователь. Она нужна для:
-
отправки всех данных с формы в виде письма на электронную почту владельцу, т.е. нашему Заказчику;
-
обновления общей статистики (в базе данных) с учетом информации с отправленной формы.
-
- Разработка функции для передачи данных с Backend на Frontend.
ИТОГ этой работы: Теперь данные успешно сохраняются, как только пользователь заполняет анкету, а также передаются на визуальную часть (Frontend) аппликации.
Frontend — стек технологий:
-
Сортировка данных, пришедших с функциональной части (Backend), по разным критериям для дальнейших расчетов.
-
Формирование групп данных для расчета и визуализации в соответствии с макетом, который мы получили от клиента.
-
Расчет обработанных данных для составления визуализации.
-
Визуализация расчетных данных:
-
создание и стилизация круговой диаграммы;
-
создание и стилизация линейчатых диаграмм с разделением на возрастные группы и на 5 уровней удовлетворенности жизнью.
ВАЖНО! Данные обеих диаграмм взаимосвязаны: при нажатии на конкретный уровень на линейчатой диаграмме, показатели круговой двигаются в соответствии с выбранной возрастной группой.
Кроме того, разработали функции, которые позволяют при просмотре страницы с общей статистикой переключать пол и возрастную группу. И функции переключения вопросов для общей и персонализированной статистики (данные конкретного пользователя после прохождения опроса).
Важно отметить, что разработка визуальной части веб-приложения проходила в нетипичной для нас форме — справа налево, так как язык сайта иврит, и это добавляло сложности.
ИТОГ этой работы: Успешно получили, отсортировали, обработали и визуализировали данные с функциональной части (Backend). Данные персонализируются при прохождении опроса, т.е. пользователь видит результат — к какой группе он теперь относится.
Также можно увидеть общую картину — результаты всех участников в процентном соотношении. Например, сколько человек из конкретной возрастной категории по разным критериям по большей части довольны своей жизнью, а сколько вообще не рады тому, как обстоят дела.
Персональные данные
Общие данные
Результат нашей работы
1. Теперь на сайте клиента есть интерактивная страница application для расчета и отображения статистики данных (общие и персонализированные) пользователей, которые приняли участие в социальном исследовании.
Вся информация представлена в понятном и эстетически привлекательном виде, а не в формате «сухого» текста, скучных таблиц. Разобраться в диаграммах намного проще.
-
Наш клиент в удобном для него формате получает письма на электронную почту с данными пользователя (по каждому отдельно), а не самостоятельно собирает, как это было раньше.
-
Тот, кто принял участие в опросе, сразу видит свой результат на сайте, т.е. ему не нужно выполнять еще несколько действий, например, отправлять смс или ждать письма на e-mail. Плюс удобно: общие результаты также отображаются онлайн.
Благодаря нашей разработке Заказчик может напрямую ссылаться на результаты социального исследования, они всегда онлайн и периодически обновляются с учетом новых пользователей.
И предлагать потенциальным клиентам разные авторские программы для улучшения их жизни с помощью смс или e-mail-рассылки. Эти данные пользователи оставляют еще на этапе заполнения анкеты, чтобы узнать свой уровень удовлетворенности жизнью.