Единый стандарт для создания интерфейсов цифровых продуктов «Газпром нефти»

Заказчик
ПАО "Газпром нефть"
Руководитель проекта со стороны заказчика
ИТ-поставщик
ООО "Газпромнефть - Цифровые решения"
Год завершения проекта
2020
Сроки выполнения проекта
Ноябрь, 2019 - Декабрь, 2020
Масштаб проекта
6200 человеко-часов
Цели

1.    Упростить и снизить стоимость разработки интерфейсов цифровых продуктов как со стороны дизайна, так и со стороны фронтенд-разработки.

2.    Сделать все продукты одинаково удобными, знакомыми и привычными для пользователей (единообразный пользовательский опыт).


Уникальность проекта

1.    Поддержка гибкой тематизации. Наша дизайн-система имеет набор тем из «коробки» (светлая, темная и презентационная) и даёт возможность дизайнеру или разработчику быстро создать свою уникальную тему.

2.    Вариативность. Все компоненты в библиотеке обладают большим количеством модификаций, как визуальных, так и функциональных. Это позволяет создавать очень разные по стилю, нагруженности и целям сервисы одним и тем же набором компонент. Библиотека содержит в себе набор компонентов и графиков, достаточных для создания среднего по сложности сервиса.

3.    Open source. Дизайн-система Consta лежит в открытом доступе и доступна всем, как для использования, так и для контрибьютинга. Работы по дизайн-системе ведутся непрерывно. Все планы и запросы пользователей также в открытом доступе. Любой может посмотреть статус той или иной фичи или добавить свою.

Использованное ПО

Figma, React JS, TypeScript.

Сложность реализации

Разработка дизайн-системы – сложная и большая работа.

Мы стараемся заложить максимальную гибкость каждого компонента, но с сохранением консистентности. Собираем все модификации и предоставляем удобные способы взаимодействия с компонентами средствами Figma (для дизайнеров) и гибко настроенного API (для разработчиков).

Описание проекта

Компания «Газпром нефть» ежегодно создаёт большое количество цифровых продуктов. Все они делаются разными командами, подрядными организациями и подразделениями. Используются разные технологические стеки. Как следствие, конечному пользователю приходится взаимодействовать с большим количеством инструментов, имеющих разные интерфейсы. Нет единства решений, из-за чего много времени тратится на когнитивное переключение между визуально абсолютно разными интерфейсами.

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

Дизайн-система Consta — это библиотека компонентов, правила их взаимодействия и принципы для создания своих уникальных компонентов.

Компоненты — кнопки, иконки, списки, таблицы и другие элементы, из которых собирается интерфейс, реализованы в двух форматах: для дизайнеров, чтобы собирать макеты в Figma, и для разработчиков – в виде кода на React (в репозитории на GitHub).

На витрине дизайн-системы в Сторибуке можно менять параметры и смотреть, как меняются элементы. У каждого компонента есть вкладка с подробной документацией.

Дизайн-система регулярно обновляется, выпускаются еженедельные релизы.

Подробнее на consta.gazprom-neft.ru

География проекта

Все регионы присутствия «Газпром нефти», подрядчики, создающие продукты для «Газпром нефти».

Коментарии: 8
  • Александр Артюхов
    Рейтинг: 304
    Сберлогистика
    Руководитель проекта
    18.11.2020 18:19

    Ведётся ли статистика использования решения внутри компании и внешними потребителями?
    Кто является заказчиком данного проекта, и кто фактически является бизнес-владельцем созданного решения? Имеется в виду должность работника...
    Есть ли у компании опыт решения потенциальных конфликтов интересов при владении и поддержке подобного рода продуктом?

  • Андрей Белевцев
    Рейтинг: 628
    ПАО "Газпром нефть"
    Директор дирекции по цифровой трансформации
    01.12.2020 12:51

    Добрый день!

    У нас есть и внутренние, и внешние потребители дизайн-системы. И те, и другие не только ее используют, но и участвуют в ее развитии. Сейчас мы пониманием уровень использования системы в продуктах внутри компании.
    С точки зрения использования внешними потребителями на данный момент можно оценивать только количество скачиваний, а это не всегда совпадает с количеством реальных пользователей:)
    Заказчик данного проекта – Дирекция по цифровой трансформации "Газпром нефти". Бизнес-владельцем является Руководитель направления дизайна продуктов Центра дизайна и развития продуктов компании.

    Конфликты интересов бывают, как любой вызов - это возможность, решаем и используем их конструктивно.

  • Павел Тутушин
    Рейтинг: 5
    ООО Газпромнефть-Центр
    Владелец продукта АЗС.GO
    24.12.2020 17:44

    Платформа реально помогает оптимизировать временные затраты и ресурсы разработки, что очень важно для владельца продукта, особенно при запуске MVP и проверки гипотезы.

    • Андрей Белевцев Павел
      Рейтинг: 628
      ПАО "Газпром нефть"
      Директор дирекции по цифровой трансформации
      30.12.2020 12:27

      Павел, спасибо за высокую оценку! :)

  • Дмитрий Капинос
    Рейтинг: 291
    МГУ, Экономический факультет
    Предприниматель, консультант в области управления и ИТ, к.э.н., преподаватель МГУ
    29.12.2020 02:23

    Ух ты, у вас собственный FOSS-проект! )

    Газпром нефть сегодня не перестаёт приятно удивлять.

    Можно уточнить, это фреймворк для веб-интерфейса, насколько я понимаю. А можно ли его адаптировать для приложений для ПК и для мобильных приложений? Если речь идёт о единстве оформления, то логично было бы стремиться к единому стилю на всех устройствах.

    • Андрей Белевцев Дмитрий
      Рейтинг: 628
      ПАО "Газпром нефть"
      Директор дирекции по цифровой трансформации
      31.12.2020 11:54

      Дмитрий, спасибо!

      Дизайн-система Consta подходит для тех, кто ведёт разработку на React JS. Это могут быть и десктопные, и мобильные приложения.

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

  • Максим Часовиков
    Рейтинг: 1020
    МГУ имени М.В.Ломоносова, Центр цифровой экономики
    Заместитель руководителя службы управления проектами
    05.01.2021 23:18

    Интересен опыт создания «витрины»возможных пользовательских интерфейсов на корпоративным уровне. Будет интересно узнать, если вы это отслеживаете, как в результате такой витрины изменится восприятие ваших продуктов конечными пользователями. Есть подозрение, что доверие должно увеличиться.

    • Андрей Белевцев Максим
      Рейтинг: 628
      ПАО "Газпром нефть"
      Директор дирекции по цифровой трансформации
      06.01.2021 16:36

      Максим,
      Мы как раз занимаемся созданием такой "витрины". Конечно, это самый наглядный способ продемонстрировать возможности применения дизайн-системы :) Обязательно расскажем об этом отдельно.

Год
Предметная область
Отрасль
Управление