Контекст
ВТБ — российский коммерческий банк с государственным участием. Задача студии Pinkman — разработать сайт, который сделает опыт клиентов более комфортным и эффективным, и внедрить дизайн-систему для ускорения и удешевления масштабирования
Мои задачи на проекте
Проведение исследований
Занималась доработкой текущих решений на основе анализа метрик и проведённых исследований
Редизайн
В команде из 10 дизайнеров разрабатывала новую визуальную концепцию мобильной и десктоп версий сайта
Ускорение загрузки сайта
Лидировала задачу по ускорению загрузки сайта ВТБ
Создание и развитие дизайн-системы
Проектирование компонентов, заведение общих правил использования
Ревью
Проводила ревью работы других дизайнеров
Отрисовка графики
Подбирала метафоры для хиро-блоков и карточек и отрисовывала их в Cinema 4D
Основные проблемы и решения
проблема 1
Навигация тормозила и опыт, и загрузку
Громоздкая система с интерактивным перемещением пунктов влияла и на удобство, и на скорость сайта. Переработала десктоп-навигацию, чтобы упростить её и для пользователей, и для разработки
проблема 2
Медленная загрузка сайта
Скорость напрямую влияла на конверсию. Путём оптимизации дизайна (переработки тяжёлой навигации, перевыгрузки графики в webp, сокращения вариантов компонентов в зависимости от разрешений) сократили скорость загрузки с 4 до 1,7 DOM
проблема 3
Негативный опыт в мобильной версии
Разработали дизайн страниц, ориентируясь на мобильный опыт, адаптивность и инклюзивность
проблема 4
Разрыв между дизайном, разработкой и контентом
Макеты сильно расходились с продакшеном. Участвовала в выстраивании единой системы: дизайн-система для дизайнеров, компоненты в Storybook для разработки и интерфейс сборки страниц для контент-менеджеров
Было / Стало
