Трудно отрицать важность CRM-cистемы для компаний, ориентированных на клиента. В студии Stfalcon.com мы разработали такую систему для строительной компании. Проект должен был решать ряд важных задач, связанных с автоматизацией процессов продажи и обслуживания клиентов. В частности, сохранение истории взаимоотношений и планирование контактов с клиентом, подбор недвижимости по интересам, уведомления о событиях, составление договоров.
![](https://storage.stfalcon.com/uploads/images/55d7136058ed7.webp)
Проектирование системы
![](https://storage.stfalcon.com/uploads/images/55d713d9c1a76.webp)
Во время многочисленных встреч с заказчиком обсуждались все вопросы и нюансы, а также составлялась подробная user story проекта, что позволило удобно разделить проект на этапы и спланировать разработку. User story стала основой для разработки архитектуры базы данных.
Дизайн интерфейса
В студии мы стремимся создавать чистые и дружеские для пользователя интерфейсы. Пользовательский опыт играет главную роль в таком интерфейсе, поэтому мы проводили встречи с будущими пользователями и изучали их опыт.
Создание прототипа
Разработку дизайна для проекта мы начали с создания функционального прототипа, так как нам необходимо было спроектировать как будущий пользователь будет взаимодействовать с системой. Не тратя время на визуальный стиль, мы сконцентрировались на удобстве и функциональности. В системе присутствовало много “узких мест”, где необходимо было продумать все детали и мелочи.
На презентации прототипа клиенту мы продемонстрировали возможности и логику работы будущей системы. Прототип позволил проверить взаимодействие менеджера с интерфейсом системы и ведение работы с клиентами компании. На этом этапе мы получили от клиента важные замечания и доработали интерфейс. После чего смогли приступить к дизайну визуального стиля системы.
Прототип стал отличной базой для front-end разработчиков. Благодаря прототипу удалось избежать многих неясностей при разработке интерфейса разработчиками.
![](https://storage.stfalcon.com/uploads/images/55d7140b7dd35.webp)
Визуальный язык
Важнейшей задачей любого графического интерфейса является формирование визуального языка общения системы с человеком. Учитывая, что будущие пользователи в работе выделяют статусы квартир определенным цветом, мы использовали это для лучшего понимания CRM-системы. Цвета не ярких оттенков не отвлекают и не утомляют глаз на протяжении рабочего дня. Общая схема проходит сквозь всю систему, упрощая пользование приложением.
![](https://storage.stfalcon.com/uploads/images/55d7142edb9cb.webp)
Типографика
В нашем интерфейсе часто используются числа, поэтому выбор шрифта во многом определялся хорошим отображением цифр. Большое количество мелких подписей также требовало от шрифта хорошей читаемости в мелком размере. Поэтому был выбран шрифт Lato, отвечающий этим требованиям.
![](https://storage.stfalcon.com/uploads/images/55d7144c39bc1.webp)
Программирование
Проект реализован на Symfony2, одном из самых популярных фреймворков. Данный фрейворк позволяет легко решать рутинные задачи программиста, так как использует передовые технологии веб-программирования. Проект построен на основе сервис-ориентированой ахитектуры, с использованием независимых, слабо-связанных компонентов. В качестве основной базы данных используется MySQL.
API
В проекте используется распределенная клиент-сервисная архитектура с взаимодействием по RESTful API. Использование системы взаимодействия слабосвязаных компонентов обеспечивает надежность и легкую маштабируемость.
Одностраничное приложение
![](https://storage.stfalcon.com/uploads/images/55d7147ab7ee8.gif)
Single Page Application, в отличии от стандартного веб-приложения, выделяется быстротой отклика на действия в пользовательском интерфейсе; поскольку не требуется перезагрузка страницы, все визуальные элементы конструируются прямо в браузере с помощью JavaScript путем манипуляций с DOM-структурой документа. Такие приложение могут работать в режиме offline с елементами realtime.
Ember.js
Для разработки клиентского приложения был выбран Ember.js. Приложения на данном фреймворке легко расширять и поддерживать. Все элементы интерфейса написаны как компоненты, что позволяет инкапсулировать логику и повторно использовать код.
Например, элементы UI реализованы в виде компонентов, от базового input до сложного select, с поиском подсветкой и другим функционалом. Благодаря наследованию мы не пишем с нуля, а расширяем компоненты, что существенно сокращает время разработки и предупреждает возникновение ошибок, так как компоненты уже использовались на других проектах и проверены в бою.
С Ember.js приложение работает быстро, несмотря на сложный дизайн и большое количество обрабатываемых данных.
![](https://storage.stfalcon.com/uploads/images/55d714acf1d53.gif)
Работа с секцией
В системе дома называются проектами и делятся на секции (подъезды). Менеджер на точке продажи в основном работает с секцией, здесь он видит, какие квартиры уже проданы, какие забронированы, какие нужно скорее продать. Здесь же находятся кладовки, гаражи и коммерческая недвижимость.
![](https://storage.stfalcon.com/uploads/images/55d71500da2d4.webp)
Взаимодействие с клиентами
Это стержень любой CRM-системы. База клиентов содержит не только основные данные о клиенте, но и список его интересов и историю контактов. Со страницы клиента можно забронировать или продать квартиру, а также перейти в поиск квартир по ключевым интересам клиента.
![](https://storage.stfalcon.com/uploads/images/55d71500da2d4.webp)
Подбор квартиры по интересам
Поиск недвижимости имеет фильтр по цене, количеству комнат и этажу. Есть возможность увидеть квартиры, забронированные другими менеджерами. Результаты группируются по секциям и сортируются по удалению от точки продажи.
![](https://storage.stfalcon.com/uploads/images/55d71500da2d4.webp)
Система напоминаний
Уведомления предназначены для того, чтобы напоминать пользователю о запланированных контактах с клиентом и заканчивающихся бронях. Отдельным таблицами выводятся просроченные события и события на сегодня.
![](https://storage.stfalcon.com/uploads/images/55d71500da2d4.webp)
Над проектом работали:
- Дима Коваленко
Руководитель проекта
- Олег
Дизайнер
- Максим
Дизайнер
- Игорь Богдосаров
Верстальщик
- Саша Ленский
Back-end разработчик
- Тимур
Back-end разработчик
- Михаил Вильшанский
Back-end разработчик
- Толя Макаров
Front-end разработчик