Explore
Уложитесь в мой дедлайн?
Oops! Something went wrong while submitting the form.
Хороший UI/UX-дизайн выделяет продукт на фоне конкурентов — и команда финтех-стартапа WIT это отлично понимала. Они обратились к нам с задачей: сделать креативный дизайн для банкинг-приложения, ориентированного на рынок Азербайджана. Оно объединяет возможности классического онлайн-банка и криптовалютного кошелька — и это настоящая киллер-фича.
Особый акцент заказчики делали на доверии: продукт нестандартный и требует от пользователей принятия новой модели поведения. Поэтому дизайн должен вызывать ощущение надежности.
В этом кейсе покажем, как мы объединили игривое и серьезное: разработали яркий фирменный стиль, придумали классного маскота и сделали дизайн-концепты мерча, которым действительно хочется пользоваться.
Приложение уже в релизе — можете посмотреть, что получилось. WIT в AppStore.
Обычно электронные кошельки позволяют хранить либо фиатные (традиционные) деньги, либо криптовалюту. Банки же с криптоактивами, как правило, не работают. Из-за этого пользователям нужно два разных приложения — для повседневных финансовых операций и управления криптой. Команда WIT решила устранить этот разрыв и объединить функциональность онлайн-банка и криптокошелька в одном продукте.
В приложении WIT пользователи могут:
Приложение нацелено на рынок Азербайджана: оно станет первым подобным решением в регионе. Запуск такого финтех-продукта требует серьезной юридической подготовки. Команда WIT получила разрешение регулятора еще до старта разработки.
Чтобы заявить о себе на рынке и вызвать доверие у пользователей, нужен был дизайн, соответствующий амбициям проекта. До нас команда уже пробовала работать с местными студиями, но ни один из предложенных вариантов не отражал ни дух новизны, ни уникальность идеи. Тогда они обратились к нам.
В портфолио Purrweb есть несколько проектов со смелым и запоминающимся дизайном для крипто-стартапов. Например, мы делали яркий UI/UX для криптокошелька Kaiju и участвовали в разработке еще нескольких подобных продуктов. Поэтому хорошо понимали, какие задачи стоят перед пользователями криптовалютных сервисов, и как сделать удобный и продуманный UX.
Однако с WIT задача была куда интересней: нам нужно было сделать так, чтобы дизайн работал на доверие и показывал, что это серьезный банковский продукт. И в то же время — был немного дерзким, нацеленным на продвинутых криптанов и молодежь. Кажется, что это несовместимые вещи, но…мы нашли решение. Рассказываем дальше 😉
В рамках проекта нам предстояло:
🐙 Продумать с нуля целостную айдентику бренда, фирменный стиль и визуальную метафору;
🐙 Сделать дизайн-концепт;
🐙 Разработать UI/UX дизайн мобильного приложения;
🐙 Поработать над пользовательскими сценариями;
🐙 Подготовить дизайн-концепцию для мерча под брендом WIT: толстовок, футболок, блокнотов.
Ключевое пожелание заказчика — создать продукт с уникальной визуальной айдентикой, чтобы WIT отличался от всего, что есть на рынке.
Проект начали с анализа рынка и поиска референсов. Искали сами, попросили заказчика прислать скрины тех цифровых продуктов, на которые WIT хочет быть похожим. Поиск референсов — обязательный этап: так мы лучше понимаем, какие решения используют конкуренты, анализируем их, ищем то, что позволит нам отстроиться от других.
Смотрели как прямых конкурентов (банкинг и криптокошельки), так и продукты из других сфер — маркетплейсы, доставки, приложения для тренировок. Потому что интересные идеи можно найти среди неочевидных вариантов!
Подготовили карту ассоциаций — чтобы зафиксировать ключевые образы, эмоции и смыслы, которые должен вызывать бренд.
Один из ключевых референсов от заказчика — это мобильное приложение Leobank, довольно популярное в Азербайджане. У него лаконичный дизайн, и в то же время забавный маскот, который создает немного игривое настроение.
Когда собрали референсы и определились со смыслами будущего продукта, перешли к проработке метафоры. Она помогает сформировать ключевые элементы дизайна — логотип, цветовую палитру, шрифты и другое.
Мы увидели, что само название продукта — wit, которое переводится с английского как «острота ума», «сообразительность», позволяет нам использовать гротескные, юмористические образы. При этом важно, чтобы приложение было приветливым и добавляло эмоции.
У нас было несколько идей метафоры, но в итоге остановились на двух самых интересных. Победила одна из них :)
Метафора должна быть глубокой — отражать сразу несколько смыслов — и при этом оставаться понятной и легко считываемой. В проекте WIT мы разработали две разные визуальные концепции: метафору айсберга и метафору пчелы.
🧊 Айсберг символизирует двухуровневую природу продукта: с одной стороны — «на поверхности» привычный банковский интерфейс, с другой — скрытая функциональность работы с криптовалютой. Как и в реальном айсберге, большая часть находится под водой. Кроме того, айсберг — это массивная глыба, способная выдержать столкновения и даже потопить корабль. Это добавляет ощущение силы и устойчивости.
🐝 Пчела — другая метафора, вдохновлённая неймингом. Название WIT отсылает к «сообразительности» и «остроумию», а пчела — одно из самых умных и организованных существ. Она символизирует системность, эффективность и трудолюбие. Еще одна важная черта пчел — устойчивость: даже если одна особь выпадает из системы, улей продолжает функционировать. Это перекликается с ключевым посылом WIT — стабильная работа и безопасность.
Обе идеи показались заказчику любопытными, но в этой битве победил гигант: идея с айсбергом зацепила команду WIT сильнее. Поэтому мы собрали мудборд, отталкиваясь от нашей «ледяной» метафоры. Стилизованный айсберг стал логотипом WIT.
После того, как согласовали это видение с заказчиком, подготовили дизайн-концепт ключевых экранов — главной страницы, криптокошелька, перевода с обычной дебетовой карты.
Концепция получилась чистой, лаконичной и довольно строгой, но заказчику хотелось добавить чего-то яркого, смелого, немного дерзкого. В общем, нам нужен был интересный маскот, который станет важной частью UI/UX дизайна приложения.
Почему осьминог? Потому что осьминоги — крутые и умные, но их не так часто берут в качестве маскотов. Совершенно несправедливо! Идея выглядела свежей и оригинальной, и попадала «в десятку»: ведь осьминог здорово рифмуется с океанической темой 🐙
Покажем эволюцию нашего персонажа:
Наш маскот — не просто яркий акцент в дизайне приложения, но и часть коммуникации с пользователем. Эмоции, которые отображаются на его мордочке, подсказывают юзеру, что сейчас происходит, задают определенное настроение.
Позже мы немного поменяли цвет маскота, и он стал ярко-синим. Это было нужно, чтобы наш осьминог лучше вписался в обновленный дизайн интерфейса.
В приложении широкая функциональность, поэтому экранов на дизайне получилось много. Все сотни макетов, созданных в Figma, мы показывать не будем 😀 Но проведем вас по ключевым пользовательским сценариям. Приложение доступно в темной и светлой теме, поэтому будем чередовать их ☀️🌑
Регистрация и авторизация. Включает четыре флоу: собственно регистрацию, создание пин-кода, подтверждение личности для граждан Азербайджана и для иностранных пользователей. На этом этапе приложение собирает множество данных — номер телефона, код подтверждения, гражданство, паспортные данные и биометрию.
Флоу получился довольно длинным: 64 экрана на четыре функции. Основная часть — подтверждение личности, которое критично для безопасности и легальной работы продукта
Главная страница. Здесь отображается все, что нужно пользователю для работы с приложением: все банковские карты,баланс криптокошелька, пополнение и переводы, просмотр трат и курсов криптовалют.
Экран виртуальной карты. В этом разделе — настройки карты, заморозка, блокировка и смена пин-кода. Действия пользователя влияют на состояние элементов, поэтому мы предусмотрели множество дополнительных экранов.
История трат и доходов. Пользователь может просматривать расходы и поступления за месяц или любой выбранный период. Диаграмма наглядно показывает, на какие категории уходит больше всего средств.
Покупка крипты и перевод. Пополнить криптокошелек можно с карты WIT или другого кошелька, а также перевести средства на другой адрес.
Визуальное оформление WIT держится на двух китах 🐋🐋:
— Функциональные элементы — строгие, лаконичные, как в привычных банковских приложениях.
— Иллюстрации и визуальные детали — дерзкие и хулиганские. Они создают настроение и подчеркивают характер продукта.
Нам было важно, чтобы в интерфейсе органично сочетались серьезные паттерны из банковских приложений и более позитивный, немного раскованный вайб. Благодаря работе с деталями нам удалось найти этот баланс. Мы используем маскота, у которого бывает разное настроение, «чернильные пятна», немного ироничные иллюстрации — они придают продукту характер, но не перегружают восприятие и не мешают сосредоточиться. Все-таки в финтехе важно, чтобы пользователь не допустил ошибку.
Параллельно с работой над дизайном приложения мы создавали концепты для самого разного мерча продукта. Так, мы придумали визуалы для:
Вот что у нас получилось.
Лаконичное оформление для бумажного мерча. Использовали три цвета: белый, сине-серый и «королевский синий».
Футболки и худи с щупальцами осьминога. В дизайне вещей решили обыграть несколько характерных элементов из интерфейса приложения: щупальца в перчатках и кляксы. Лого тоже использовали.
Браслеты сделали в трех основных цветах интерфейса: лавандово-голубом, ультрамариновом и темно-древесно-угольном. Добавили лого и ироничный слоган.
Стикеры сделали максимально разнообразными: есть стикеры с маскотом, графическими элементами, которые отсылают к интерфейсу WIT и текстовыми слоганами.
Покажем еще несколько концептов.
За 3 месяца работы мы:
Мы были рады поработать над таким крутым и смелым проектом, и уверены, что WIT ждет большое будущее.
→ Поможем запустить или прокачать ваш продукт. Учтем все — ваши бизнес-цели, потребности аудитории, кейсы с рынка. Разберемся в задаче, поймём, что важно именно для вас, и предложим лучшее решение.
Есть задача? Расскажите нам о том, что нужно сделать, и мы свяжемся с вами. Погрузимся в ваш контекст, прикинем сроки и бюджет, а если нужно, придумаем вместе, как докрутить вашу идею.
Мобильная разработка полного цикла. Берем на себя весь процесс: проектируем дизайн, разрабатываем, тестируем и сопровождаем релиз приложения в сторах.
10 лет опыта. Мы создаем IT-продукты для бизнеса и стартапов уже больше десяти лет. Реализовали 550+ проектов в самых разных сферах: IoT, EdTech, маркетплейсы, дейтинг-приложения и многое другое.
Превращаем идеи в реальные продукты. Вам не нужно приходить с детально проработанным техническим заданием. Мы возьмем ваши идеи, детализируем их, предложим креативные подходы и превратим задумку в работающий продукт.
.svg)
%20(1)%20(1)%20(1).png)