Молнии, лес и враждующие еноты-андроиды: как мы дошли до этого, делая сайт для банковского приложения?

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

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

Клиент и продукт

Агророс Банк - один из старейших банков России с более чем тридцатилетней историей. Его штаб-квартира находится в Саратове, но отделения присутствуют в 14 городах России.

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

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

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

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

Эти примеры мы представили заказчику. Как выяснилось, все эти варианты с не-молниями и почти-молниями помогли ему утвердиться во мнении, что хочет он видеть в логотипе именно молнию. Но право “поиграть” с ее начертанием нам оставил. Этим мы и занялись дальше.

И мы приступили ко второй итерации.

Ниже наш следующий блок вариантов логотипа. Как видите, все они уже больше напоминают молнии. Некоторые - отдаленно, мы продолжили экспериментировать.

Отправили, созвонились, презентовали и решили, что 3 итерации быть!

На основании обратной связи от заказчика, мы продолжили работать с формой и цветом молнии.

Теперь мы уже достаточно точно понимали (как и сам клиент), какой именно логотип он ждет от нас. Для определения (или достижения более твердой уверенности в своем решении) “того единственного” мы создали еще несколько носителей и инверсии. Это помогло, заказчик выбрал следующий вариант:

Обрадовались, выдохнули. Но не сильно - дальше предстояло еще много работы. Изначально все наши свободные ресурсы были брошены только на отрисовку логотипа. Теперь уже, пообщавшись с заказчиком, мы стали понимать его пожелания лучше. Это позволило сократить сроки работ, запараллелив два процесса: разработки фирменного стиля и создания дизайн-концепта сайта.

И в этот раз мы придерживались такого же принципа. Про то, как шла разработка фирменного стиля, сможем рассказать в комментариях - пишите, если интересно, мы ответим. Здесь же подробно остановимся на создании дизайна сайта АБ чата

Для вдохновения попросили маркетологов приложения прислать нам имеющиеся материалы. Коллеги рассказали, что уже разработан маскот АБ чата - нейроенот. Увидев “их” енота, прониклись и решили, что для достижения такой же реакции от клиентов, нужно обязательно попробовать использовать образ этого активного зверька.

Так родились следующие концепции:

Как и ожидалось, заказчик решил остановиться на варианте с енотом. Теперь нам предстояло проработать эту идею, пойти “в глубину” - задать ему характер, продумать детали образа, отрисовать окружение. В общем - 100% творчество (как мы любим) с оглядкой на требования клиента.

В ходе обсуждения с заказчиком договорились поместить енота в его естественную (насколько это естественно, для андроида, судить не беремся) природную среду. Мы же пошли дальше - предложили разработать отдельные локации для каждого блока сайта.

С удовольствием поработали над дизайном и подготовили следующий пул вариантов:

Очень обрадовались, увидев положительную реакцию клиента. Решили еще немного поработать в этом направлении и предложить также темную версию дизайна. Есть идея - реализуем!

Получилось, конечно, эффектно, но все-таки светлые оттенки клиенту понравились больше. Итак, мы определились с концепцией.

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

Работая в этом направлении далее, мы добавили анимацию, которая зависит от поведения пользователя на странице. Водит посетитель курсором - движутся облака. Скролит по странице - вылетают элементы и собираются в композицию.

Еще одним интересным решением стало создание образа енота-антагониста. Он очень похож на нашего главного героя, отличия - в цветах деталей. Этот образ понадобился для того, чтобы предостеречь клиентов банка от взаимодействий с мошенниками, которые представляются сотрудниками банка. Нужно было таким образом способом донести одну простую мысль: все взаимодействие с банком происходит только в рамках приложения. По телефону, смс и другими способами от лица банка с ними могут связаться только мошенники.

1) Запрашивать у заказчика как можно больше материала для работы: основной логотип, элементы фирменного стиля, маскот,... Что-то да вдохновит, поможет лучше “почувствовать” то, что хочет заказчик (даже если он не все может передать словами). Так, мы активно использовали на сайте маскот клиента.

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

3) При необходимости создания большого количества графики при сжатых сроках можно попробовать подключить к работе также дизайнеров заказчика.

4) Также если время не терпит, лучше выделять под проект отдельного дизайнера и стараться минимально отвлекать его другими задачами. Пусть остается погруженным в одну тему.

5) Мы работали сразу над двумя проектами приложения. Чтобы не было путаницы и на все хватило времени, наша команда серьезно отнеслись к выстраиванию менеджмента, прописала роадмапы и т.п.

Заказчик остался доволен логотипом, фирменным стилем и дизайном сайта АБ чата, продолжаем с ним сотрудничать и по другим проектам.

Посмотреть сайт👇