---
publishYear: 2013
name: Alfabank
title: Интерфейс мобильного приложения «Альфа Банка»
excerpt: Разработали для «Альфа Банка» дизайн интерфейса мобильного приложения для перевода денег с карты на карту.
context: «Альфа-Банк» пришел к нам с задачей из разряда «нужно вчера». Поэтому темп мы сразу взяли быстрый — настолько, что скоростью работы даже удивили менеджера клиента.
logo:
src: ~/assets/images/portfolio/alfabank/logo.svg
alt: Alfabank logo
link: https://alfabank.ru/
image: ~/assets/images/portfolio/alfabank/main.png
imageAlt: Интерфейс мобильного приложения
thumbnail:
src: ~/assets/images/portfolio/cards/alfabank-mobile.svg
alt: Собака Павлова • Альфа Банк • Интерфейс мобильного приложения
tags:
- fin
- ux-design
- ux-outsource
- mass
- mob
- alfa
tags2:
- Финансы
- Интерфейсы массового обслуживания
- Платежный сервис
- Мобильный интерфейс
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим делать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: qiwi
- collection: portfolio
page: alfastrah-design
- collection: portfolio
page: monetory
- collection: portfolio
page: alfa-arm
- collection: portfolio
page: alfastrahhr
- collection: portfolio
page: opendesk
- collection: portfolio
page: sberbank
- collection: portfolio
page: tinkoff
- collection: portfolio
page: inbank
- collection: portfolio
page: otkritie
result:
- src: ~/assets/images/portfolio/pdf.png
text: Все экраны одним файлом
link: https://drive.google.com/open?id=1Vo-QpFY-Yplj0a3sM6D0xJh5d0xeUN5B&authuser=anton@sobakapav.ru
budget: ~ 700 000 ₽
review:
text: «Я был удивлен и поражен скоростью и качеством работы «Собаки Павловой». Очень профессиональный взгляд на проектирование интерфейсов, очень хорошо подготовлена документация для дизайнера. Плюс всю работу с дизайнером взяла на себя. Ну и, разумеется, очень крутые тексты!»
photo: ~/assets/images/portfolio/alfabank/person.png
person: Вячеслав Акулов
position: Менеджер проектов Альфа-Банка
director: Приложение разработано по нашим прототипам и очень быстро.
metadata:
canonical: https://sobakapav.ru/portfolio/alfabank
title: Банковский интерфейс • Разработка приложения банка
description: "Разработали для «Альфа Банка» дизайн интерфейса мобильного приложения с ключевым пользовательским сценарием — переводом денег с карты на карту."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/alfabank/badge.png'
width: 1200
height: 630
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Задача](#anchor1) • [Задача](#anchor2) • [Дизайн интерфейса](#anchor3) • [Результат](#anchor4) • [Цены и сроки](#anchor5)
</TOC>
## <a name="anchor1" />Вводные
[Альфа-Банк](https://alfabank.ru/) — крупнейший частный банк России. Это мы на всякий случай пишем: вдруг вы последние 15 лет сидели отшельником на Земле Франца-Иосифа и буквально только что вернулись в цивилизацию.
У Альфа-Банка много всего: клиентов, отделений, услуг, сотрудников, экспертизы — и идей о том, как развивать свое огромное хозяйство. Как делать больше, лучше и глубже.
Для развития своих цифровых услуг Альфа-Банк завел целую лабораторию АльфаЛаб: толпа смышленых IT-людей только и делают, что придумывают и создают новые приложения, новые интерфейсы, новые интеграции и даже новые гаджеты.
Но на АльфаЛабе свет клином не сошелся: иногда банку нужна помощь со стороны. Например, когда что-то нужно сделать мегабыстро и суперсрочно, а свои руки-головы заняты по самые уши.
## <a name="anchor2" />Задача
В формулировке «нужно вчера» свалилась на нас из Альфа-Банка задачка — спроектировать мобильное приложение для перевода денег с карты на карту. К задачке, как обычно, прилагались плюсы и минусы.
### Плюсы и минусы
>+ **Задачка маленькая и понятная**
>Один ключевой сценарий: перевод с карты на карту.
>+ **Суперский менеджер на стороне заказчика**
>По секрету: они там почти все в Альфе как из заповедника какого-то — мегаклассные. И знаете что? Это важно для успеха проекта. Даже важней денег.
>+ **У нас огромный опыт с платежными сервисами**
>И с Альфа-Банком тоже. Так случайно получилось, мы не хвастаемся.
>- **Нужно вчера**
>Деньги есть, хотя и не много. А вот ресурсов разработки — почти нет.
>- **Нет формальной постановки**
>На то были причины. Не важно какие, важно, что мы должны обойтись без этого очевидного и стандартного этапа.
>- **Сложности-трудности-долгости с согласованием договора**
>В больших компаниях это нормальное явление. Альфа-Банк — таки да, большая компания.
_План-бюджет помогает посчитать, сколько часов мы потратим на проект и сколько он будет стоить заказчику. Но с Альфа-Банком получилось договориться на словах._
Обычно мы на проекты по услуге «Интерфейсы массового обслуживания» составляем примерно вот такой план-бюджет.
Но тут и того не потребовалось: плюсы позволили (редкий случай!) согласовать план производства на пальцах и оценить бюджет на глазок.
Все всё поняли, можно стартовать.
## <a name="anchor3" />Дизайн интерфейса
Для некоторых особо любимых (а на самом деле — предсказуемых и высокопрофессиональных) заказчиков мы снижаем наши внутренние требования по управлению проектом и допускаем легкий оттенок бардака в процессе производства. Чуть-чуть, самую капельку.
Например, тут мы срезали под корень фазу анализа и исключили из рабочей группы аналитика: ну что бумажками друг друга закидывать, если все участники веселья действительно как свои пять пальцев знают и ключевой сценарий, и нюансы, и прочую подноготную платежных сервисов.
А менеджер был, куда без него. И проектировщик был. И много-много разговоров — в чатах и голосом — было обязательно. Мы любим обсуждать промежуточные результаты, так и финальный лучше получается.
Сначала все-таки зафиксировали сценарии использования с отклонениями. Очень помогает сфокусироваться.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Поскольку ничего выяснять-осознавать не требовалось, уложились в сутки. Мегабыстро. Обычно на фазу анализа и первичное уточнение требований уходит дней 5−7.
[Экраны интерфейса в отдельном файле](https://drive.google.com/file/d/1Vo-QpFY-Yplj0a3sM6D0xJh5d0xeUN5B/view)
И можно было рисовать. Хотя стоп, почему рисовать? Мы ведь делаем мобильное приложение? Так круто было бы не картинки генерить, а сразу сделать кликабельный прототип. Чтобы любой член рабочей группы мог взять в руки свой телефон, понажимать кнопочки в этом прототипе и на кончиках пальцев осознать: вот тут порядок, а тут нужно поменять так и так, ибо сейчас неудобно.
Инструментов для создания интерактивного прототипа много. Мы выбрали программу [Blueprint](http://www.groosoft.com/blueprint/) для iPad’а. И нарисовали (проектировщики говорят — отрисовали) в ней ключевые экраны.
Бонус работы в Blueprint: проектировать можно хоть в транспорте, хоть в скучных гостях, хоть лежа на диване вверх ногами. Сами понимаете, в проекте с жесткими сроками нам так и пришлось работать. Про «вверх ногами» — не преувеличиваем :)
Заказчик ежедневно получал обновленный набор экранов. Высказывался. И мы уходили на новую итерацию. И еще. И еще. И еще.
[Экраны интерфейса в отдельном файле](https://drive.google.com/file/d/1Vo-QpFY-Yplj0a3sM6D0xJh5d0xeUN5B/view)
Чем больше итераций, тем — мы так думаем — лучше результат. Когда заказчик не тупит (а Альфа-Банк не тупит никогда), можно хоть каждый день новую версию выкатывать. Что мы и делали, пока была в том нужда.
Самое неприятное в интерактивном прототипировании — внесение правок. Потому что одно небольшое изменение иногда нужно отобразить на паре десятков экранов. Муторная работа, от которой можно и озвереть. Но куда _еще_ звереть [«Собаке»](https://sobakapav.ru/)?
## <a name="anchor4" />Результат
Оглянуться не успели — наша часть работы закончилась. Дальше включился визуальный дизайнер, а менеджер проекта пошел договариваться с разработкой. Мы же слегка отползли в сторону и только иногда высказывались в обсуждениях вроде _«Какой цвет выбрать: фиолетовый или малиновый?»_ (правильный ответ: по барабану).
Наш прототип пережил все перипетии эстетического оформления, внутренних согласований и даже разработки. Что важней, наша версия интерфейса успешно вышла в свет (AppStore, Google Play) и уже который год зарабатывает Альфа-Банку деньги. Не скажем какие.
Проектирование интерфейса — стандартный этап современного производственного цикла мобильного приложения. Тут и вопроса не стояло, надо ли создавать прототип.
Стоял только вопрос _«А кто это сделает нормально?»._
Ответ вы уже знаете.
## <a name="anchor5" />