Единое фронтальное решение
Редизайн сервиса обслуживания клиентов «Россельхозбанка».
Период
март 2020 — дек 2023
Период
март 2020 — дек 2023
Период
март 2020 — дек 2023
Период
март 2020 — дек 2023
Период
март 2020 — дек 2023
Период
март 2020 — дек 2023
Период
март 2020 — дек 2023
Дизайн-команда
Дизайн-команда
Дизайн-команда
Дизайн-команда
Дизайн-команда
Дизайн-команда
Дизайн-команда
Роль
Продуктовый дизайнер → Руководитель направления
Роль
Продуктовый дизайнер → Руководитель направления
Роль
Продуктовый дизайнер → Руководитель направления
Роль
Продуктовый дизайнер → Руководитель направления
Роль
Продуктовый дизайнер → Руководитель направления
Роль
Продуктовый дизайнер → Руководитель направления
Роль
Продуктовый дизайнер → Руководитель направления
Пользователи
Офисные сотрудники банка (B2B)
Пользователи
Офисные сотрудники банка (B2B)
Пользователи
Офисные сотрудники банка (B2B)
Пользователи
Офисные сотрудники банка (B2B)
Пользователи
Офисные сотрудники банка (B2B)
Пользователи
Офисные сотрудники банка (B2B)
Пользователи
Офисные сотрудники банка (B2B)
Технологии
React, Carbon Design System, Figma, Storybook
Технологии
React, Carbon Design System, Figma, Storybook
Технологии
React, Carbon Design System, Figma, Storybook
Технологии
React, Carbon Design System, Figma, Storybook
Технологии
React, Carbon Design System, Figma, Storybook
Технологии
React, Carbon Design System, Figma, Storybook
Технологии
React, Carbon Design System, Figma, Storybook
Внедрение Carbon Design System
У банка одним из флагманских продуктов является ипотечное направление. Я пришёл в новую команду ипотеки. Её собрали с задачей разработать и запустить новый продукт «Оформление ипотеки» в кратчайшие сроки.
Ограничения:
— Устаревший монолитный фронтенд.
— Жёсткие дедлайны.
— В команде разработки были я (продуктовый дизайнер) и фронтенд-разработчик.
Действия:
— Продал решение по реализации собственной библиотеки компонентов на основе open source дизайн-системы.
— Выбрали Carbon Design System вместо Material Design и Ant Design — из-за гибкости и множества реализованных, готовых решений для нестандартных интерфейсов.
— Создали MVP за 2 спринта — представили бизнесу работающий процесс оформления ипотеки.
— Бизнес удивила скорость — благодаря готовым компонентам разработка шла быстрее.
Внедрение Carbon Design System
У банка одним из флагманских продуктов является ипотечное направление. Я пришёл в новую команду ипотеки. Её собрали с задачей разработать и запустить новый продукт «Оформление ипотеки» в кратчайшие сроки.
Ограничения:
— Устаревший монолитный фронтенд.
— Жёсткие дедлайны.
— В команде разработки были я (продуктовый дизайнер) и фронтенд-разработчик.
Действия:
— Продал решение по реализации собственной библиотеки компонентов на основе open source дизайн-системы.
— Выбрали Carbon Design System вместо Material Design и Ant Design — из-за гибкости и множества реализованных, готовых решений для нестандартных интерфейсов.
— Создали MVP за 2 спринта — представили бизнесу работающий процесс оформления ипотеки.
— Бизнес удивила скорость — благодаря готовым компонентам разработка шла быстрее.
Внедрение Carbon Design System
У банка одним из флагманских продуктов является ипотечное направление. Я пришёл в новую команду ипотеки. Её собрали с задачей разработать и запустить новый продукт «Оформление ипотеки» в кратчайшие сроки.
Ограничения:
— Устаревший монолитный фронтенд.
— Жёсткие дедлайны.
— В команде разработки были я (продуктовый дизайнер) и фронтенд-разработчик.
Действия:
— Продал решение по реализации собственной библиотеки компонентов на основе open source дизайн-системы.
— Выбрали Carbon Design System вместо Material Design и Ant Design — из-за гибкости и множества реализованных, готовых решений для нестандартных интерфейсов.
— Создали MVP за 2 спринта — представили бизнесу работающий процесс оформления ипотеки.
— Бизнес удивила скорость — благодаря готовым компонентам разработка шла быстрее.
Внедрение Carbon Design System
У банка одним из флагманских продуктов является ипотечное направление. Я пришёл в новую команду ипотеки. Её собрали с задачей разработать и запустить новый продукт «Оформление ипотеки» в кратчайшие сроки.
Ограничения:
— Устаревший монолитный фронтенд.
— Жёсткие дедлайны.
— В команде разработки были я (продуктовый дизайнер) и фронтенд-разработчик.
Действия:
— Продал решение по реализации собственной библиотеки компонентов на основе open source дизайн-системы.
— Выбрали Carbon Design System вместо Material Design и Ant Design — из-за гибкости и множества реализованных, готовых решений для нестандартных интерфейсов.
— Создали MVP за 2 спринта — представили бизнесу работающий процесс оформления ипотеки.
— Бизнес удивила скорость — благодаря готовым компонентам разработка шла быстрее.
Внедрение Carbon Design System
У банка одним из флагманских продуктов является ипотечное направление. Я пришёл в новую команду ипотеки. Её собрали с задачей разработать и запустить новый продукт «Оформление ипотеки» в кратчайшие сроки.
Ограничения:
— Устаревший монолитный фронтенд.
— Жёсткие дедлайны.
— В команде разработки были я (продуктовый дизайнер) и фронтенд-разработчик.
Действия:
— Продал решение по реализации собственной библиотеки компонентов на основе open source дизайн-системы.
— Выбрали Carbon Design System вместо Material Design и Ant Design — из-за гибкости и множества реализованных, готовых решений для нестандартных интерфейсов.
— Создали MVP за 2 спринта — представили бизнесу работающий процесс оформления ипотеки.
— Бизнес удивила скорость — благодаря готовым компонентам разработка шла быстрее.
Внедрение Carbon Design System
У банка одним из флагманских продуктов является ипотечное направление. Я пришёл в новую команду ипотеки. Её собрали с задачей разработать и запустить новый продукт «Оформление ипотеки» в кратчайшие сроки.
Ограничения:
— Устаревший монолитный фронтенд.
— Жёсткие дедлайны.
— В команде разработки были я (продуктовый дизайнер) и фронтенд-разработчик.
Действия:
— Продал решение по реализации собственной библиотеки компонентов на основе open source дизайн-системы.
— Выбрали Carbon Design System вместо Material Design и Ant Design — из-за гибкости и множества реализованных, готовых решений для нестандартных интерфейсов.
— Создали MVP за 2 спринта — представили бизнесу работающий процесс оформления ипотеки.
— Бизнес удивила скорость — благодаря готовым компонентам разработка шла быстрее.
Внедрение Carbon Design System
У банка одним из флагманских продуктов является ипотечное направление. Я пришёл в новую команду ипотеки. Её собрали с задачей разработать и запустить новый продукт «Оформление ипотеки» в кратчайшие сроки.
Ограничения:
— Устаревший монолитный фронтенд.
— Жёсткие дедлайны.
— В команде разработки были я (продуктовый дизайнер) и фронтенд-разработчик.
Действия:
— Продал решение по реализации собственной библиотеки компонентов на основе open source дизайн-системы.
— Выбрали Carbon Design System вместо Material Design и Ant Design — из-за гибкости и множества реализованных, готовых решений для нестандартных интерфейсов.
— Создали MVP за 2 спринта — представили бизнесу работающий процесс оформления ипотеки.
— Бизнес удивила скорость — благодаря готовым компонентам разработка шла быстрее.
Масштабирование и создание дизайн-системы «ЕФР»
После успеха MVP меня повысили до дизайн-лида с задачей:
— Разработать единую дизайн-систему.
— Запустить все новые продукты на ней.
— Провести редизайн текущих продуктов.
— Набрать и обучить команду дизайнеров.
Масштабирование и создание дизайн-системы «ЕФР»
После успеха MVP меня повысили до дизайн-лида с задачей:
— Разработать единую дизайн-систему.
— Запустить все новые продукты на ней.
— Провести редизайн текущих продуктов.
— Набрать и обучить команду дизайнеров.
Масштабирование и создание дизайн-системы «ЕФР»
После успеха MVP меня повысили до дизайн-лида с задачей:
— Разработать единую дизайн-систему.
— Запустить все новые продукты на ней.
— Провести редизайн текущих продуктов.
— Набрать и обучить команду дизайнеров.
Масштабирование и создание дизайн-системы «ЕФР»
После успеха MVP меня повысили до дизайн-лида с задачей:
— Разработать единую дизайн-систему.
— Запустить все новые продукты на ней.
— Провести редизайн текущих продуктов.
— Набрать и обучить команду дизайнеров.
Масштабирование и создание дизайн-системы «ЕФР»
После успеха MVP меня повысили до дизайн-лида с задачей:
— Разработать единую дизайн-систему.
— Запустить все новые продукты на ней.
— Провести редизайн текущих продуктов.
— Набрать и обучить команду дизайнеров.
Масштабирование и создание дизайн-системы «ЕФР»
После успеха MVP меня повысили до дизайн-лида с задачей:
— Разработать единую дизайн-систему.
— Запустить все новые продукты на ней.
— Провести редизайн текущих продуктов.
— Набрать и обучить команду дизайнеров.
Масштабирование и создание дизайн-системы «ЕФР»
После успеха MVP меня повысили до дизайн-лида с задачей:
— Разработать единую дизайн-систему.
— Запустить все новые продукты на ней.
— Провести редизайн текущих продуктов.
— Набрать и обучить команду дизайнеров.
Что сделано:
— Внедрение Carbon Design System и пошаговый переход к собственной версии дизайн-системы.
— Разработка «своих» компонентов: атомы, молекулы, организмы, шаблоны и страницы.
— 4 темы + адаптивность — поддержка увеличения шрифтов, breakpoints на rem.
— Figma + Storybook — синхронизация дизайна и кода («design = code»).
Что сделано:
— Внедрение Carbon Design System и пошаговый переход к собственной версии дизайн-системы.
— Разработка «своих» компонентов: атомы, молекулы, организмы, шаблоны и страницы.
— 4 темы + адаптивность — поддержка увеличения шрифтов, breakpoints на rem.
— Figma + Storybook — синхронизация дизайна и кода («design = code»).
Что сделано:
— Внедрение Carbon Design System и пошаговый переход к собственной версии дизайн-системы.
— Разработка «своих» компонентов: атомы, молекулы, организмы, шаблоны и страницы.
— 4 темы + адаптивность — поддержка увеличения шрифтов, breakpoints на rem.
— Figma + Storybook — синхронизация дизайна и кода («design = code»).
Что сделано:
— Внедрение Carbon Design System и пошаговый переход к собственной версии дизайн-системы.
— Разработка «своих» компонентов: атомы, молекулы, организмы, шаблоны и страницы.
— 4 темы + адаптивность — поддержка увеличения шрифтов, breakpoints на rem.
— Figma + Storybook — синхронизация дизайна и кода («design = code»).
Что сделано:
— Внедрение Carbon Design System и пошаговый переход к собственной версии дизайн-системы.
— Разработка «своих» компонентов: атомы, молекулы, организмы, шаблоны и страницы.
— 4 темы + адаптивность — поддержка увеличения шрифтов, breakpoints на rem.
— Figma + Storybook — синхронизация дизайна и кода («design = code»).
Что сделано:
— Внедрение Carbon Design System и пошаговый переход к собственной версии дизайн-системы.
— Разработка «своих» компонентов: атомы, молекулы, организмы, шаблоны и страницы.
— 4 темы + адаптивность — поддержка увеличения шрифтов, breakpoints на rem.
— Figma + Storybook — синхронизация дизайна и кода («design = code»).
Что сделано:
— Внедрение Carbon Design System и пошаговый переход к собственной версии дизайн-системы.
— Разработка «своих» компонентов: атомы, молекулы, организмы, шаблоны и страницы.
— 4 темы + адаптивность — поддержка увеличения шрифтов, breakpoints на rem.
— Figma + Storybook — синхронизация дизайна и кода («design = code»).
Эффект:
— На 38 % меньше ошибок при тестировании новых функций.
— Дизайн-систему стали использовать в других продуктах банка: колл-центр, сервисы доставки карт, админ-панели.
Эффект:
— На 38 % меньше ошибок при тестировании новых функций.
— Дизайн-систему стали использовать в других продуктах банка: колл-центр, сервисы доставки карт, админ-панели.
Эффект:
— На 38 % меньше ошибок при тестировании новых функций.
— Дизайн-систему стали использовать в других продуктах банка: колл-центр, сервисы доставки карт, админ-панели.
Эффект:
— На 38 % меньше ошибок при тестировании новых функций.
— Дизайн-систему стали использовать в других продуктах банка: колл-центр, сервисы доставки карт, админ-панели.
Эффект:
— На 38 % меньше ошибок при тестировании новых функций.
— Дизайн-систему стали использовать в других продуктах банка: колл-центр, сервисы доставки карт, админ-панели.
Эффект:
— На 38 % меньше ошибок при тестировании новых функций.
— Дизайн-систему стали использовать в других продуктах банка: колл-центр, сервисы доставки карт, админ-панели.
Эффект:
— На 38 % меньше ошибок при тестировании новых функций.
— Дизайн-систему стали использовать в других продуктах банка: колл-центр, сервисы доставки карт, админ-панели.
Оптимизация процессов
Проблема: нехватка ресурсов (1 сеньор + 2 джуна на 16+ команд).
Решение:
— Шаблоны и паттерны для автономной работы — аналитики и разработчики могли запускать фичи без участия дизайнеров.
— Документация в Figma / Storybook — снизила нагрузку на дизайн-команду.
— Обучение команды — ежедневные ревью, пятничные воркшопы.
Оптимизация процессов
Проблема: нехватка ресурсов (1 сеньор + 2 джуна на 16+ команд).
Решение:
— Шаблоны и паттерны для автономной работы — аналитики и разработчики могли запускать фичи без участия дизайнеров.
— Документация в Figma / Storybook — снизила нагрузку на дизайн-команду.
— Обучение команды — ежедневные ревью, пятничные воркшопы.
Оптимизация процессов
Проблема: нехватка ресурсов (1 сеньор + 2 джуна на 16+ команд).
Решение:
— Шаблоны и паттерны для автономной работы — аналитики и разработчики могли запускать фичи без участия дизайнеров.
— Документация в Figma / Storybook — снизила нагрузку на дизайн-команду.
— Обучение команды — ежедневные ревью, пятничные воркшопы.
Оптимизация процессов
Проблема: нехватка ресурсов (1 сеньор + 2 джуна на 16+ команд).
Решение:
— Шаблоны и паттерны для автономной работы — аналитики и разработчики могли запускать фичи без участия дизайнеров.
— Документация в Figma / Storybook — снизила нагрузку на дизайн-команду.
— Обучение команды — ежедневные ревью, пятничные воркшопы.
Оптимизация процессов
Проблема: нехватка ресурсов (1 сеньор + 2 джуна на 16+ команд).
Решение:
— Шаблоны и паттерны для автономной работы — аналитики и разработчики могли запускать фичи без участия дизайнеров.
— Документация в Figma / Storybook — снизила нагрузку на дизайн-команду.
— Обучение команды — ежедневные ревью, пятничные воркшопы.
Оптимизация процессов
Проблема: нехватка ресурсов (1 сеньор + 2 джуна на 16+ команд).
Решение:
— Шаблоны и паттерны для автономной работы — аналитики и разработчики могли запускать фичи без участия дизайнеров.
— Документация в Figma / Storybook — снизила нагрузку на дизайн-команду.
— Обучение команды — ежедневные ревью, пятничные воркшопы.
Оптимизация процессов
Проблема: нехватка ресурсов (1 сеньор + 2 джуна на 16+ команд).
Решение:
— Шаблоны и паттерны для автономной работы — аналитики и разработчики могли запускать фичи без участия дизайнеров.
— Документация в Figma / Storybook — снизила нагрузку на дизайн-команду.
— Обучение команды — ежедневные ревью, пятничные воркшопы.
Обычный процесс:
Только на создание и согласование макетов уходило стабильно от двух дней, а команде разработки нужно минимум 5 дней на реализацию. Получается, каждая задача — уникальное действие.
Обычный процесс:
Только на создание и согласование макетов уходило стабильно от двух дней, а команде разработки нужно минимум 5 дней на реализацию. Получается, каждая задача — уникальное действие.
Обычный процесс:
Только на создание и согласование макетов уходило стабильно от двух дней, а команде разработки нужно минимум 5 дней на реализацию. Получается, каждая задача — уникальное действие.
Обычный процесс:
Только на создание и согласование макетов уходило стабильно от двух дней, а команде разработки нужно минимум 5 дней на реализацию. Получается, каждая задача — уникальное действие.
Обычный процесс:
Только на создание и согласование макетов уходило стабильно от двух дней, а команде разработки нужно минимум 5 дней на реализацию. Получается, каждая задача — уникальное действие.
Обычный процесс:
Только на создание и согласование макетов уходило стабильно от двух дней, а команде разработки нужно минимум 5 дней на реализацию. Получается, каждая задача — уникальное действие.
Обычный процесс:
Только на создание и согласование макетов уходило стабильно от двух дней, а команде разработки нужно минимум 5 дней на реализацию. Получается, каждая задача — уникальное действие.
Оптимизированный процесс:
Собрал все возможные сценарии в продукте и обернул в шаблоны.
Мы стали в среднем в 2 раза быстрее — типовые решения покрывают все простые задачи бизнеса.
Были кейсы завершения задач за один день: фронт-часть полностью на шаблоне, задача выполняется на 100 %.
Оптимизированный процесс:
Собрал все возможные сценарии в продукте и обернул в шаблоны.
Мы стали в среднем в 2 раза быстрее — типовые решения покрывают все простые задачи бизнеса.
Были кейсы завершения задач за один день: фронт-часть полностью на шаблоне, задача выполняется на 100 %.
Оптимизированный процесс:
Собрал все возможные сценарии в продукте и обернул в шаблоны.
Мы стали в среднем в 2 раза быстрее — типовые решения покрывают все простые задачи бизнеса.
Были кейсы завершения задач за один день: фронт-часть полностью на шаблоне, задача выполняется на 100 %.
Оптимизированный процесс:
Собрал все возможные сценарии в продукте и обернул в шаблоны.
Мы стали в среднем в 2 раза быстрее — типовые решения покрывают все простые задачи бизнеса.
Были кейсы завершения задач за один день: фронт-часть полностью на шаблоне, задача выполняется на 100 %.
Оптимизированный процесс:
Собрал все возможные сценарии в продукте и обернул в шаблоны.
Мы стали в среднем в 2 раза быстрее — типовые решения покрывают все простые задачи бизнеса.
Были кейсы завершения задач за один день: фронт-часть полностью на шаблоне, задача выполняется на 100 %.
Оптимизированный процесс:
Собрал все возможные сценарии в продукте и обернул в шаблоны.
Мы стали в среднем в 2 раза быстрее — типовые решения покрывают все простые задачи бизнеса.
Были кейсы завершения задач за один день: фронт-часть полностью на шаблоне, задача выполняется на 100 %.
Оптимизированный процесс:
Собрал все возможные сценарии в продукте и обернул в шаблоны. Мы стали среднем на 2 раза быстрее, типовые решения покрывают все простые решения бизнеса.
Были кейсы завершения задач за один день: фронт-часть полностью на шаблоне, задачу выполняет на 100%.
Итоги
— Гибкий и удобный продукт — сократилось время обучения сотрудников.
— Единая дизайн-система — используется в нескольких внутренних сервисах банка.
— Экономия ресурсов — шаблоны ускорили разработку в 2 раза.
В 2022 году Россельхозбанк тратил по 5–6 спринтов только на реализацию фронт-части продукта. Сегодня мы выпускаем то же самое за 1–2 спринта и экономим среднем около от 500 тыс. рублей на фичу.
Итоги
— Гибкий и удобный продукт — сократилось время обучения сотрудников.
— Единая дизайн-система — используется в нескольких внутренних сервисах банка.
— Экономия ресурсов — шаблоны ускорили разработку в 2 раза.
В 2022 году Россельхозбанк тратил по 5–6 спринтов только на реализацию фронт-части продукта. Сегодня мы выпускаем то же самое за 1–2 спринта и экономим среднем около от 500 тыс. рублей на фичу.
Итоги
— Гибкий и удобный продукт — сократилось время обучения сотрудников.
— Единая дизайн-система — используется в нескольких внутренних сервисах банка.
— Экономия ресурсов — шаблоны ускорили разработку в 2 раза.
В 2022 году Россельхозбанк тратил по 5–6 спринтов только на реализацию фронт-части продукта. Сегодня мы выпускаем то же самое за 1–2 спринта и экономим среднем около от 500 тыс. рублей на фичу.
Итоги
— Гибкий и удобный продукт — сократилось время обучения сотрудников.
— Единая дизайн-система — используется в нескольких внутренних сервисах банка.
— Экономия ресурсов — шаблоны ускорили разработку в 2 раза.
В 2022 году Россельхозбанк тратил по 5–6 спринтов только на реализацию фронт-части продукта. Сегодня мы выпускаем то же самое за 1–2 спринта и экономим среднем около от 500 тыс. рублей на фичу.
Итоги
— Гибкий и удобный продукт — сократилось время обучения сотрудников.
— Единая дизайн-система — используется в нескольких внутренних сервисах банка.
— Экономия ресурсов — шаблоны ускорили разработку в 2 раза.
В 2022 году Россельхозбанк тратил по 5–6 спринтов только на реализацию фронт-части продукта. Сегодня мы выпускаем то же самое за 1–2 спринта и экономим среднем около от 500 тыс. рублей на фичу.
Итоги
— Гибкий и удобный продукт — сократилось время обучения сотрудников.
— Единая дизайн-система — используется в нескольких внутренних сервисах банка.
— Экономия ресурсов — шаблоны ускорили разработку в 2 раза.
В 2022 году Россельхозбанк тратил по 5–6 спринтов только на реализацию фронт-части продукта. Сегодня мы выпускаем то же самое за 1–2 спринта и экономим среднем около от 500 тыс. рублей на фичу.
Итоги
— Гибкий и удобный продукт — сократилось время обучения сотрудников.
— Единая дизайн-система — используется в нескольких внутренних сервисах банка.
— Экономия ресурсов — шаблоны ускорили разработку в 2 раза.
В 2022 году Россельхозбанк тратил по 5–6 спринтов только на реализацию фронт-части продукта. Сегодня мы выпускаем то же самое за 1–2 спринта и экономим среднем около от 500 тыс. рублей на фичу.
