Кейс: Редизайн логотипа и приложений банковского сервиса Monese
Глава дизайн-команды британского банковского сервиса Monese Джо Эллисон рассказал о том, почему компании понадобился ребрендинг и как создавался новый визуальный стиль.
Редакция рубрики «Интерфейсы» публикует перевод материала, выполненный командой Sketchapp.
Monese - это банковский сервис, который позволяет резидентам Европейской экономической зоны за 120 секунд открыть локальный банковский счет, даже если клиент не может сразу подтвердить свой адрес или имеет плохую кредитную историю.
Мы создали Monese, чтобы помочь 90 миллионам людей по всей Европе, которые «финансово исключены», потому что банки сочли сложным процесс их идентификации или сомневаются в их кредитной истории.
Для финансового продукта важно доверие пользователя, поэтому главным фактором успеха Monese стала узнаваемость.
Почему мы решились на ребрендинг
После запуска приложения на Android мы увидели большой прирост количества пользователей. Запуск приложения на iOS был очевидным шагом вперед, и перед этим мы осознали, что внешний вид продукта нужно пересмотреть. Бренд должен был отражать выводы, которые мы сделали, получив первых пользователей, и глубокое понимание их потребностей.
Мы обозначили несколько недостатков и направлений работы:
- Наш логотип не был самодостаточным знаком - он воспринимался как немного «детский» с чересчур дружественными линиями.
- Использование шрифта Brandon не давало нам сильного позиционирования: его использовали многие компании, и шрифт не ассоциировался именно с нами.
- Смешивались угловатые и закругленные формы - это было непоследовательно и нелогично.
- Красный цвет, который использовался в сообщениях об ошибках, усложнял восприятие приложения.
Monese стал расти, и наша индивидуальность должна была это отражать.
Элементы прошлого варианта бренда Monese
Мы стали пытаться улучшить бренд. Углубляясь в процесс, мы все больше осознавали свою слабость. Нам нужен был четкий набор ценностей, чтобы определить особенности продукта.
Мы понимали, что ребрендинг может затянуться, но это было самое подходящее для него время. Нашей миссией стало объединить компанию вокруг общей истории бренда, чтобы сформировать прочные связи с аудиторией и создать основу для роста.
Раскадровка бренда
Мы объединили наши студии в Лондоне и Таллине и попросили каждого сотрудника описать наши ценности. При помощи тесного сотрудничества UX-аналитики с менеджментом мы определяли раскадровку бренда. Мы обсуждали, как банковский сервис помогает людям поднять их уровень жизни.
Мы составили список ценностей, а потом - при участии всех сотрудников компании - выделили из них три основные.
- Прогресс. В Monese мы всегда смотрим в будущее.
- Ориентация на человека. Мы видим ценности людей - как индивидуальные, так и коллективные. Мы не оцениваем наших потребителей, как большинство традиционных банков.
- Доверие. Мы обеспечиваем безопасность средствам клиентов, и мы всегда доступны и готовы ответить на все вопросы.
Процесс
Срок был ограничен, поэтому мы быстро приступили к дизайн-спринтам. Нам как стартапу нужно часто улучшать приложение и поддерживать его работу - поэтому приходилось параллельно решать текущие задачи и уделять внимание ребрендингу.
Обычно спринты длились четыре дня. Мы обозначали цели на день и изучали идеи. В конце каждого спринта собирались и проводили ревью. Собрания нужны были не для того, чтобы принимать важные решения, а чтобы обмениваться мыслями.
Создание фирменного знака
В нашем сервисе просто зарегистрироваться, его просто использовать, и он безопасен. Мы хотели создать знак, который бы отражал наши основные ценности - прогресс, ориентацию на человека и доверие. Начало зарисовки:
Обозначив несколько путей создания, мы стали разрабатывать логотип, который сочетал бы в себе ценности бренда.
Мы думали о комбинации пересекающихся линий, которая отражает все, что нам дорого: безопасность, динамику и ориентацию на человека. Добавили скругления на углах, чтобы подчеркнуть плавность.
Типографика
В процессе работы над товарным знаком мы стали изучать шрифты. Шрифт, который у нас был тогда, создавал впечатление недоверия - хотя он был правильно подобран, и мы долго его использовали. Речь идет о немного закругленном Sans Serif. Но этот шрифт не отражал качества, которое мы хотели показать.
Мы обдумывали использование шрифта FF Mark, созданного в 2013 году и срисованного с одного из наиболее успешных Sans Serif в истории. Он прекрасно подходит под современные реалии дизайна.
Каждый глиф был тщательно обработан, чтобы шрифт получил сильный и смелый вид. Он прекрасно сочетается с закругленными формами нового логотипа Monese.
Большинство наших пользователей не являются носителями английского языка, поэтому разборчивость текста в наших решениях играла особую роль. Достаточная высота шрифта Mark позволила ему четко вписаться в небольшие экраны пользовательского интерфейса.
Mark задает бренду сильный и доверительный тон.
Цветовая схема
Мы хотели освежить цветовую схему так, чтобы используемые цвета стали связующим элементом для сервиса и клиентов. При выборе учитывали и функциональность, и эстетическую составляющую. Мы взглянули на все разнообразие информации, которую получают наши пользователи через приложение, и выбрали гибкий набор цветов, которые смогут улучшить юзабилити.
Напористые синий, зеленый и желтый цвета обновленной схемы придали бледному приложению жизнь. Один из тестировщиков отметил, что прошлый вариант цветовой схемы не давал приложению должной уверенности по сравнению с конкурентами.
Определение взаимодействия с пользователем
Система бренда должна была не просто выступать идентификатором, но и определять поведение продукта. Самая важная функция банковского приложения - платежи. Мы решили тщательно продумать это взаимодействие и сделать его ключевой особенностью бренда.
Мы исследовали несколько подходов и определили, как они будут работать с использованием анимации.
Мы начали создавать прототип анимации при помощи JavaScript и запустили пользовательское тестирование, так как понимали, что анимация не должна мешать основному действию.
Прототипирование и тестирование оплаты
Сохранение простого взаимодействия имело ключевое значение для того, чтобы не ставить стиль над содержанием. Мы представили продольную линию, которая появляется, когда пользователь тянет кнопку вниз для совершения платежа. Эта реализация восхищает пользователя и добавляет персональности в процесс работы с приложением.
Разработка системы
Двигаясь дальше, мы исследовали линии платежей как часть визуальной системы. Мы создали графические текстуры, сформировав сеть из линий, которые показывали движение платежей. Так мы попытались вызвать у пользователей совершенно разные эмоции, от очень сдержанных до экспрессивных.
На основании полученных отзывов мы выяснили, что пластиковая карта вызывала у пользователей ощущение чего-то нелегального и запрещенного. Решили переделать дизайн карты, используя заманчивый темный цвет. Соединительные линии на паттерне символизируют непрерывный процесс приема и отправки платежей через платформу.
Новая упаковка дебетовой карты
Monese ориентирован в основном на людей, которые постоянно переезжают, поэтому мы решили придать продукту ощущение постоянного движения.
Выразительные формы были отражены как в логотипе компании, так и в элементах интерфейса приложения.
Редизайн приложения
Кроме редизайна бренда, мы провели полный редизайн приложений для Android и iOS. Мы хотели, чтобы интерфейс был свежим, ярким и простым в управлении. Работая совместно с UX-командой, мы продумали каждый элемент, чтобы пользователь ясно понимал каждое действие.
Мы добавили элементы в виде иллюстраций для пользователя. Они прекрасно сочетались со стилем логотипа. Все иконки стали выглядеть более дружественными благодаря закругленным формам.
Новый интерфейс
Иллюстрации и персонажи
Мы ввели новый стиль иллюстраций и нарисовали персонажей, которые объясняют элементы приложения и добавляют элемент игры в его использование.
При регистрации аккаунта в Monese пользователю приходится ждать, пока его данные пройдут проверку. Мы показываем ему анимацию в виде сканирования документов. Один из персонажей через некоторое время попадает в сканнер и выходит оттуда с кремом от загара. Мы подумали, что это скрасит ожидание пользователя и, возможно, заставит подождать до следующего круга анимации, чтобы посмотреть на весь процесс заново.
Результат
Ранее мы решили, что бренд Monese слишком прост и не вызывает должного доверия у пользователей. Даже логотип не давал ощущения уникальности и самодостаточности.
С тех пор как мы тщательно проработали все необходимые элементы - от доверительного логотипа до дружественной цветовой схемы, - мы уверены, что компания Monese будет расти с каждым днем.
