ГЕО-ПЛАТФОРМА
CLASS
CLASS
Дизайн экосистемы продуктов для автоматизации деятельности участников рынка сельскохозяйственного страхования в области оценки состояния посевных площадей
с целью оптимизации затрат и повышения эффективности
с целью оптимизации затрат и повышения эффективности
Задача
Моя задача состояла в том, чтобы сделать гибкую экосистему облачной платформы, которая позволяет создавать программные продукты и web-сервисы для мониторинга территорий, анализа состояния объектов по геоданным и прогнозирования их изменений в рамках сельскохозяйственной отрасли.
Впоследствии на базе экосистемы мною был разработан дизайн нескольких веб-сервисов, включая:
Впоследствии на базе экосистемы мною был разработан дизайн нескольких веб-сервисов, включая:
- систему агрострахования;
- сервис по расчёту вида и нормы внесения удобрений;
- инструмент анализа СМИ на основе ИИ.
Роль в проекте:
Исследование пользователей, дизайн взаимодействия, прототипирование, визуальный дизайн, дизайн логотипов и иконок, тестирование.
Дизайн-процесс
Исследование
Выявление потребностей целевой аудитории, создание портретов пользователей, конкурентный анализ
Подготовка
Прототипирование набросков для выявления оптимального направления развития. Создание небольших фокус-групп для проверки гипотез и проведения опросов
Прототипирование
Углубленное прототипирование для лучшего понимания выбранной концепции до перехода к визуальной
части
Дизайн интерфейса
Визуальная составляющая и «лицо» продукта. По нему будут судить о продукте те, кто увидит его в первый раз.
Поддержка
Дальнейшие доработки и нововведения в продукт, связанные как с пожеланиями пользователей, так и с нашим собственным пониманием
пути развития
Прототипирование
На этапе прототипирования перед нами стоял ряд противоречивых задач, который необходимо было решить.
С одной стороны, нужно было учесть большой объем запланированного функционала с учетом развертывания нескольких сервисов. Для этого интерфейс должен вмещать в себя весь этот функционал.
С другой стороны, в основе портала лежит картографическая основа, а значит основное место следует отвести под карту.
Помимо основного инструментария есть и общие для картографии элементы, которые должны быть доступны независимо от того, с какой задачей мы работаем в данный момент.
С одной стороны, нужно было учесть большой объем запланированного функционала с учетом развертывания нескольких сервисов. Для этого интерфейс должен вмещать в себя весь этот функционал.
С другой стороны, в основе портала лежит картографическая основа, а значит основное место следует отвести под карту.
Помимо основного инструментария есть и общие для картографии элементы, которые должны быть доступны независимо от того, с какой задачей мы работаем в данный момент.
If a building becomes architecture, then it is art
Для начала мы разделили весь интерфейс на три ключевых части.
В левом сайдбаре мы разместили основные вкладки для работы со снимками, добавления их в избранное, а также разместили список заказов. В будущем здесь будут ключевые разделы проектов.
В правом сайдбаре размещены инструменты для работы с картой: инструмент измерения расстояний, печать, получение информации по точке, менеджер слоев, работа с контуром поиска. В будущем мы расширим панель инструментов, от некоторых откажемся. Также в правом сайдбаре находится личный кабинет пользователя, переключение языков и выход из системы.
В центральной, самой большой части интерфейса, разместили карту, а в нижней части панель координат, масштаба и копирайты.
Сформировав общую компоновку мы приступили к проектированию других ключевых экранов, понимание которых имелось на тот момент.
В левом сайдбаре мы разместили основные вкладки для работы со снимками, добавления их в избранное, а также разместили список заказов. В будущем здесь будут ключевые разделы проектов.
В правом сайдбаре размещены инструменты для работы с картой: инструмент измерения расстояний, печать, получение информации по точке, менеджер слоев, работа с контуром поиска. В будущем мы расширим панель инструментов, от некоторых откажемся. Также в правом сайдбаре находится личный кабинет пользователя, переключение языков и выход из системы.
В центральной, самой большой части интерфейса, разместили карту, а в нижней части панель координат, масштаба и копирайты.
Сформировав общую компоновку мы приступили к проектированию других ключевых экранов, понимание которых имелось на тот момент.
Дизайн
| Типографика На начальном этапе дизайна нужно было выбрать шрифт. Хотелось подобрать что-то простое, удобное для быстрого чтения, но при этом достаточно красивое. Также хотелось чтобы шрифт был интуитивно узнаваем и не вынуждал некоторое время привыкать к гарнитуре. Идеальным выбором для нас стал шрифт Open Sans, который, помимо вышеописанного, хорошо адаптирован для web-интерфейсов. |
Цвета
Имея понимание того, что пользователю чаще всего предстоит работать со спутниковой подложкой и снимками, светлая тема интерфейса создавала бы неприятный контраст с основной областью интерфейса — картой.
Поэтому еще на этапе прототипирования мы решили сделать темную тему основной цветовой темой интерфейса.
Когда дело дошло до выбора цветов, мы отрисовали несколько ключевых экранов дизайна, чтобы выявить существующие конфликты между светлой и темной темами. Светлую тему временно отложили на следующий этап.
После этого были подобраны все остальные цвета для темной темы, учитывая фирменные цвета компании.
Для каждого из сервисов был разработан свой логотип. Так как мы начинали с ключевого сервиса CLASS, то первым был разработан его логотип.
Далее мы приступили к детальной прорисовке прототипов на основании утвержденных типографики и цветов, постепенно добавляя ключевые элементы в гайдлайн: инпуты, дропдауны, кнопки, списки, всплывающие окна, алерты и другие элементы интерфейса.
Что-то вследствие тестирования менялось, мы подстраивались под нужды пользователей, интерфейс рос и расширялся.
Что-то вследствие тестирования менялось, мы подстраивались под нужды пользователей, интерфейс рос и расширялся.
Результаты внедрения
Нашей системой пользуются более 20 агрохолдингов и хозяйств в более чем
15 регионах
15 регионах
С самого начала мы стремились создать единую эко-систему, что упростило дальнейшую разработку. Изначально платформа решала только задачи мониторинга, но благодаря модульной архитектуре мы смогли создать еще два независимых продукта:
Однако были и минусы: не всегда картографическая основа была важна. Например, в обучении ИИ карта была практически не нужна, поэтому центральную площадь пришлось переделать под область дашбордов.
В остальном подход одной дизайн-платформы для разных продуктов полностью себя оправдал за счет значительного снижения временных и финансовых затрат на доработку новых продуктов. Тем самым мы раньше могли переходить к тестированию, а не сидеть на прототипах.
- сервис по контролю за введением чрезвычайных положений в регионах;
- внутренний сервис обучения AI анализу средств массовой информации.
Однако были и минусы: не всегда картографическая основа была важна. Например, в обучении ИИ карта была практически не нужна, поэтому центральную площадь пришлось переделать под область дашбордов.
В остальном подход одной дизайн-платформы для разных продуктов полностью себя оправдал за счет значительного снижения временных и финансовых затрат на доработку новых продуктов. Тем самым мы раньше могли переходить к тестированию, а не сидеть на прототипах.
Вместо выводов
Этот проект, длящийся почти 5 лет, показал, как универсальная дизайн-система способна не только ускорить разработку продуктов для решения разных задач, но и стать драйвером для раздвижения творческих горизонтов планирования как для компании, так и для самого дизайнера. Сегодня платформа служит основой для 5+ сервисов, а её гибкость позволяет адаптироваться к неожиданным запросам рынка.
Этот проект — история о том, как дизайн-система перестала быть «рамками» и стала языком, на котором компания говорит с клиентами. Вряд ли я теперь смогу взяться за проект и на этапе ресерча не спросить: а как будет масштабироваться наш продукт?
Этот проект — история о том, как дизайн-система перестала быть «рамками» и стала языком, на котором компания говорит с клиентами. Вряд ли я теперь смогу взяться за проект и на этапе ресерча не спросить: а как будет масштабироваться наш продукт?
Спасибо за внимание
