• Веб
  • Билайн
  • Создание промо-раздела платежных карт «Билайна»

    Описание• Процесс

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

    Вникаем, выписываем вопросы, структурируем. Параллельно придумываем концепцию главной страницы и то, как эти принципы будут распространяться на внутренние разделы. Всего получается пять концепций.

    Арт-директор: Давай без проработки, прямо вот так и покажем клиенту.

    Показываем. Клиент сразу дает дельные комментарии. Нравятся варианты 1, 2, 3. Делаем второй и третий. Важно показать очевидную разницу между картами, рассказать о возможностях, безопасности и о том, как получить карту. Приступаем к проработке.

    Для наглядности запиливаем видео (смотреть со звуком).

    Постепенно концепция наполняется клиентскими текстами. Основные изменения касаются блока «Возможности». Он по-прежнему должен быть ярким, но консервативным. Набрасываем внутренние страницы и привязываем билайновские стили.

    «Работа с картой», «Операции по карте», «Кредиты», «Комиссия и проценты» — все разделы содержат в себе очень много служебной информации — официальных текстов, менять которые нельзя. Придумываем истории и оформление для каждого блока.

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

    Тестируем руку, делаем покадровую заготовку, отрисовываем.

    Утверждаем метафоры к блоку «Возможности» и делаем попытку внести радикальные изменения — отказаться от цвета фона и добавить «полета» привычным билайновским картинкам с тенью, все-таки это промо-страница и можно позволить себе немного лишнего.

    Как только согласованы последние метафоры, летим к фотографам подкидывать предметы.

    В это время техдизайнер оттачивает пиксели.

    Все красиво, но хочется еще. Добавляем «загибочек».

    Просмотрев гигабайты фотографий и отобрав из них лучшие, собираем коллажи.

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




    Технолог творит чудеса и показывает первую сборку. Все прекрасно, а особенно эффект с рукой.

    Остальные блоки тоже подвергаются кодированию. Еще немного времени на согласование изингов, времени задержки и «давай на 10 пикселей вправо, а вот это чуть ниже» — и готово.


    Дорисовываем оставшиеся иллюстрации.

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

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

    Спустя какое-то время смотрим, что получилось, ловим баги и пишем комментарии.