Альфа-Банк

приложения и сайт

О проекте

Роль

Один из крупнейших банков в России.

Продуктовый дизайнер в направлении продуктов для физических лиц (2024—2026)

Проектировал функциональность как для Web, так и для мобильных платформ. Совместно с исследователем проверял гипотезы: проводил юзабилити-тестирования, устраивал глубинные интервью.

Развивал и дорабатывал дизайн-систему, тесно взаимодействовал с разработкой.

Цели

1

2

Развивать существующие продукты для физических лиц, проектировать новую функциональность на основании ключевых метрик. В основном опирались на VoC и конверсии.

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

Продукт «Зарплата каждый день»

старый экран продажи

Спроектированный несколько лет назад экран продажи не соответствовал текущему дизайну банка и плохо конвертил.

новый экран продажи

Спроектирован, исследован и разработан лендинг, соответствующий как текущему визуалу банка, так и учитывающий VoC клиентов и респондентов.

↑ 6%

выросла конверсия в подключение продукта

Старый виджет продукта

У клиентов, подключивших продукт, появляется виджет на главном экране. Мы выяснили, что он был недостаточно информативен и уже не соответствовал актуальному виду остальных виджетов на главной.

Новый виджет

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

старый экран снятия

По VoC и последующим исследованиям выяснилось, что не все пользователи понимали, как снимать деньги — поле ввода оказалось не интуитивным, а экран казался скорее справочным.

новый экран снятия

Основной акцент сделан на поле ввода и сопроводительную информацию о том, куда и когда придут деньги.

↑ 15%

вырос средний чек используемых средств за период

Продукт «Улучшенный период без процентов»

первая итерация

вторая итерация

Гипотеза, что сервисное направление продажи продукта окажется более выигрышным, чем маркетинговое. Гипотеза была опровергнута.

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

В этой итерации тестировали разделение лендинга на 2 экрана — сначала общая информация, а затем частности: документы и сервисная часть.

лендинг

В конечном итоге получился продуктовый лендинг для продажи и подключения сервиса.

сервисный экран

Когда сервис уже подключен, пользователь может отслеживать, сколько дней периода без процентов осталось.

Концепции универсального виджета продуктов

задача и концепции

Было необходимо спроектировать виджет как единую точку продажи и отображения всех подключенных продуктов на экране счёта кредитной карты.

Конструктор лендингов — инструмент для дизайна и разработки

Проблема

Предложенное решение

Также много времени уходило на сбор лендингов из компонентов дизайн-системы: ДС громоздкая и требовала умения с собой обращаться.

Работая над сервисами, я обратил внимание, что внутренние лендинги банка универсальны и стандартизированы.

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

Шаг 1. исследование

В первую очередь я собрал множество лендингов со всех направлений банка.

Шаг 2. выявление паттернов

Ниже примеры таких пресетов — для блока преимуществ и справочных инструкций.

Каждый лендинг решал свою задачу, используя при этом универсальные блоки, которые легко собирались в компоненты—пресеты.

Шаг 3. Настройки пресетов

Таким образом, дизайнер из одного компонента может собрать целый лендинг.

У каждого пресета есть свои пропсы, благодаря которым можно переключать тип пресета и вариацию.

Шаг 4. инструкция

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

Написал для дизайнеров инструкцию по применению.

Шаг 5. разработка

В данный момент разработано только несколько пресетов. В идеале добиться полной синхронизации между конструктором лендинга в ДС и разработкой.

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

Будем на связи.
© Задизайнено и собрано мной. Все права, разумеется, защищены.
Made on
Tilda