Цифровая платформа «Экопортал»
Должность: старший дизайнер
Организация: ГК «Эттон»
Дата: июнь 2023 - февраль 2024
Организация: ГК «Эттон»
Дата: июнь 2023 - февраль 2024
Команда:
- руководитель проекта
- 12 аналитиков
- 3 дизайнера
- 14 разработчиков
- 2 тестировщика
Заказчик: Министерство экологии РТ
Цель: разработать веб-сервис - «Экопортал»
Цель: разработать веб-сервис - «Экопортал»
Описание проекта
«Экопортал» - цифровая платформа отрасли экологии и природопользования, предназначенная для управления природными ресурсами и контролем за состоянием окружающей среды. Пользователи - управления и отделы Министерства экологии и природных ресурсов Республики Татарстан.
Структура платформы
Платформа состоит из 6 подсистем, включающих 14 модулей и разделов:
- «Недра» предоставляют пользователю электронное ведение, автоматизацию и контроль над обеспечивающей деятельность недропользователя информацией.
- «Надзор» предназначен для автоматизации проверки и соблюдения природоохранного законодательства.
- «Экомониторинг» автоматизирует расчет данных об окружающей среде, позволяет принимать необходимые регулирующие меры.
- «Нормативно-справочная информация» («НСИ») обеспечивает работу с регламентирующей документацией и отчетами.
- «Картография» предназначена для работы с картами и географическими объектами.
- «Администрирование» обеспечивает управление и контроль над системой.
Для примера приведем иерархию меню подсистемы «Надзор», в которой наглядно отображается сложная структура и информационная насыщенность платформы.
Организация работы
1. Разработка макетов по задачам от аналитиков:
1.1. Анализ задачи (Redmine), создание UX/UI дизайна интерфейсов (Figma).
1.2. Проработка неучтенного в ТЗ заказчика/аналитика пользовательского опыта, сбор ограничений и требований, формирование предложений по улучшению.
2. Согласование с командой новых процессов и элементов:
2.1. Обсуждение с разработчиками, аналитиками и ЛПР возможностей и ограничений при отработке пользовательских сценариев и новых UX решений;
2.2. Внесение корректировок в макеты по результатам обсуждения и по обновлениям в ТЗ.
3. Создание библиотеки UI-элементов:
3.1 Сборка сложносоставных компонентов элементов интерфейса на основе базовой библиотеки UI-элементов (Material Design);
3.2 Согласование с разработчиками и ЛПР новых и нестандартных UI элементов.
1.1. Анализ задачи (Redmine), создание UX/UI дизайна интерфейсов (Figma).
1.2. Проработка неучтенного в ТЗ заказчика/аналитика пользовательского опыта, сбор ограничений и требований, формирование предложений по улучшению.
2. Согласование с командой новых процессов и элементов:
2.1. Обсуждение с разработчиками, аналитиками и ЛПР возможностей и ограничений при отработке пользовательских сценариев и новых UX решений;
2.2. Внесение корректировок в макеты по результатам обсуждения и по обновлениям в ТЗ.
3. Создание библиотеки UI-элементов:
3.1 Сборка сложносоставных компонентов элементов интерфейса на основе базовой библиотеки UI-элементов (Material Design);
3.2 Согласование с разработчиками и ЛПР новых и нестандартных UI элементов.
Процесс UX/UI дизайна
Рассмотрим процесс UX/UI дизайна на примере решения задачи.
Задача: разработать карточки в режиме создания и редактирования.
Исходные условия: предусмотрена возможность открытия карточки в режиме просмотра из реестра в виде сайдбара. Это позволяет пользователю быстро получить необходимую информацию и сравнивать данные разных карточек на одной странице.
Решение: для режимов создания и редактирования (и дополнительно для режима чтения) разработаны карточки полноэкранной версии с переходом на отдельную страницу. Такой формат обеспечивает пользователю удобное заполнение данных при создании и редактировании. А в режиме чтения позволяет комфортно воспринимать информацию и предоставляет наглядную карту.
Задача: разработать карточки в режиме создания и редактирования.
Исходные условия: предусмотрена возможность открытия карточки в режиме просмотра из реестра в виде сайдбара. Это позволяет пользователю быстро получить необходимую информацию и сравнивать данные разных карточек на одной странице.
Решение: для режимов создания и редактирования (и дополнительно для режима чтения) разработаны карточки полноэкранной версии с переходом на отдельную страницу. Такой формат обеспечивает пользователю удобное заполнение данных при создании и редактировании. А в режиме чтения позволяет комфортно воспринимать информацию и предоставляет наглядную карту.
Основные UX/UI решения при выполнении задачи:
- показатели сгруппированы в смысловые блоки (совместная работа с аналитиками);
- блоки объединены в шаги для заполнения;
- предусмотрена кликабельная навигация;
- разработана статусная модель процесса заполнения для блоков карточки и навигации.
Дизайн веб-сервиса выполнен для десктопной версии с Components, Variants, Auto Layout во фреймах 1440 px. Мобильная версия на период разработки не предусматривалась, однако дизайн решения принимались с учетом возможной разработки адаптива под другие устройства.
Брендовый шрифт - Golos.
Брендовый шрифт - Golos.
Результат
50 реестров
Более 50 реестров с настройками отображаемых столбцов, фильтрацией данных и поиском по реестру и столбцам
200 карточек
Около 200 карточек в виде сайдбаров и полноэкранных форм в режиме чтения, создания и редактирования
30 расчетных форм
Около 30 страниц с формами расчета вреда экологии в категориях «Почва», «Недра», «Вода», «Воздух»
20 графиков
Более 20 графиков, таблиц и виджетов для дашбордов главных страниц
Иные элементы
Иные необходимые элементы - модальные окна, панели меню и т.п.
Библиотека
Библиотека UI-китов сложных компонентов на базе атомов и молекул библиотеки Material Design
Цифровая платформа «Экопортал»
Должность: старший дизайнер
Организация: ГК «Эттон»
Дата: июнь 2023 - январь 2024
Организация: ГК «Эттон»
Дата: июнь 2023 - январь 2024
Команда:
- руководитель проекта
- 12 аналитиков
- 3 дизайнера
- 14 разработчиков
- 2 тестировщика
Заказчик: Министерство экологии РТ
Цель: разработать веб-сервис - «Экопортал»
Цель: разработать веб-сервис - «Экопортал»
Описание проекта
«Экопортал» - цифровая платформа отрасли экологии и природопользования, предназначенная для управления природными ресурсами и контролем за состоянием окружающей среды. Пользователи - управления и отделы Министерства экологии и природных ресурсов Республики Татарстан.
Структура платформы
Платформа состоит из 6 подсистем, включающих 14 модулей и разделов:
- «Недра» предоставляют пользователю электронное ведение, автоматизацию и контроль над обеспечивающей деятельность недропользователя информацией.
- «Надзор» предназначен для автоматизации проверки и соблюдения природоохранного законодательства.
- «Экомониторинг» автоматизирует расчет данных об окружающей среде, позволяет принимать необходимые регулирующие меры.
- «Нормативно-справочная информация» («НСИ») обеспечивает работу с регламентирующей документацией и отчетами.
- «Картография» предназначена для работы с картами и географическими объектами.
- «Администрирование» обеспечивает управление и контроль над системой.
Для примера приведем иерархию меню подсистемы «Надзор», в которой наглядно отображается сложная структура и информационная насыщенность платформы.
Организация работы
1. Разработка макетов по задачам от аналитиков:
1.1. Анализ задачи (Redmine), создание UX/UI дизайна интерфейсов (Figma).
1.2. Проработка неучтенного в ТЗ заказчика/аналитика пользовательского опыта, сбор ограничений и требований, формирование предложений по улучшению.
1.1. Анализ задачи (Redmine), создание UX/UI дизайна интерфейсов (Figma).
1.2. Проработка неучтенного в ТЗ заказчика/аналитика пользовательского опыта, сбор ограничений и требований, формирование предложений по улучшению.
2. Согласование с командой новых процессов и элементов:
2.1. Обсуждение с разработчиками, аналитиками и ЛПР возможностей и ограничений при отработке пользовательских сценариев и новых UX решений;
2.2. Внесение корректировок в макеты по результатам обсуждения и по обновлениям в ТЗ.
2.1. Обсуждение с разработчиками, аналитиками и ЛПР возможностей и ограничений при отработке пользовательских сценариев и новых UX решений;
2.2. Внесение корректировок в макеты по результатам обсуждения и по обновлениям в ТЗ.
3. Создание библиотеки UI-элементов:
3.1 Сборка сложносоставных компонентов элементов интерфейса на основе базовой библиотеки UI-элементов (Material Design);
3.2 Согласование с разработчиками и ЛПР новых и нестандартных UI элементов.
3.1 Сборка сложносоставных компонентов элементов интерфейса на основе базовой библиотеки UI-элементов (Material Design);
3.2 Согласование с разработчиками и ЛПР новых и нестандартных UI элементов.
Процесс UX/UI дизайна
Рассмотрим процесс UX/UI дизайна на примере решения задачи.
Задача: разработать карточки в режиме создания и редактирования.
Исходные условия: предусмотрена возможность открытия карточки в режиме просмотра из реестра в виде сайдбара. Это позволяет пользователю быстро получить необходимую информацию и сравнивать данные разных карточек на одной странице.
Решение: для режимов создания и редактирования (и дополнительно для режима чтения) разработаны карточки полноэкранной версии с переходом на отдельную страницу. Такой формат обеспечивает пользователю удобное заполнение данных при создании и редактировании. А в режиме чтения позволяет комфортно воспринимать информацию и предоставляет наглядную карту.
Задача: разработать карточки в режиме создания и редактирования.
Исходные условия: предусмотрена возможность открытия карточки в режиме просмотра из реестра в виде сайдбара. Это позволяет пользователю быстро получить необходимую информацию и сравнивать данные разных карточек на одной странице.
Решение: для режимов создания и редактирования (и дополнительно для режима чтения) разработаны карточки полноэкранной версии с переходом на отдельную страницу. Такой формат обеспечивает пользователю удобное заполнение данных при создании и редактировании. А в режиме чтения позволяет комфортно воспринимать информацию и предоставляет наглядную карту.
Основные UX/UI решения при выполнении задачи:
- показатели сгруппированы в смысловые блоки (совместная работа с аналитиками);
- блоки объединены в шаги для заполнения;
- предусмотрена кликабельная навигация;
- разработана статусная модель процесса заполнения для блоков карточки и навигации.
Дизайн веб-приложения выполнен для десктопной версии с Components, Variants, Auto Layout во фреймах 1440 px.
Мобильная версия на период разработки не предусматривалась, однако дизайн решения принимались с учетом возможной разработки адаптива под другие устройства.
Брендовый шрифт - Golos.
Мобильная версия на период разработки не предусматривалась, однако дизайн решения принимались с учетом возможной разработки адаптива под другие устройства.
Брендовый шрифт - Golos.
Результат
50 реестров
Более 50 реестров с настройками отображения столбцов, фильтрацией данных и поиском
200 карточек
Около 200 карточек в виде сайдбаров и полноэкранных форм в режиме чтения, создания и редактирования с учетом статусных моделей
30 форм
Около 30 страниц с формами расчета вреда экологии в категориях «Почва», «Недра», «Вода», «Воздух»
20 графиков
Более 20 графиков, таблиц и виджетов для дашбордов главных страниц
Иные элементы
Иные необходимые элементы - модальные окна, панели меню и т.п.
Библиотека
Библиотека уникальных UI-китов
