Разбор концепта лендинга для онлайн-банка

Разбираем, как важно более глубоко проводить исследования, как не остановиться только на одном приёме в визуале и правильно собрать мудборд под проект.

Автор работы Тейлер Ника, подписчик DL PRO

Какие ключевые вопросы по работе у тебя есть к менторам?
1) По исследованиям: достаточны ли для такого проекта исследования, про которые я написала, или нужно расширить? Не слишком ли коротко написано?
2) По оформлению: как можно улучшить визуальную составляющую главной страницы? Мне кажется, что сейчас дизайн смотрится довольно скучно, и я не понимаю, чем его разбавить.
3) Как можно визуально улучшить форму оформления карты?

Задача
Это мой первый проект для портфолио. Онлайн-банк придуман из головы, но пара исследований проводилась с реальными людьми, чтобы потренироваться. Моя цель — сделать проект, который не стыдно выложить в портфолио. Но чем дольше я его делаю, тем больше он мне не нравится. :( Цель сайта: продать владельцам малого бизнеса карту (показать плюшки и красиво это всё завернуть).

Привет, Ника! Спасибо за интересный проект для разбора! Круто, что не сидишь на месте и ставишь себе задачи, придумываешь проекты для развития.

Что понравилось в работе

У тебя получился довольно аккуратный проект. Это касается как порядка в Figma, так и визуала. Видно, что ты старалась структурировать и не делала на скорую руку.

Логика

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

1) По исследованиям: достаточны ли для такого проекта исследования, про которые я написала, или нужно расширить? Не слишком ли коротко написано?

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

2) Какие гипотезы ты проверяла во время интервью? И почему мало вариантов решения для каждого инсайта?

Очень круто, что в части исследования были проведены интервью. Однако не совсем понятно, какие вопросы ты задавала и какие первичные гипотезы у тебя были. То есть цель Better understand factors which play key role in small business owners decision making — это хорошо, но уже во время ресёрча тебя должно было заинтересовать что-то, что хотелось бы уточнить.

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

Бизнес

Здесь также момент недостаточного исследования рынка.

There are many strong players on the market, who offers various business card
options for small businesses. Often, there are 7-8 types of business cards that are able to satisfy customer needs. The iDiscover has only one type of business card to promote.

Какие эти 7-8 карт? Чем они отличаются и какую ценность несут для клиента? Возможно ли технически сократить все типы к одному? Что предлагают нео-банки для малого бизнеса?

То есть основной момент, что сократить к одной карте нужно не только согласно твоему субъективному мнению «этого достаточно клиентам». А понять, какие свои боли/вопросы решают клиенты картами. И тогда уже принимать решение: будет их одна или три, и вести повествование исходя из этого.

Ещё один момент, выходящий из предыдущего — в какой момент клиент решает открыть карту/счёт (при открытии ИП, как у нас требуется, или когда он уже является бизнесом, но ищет другой банк, потому что текущий его не устраивает). Тогда и можно поработать над сценарием получения карты, сделав его максимально быстрым — это точно отразится на форме заявки. Для этого нужно вникать в технические и законодательные особенности банковской сферы, чтобы кейс получился максимально правдоподобным.

Повторимся, если задачей была только визуально более понятная подача информации — глубокий бизнес-ресёрч можно упростить. А если всё же придумывание продукта — без этого этапа никак.

Визуал

Как мы уже сказали выше, сайт получился довольно аккуратным. Правда аккуратность вышла на грани со стерильностью, которая убила красоту. В нём не хватает визуальных фишек. Даже при использовании довольно популярного темного фона и 3D фигур. Разбавить стерильность можно различными способами: при помощи композиции, цветных 3D, цвета (градиенты, фигуры, фоны), типографики и прочего. Чтобы окончательно определиться с тем, что ты добавишь в визуальную составляющую сайта, советую ещё раз пересобрать референсы.

Мудборд и референсы

Ты собрала референсы, которые в итоге отразились в твоём дизайне. Круто, хотя материала было мало.

Определившись с тёмной темой и 3D фигурами, ты остановилась, хотя стоило продолжить поиски.

Посмотри на референсы под другим углом. Допустим, ты остановилась на тёмной теме. Поищи приёмы, которые хорошо смотрятся с ней. Затем поищи различные виды 3D. Затем отправляйся на поиски приёмов, которые хорошо смотрятся с 3D. Потом посмотри на типографику в проектах. И так далее.

Не ищи референсы только в сфере банков. Посмотри на промо-сайты в целом.

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

Типографика

Типографика во многих местах аккуратная. Шрифт достаточно лаконичный. Но дьявол кроется в деталях)

Обращай внимание на мелочи, на выравнивания. Они часто выдают руку новичка или человека, который спешит.

Композиция

Ты пишешь "The goal is to make the product stand out..." (Задачей было выделение продукта...). А композиция получилась в конечном итоге стандартная. Да, это банковская сфера, но и здесь можно немного отойти от стандартных блоков сайта.

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

Команда

Классно, что есть стили и работа с компонентами. Но как всегда, есть парочка НО :)

1. Не до конца понятен нейминг компонентов и стилей. Подробнее о том, как следует с этим работать, описано в этой статье.
2. Не понятно, почему Primary-кнопок две, тем более разного цвета, хотя действия одни.
3. Не совсем корректна работа с компонентами. Детально расписана этапность сбора компонентов в файле фигма-комьюнити и на сайте.

Что посмотреть

Статья про нейминг текстовых стилей

Consta UI-Kit

Типографика и вёрстка. Электронный учебник

Примеры сайтов финтех-сферы, на которых можно посмотреть подачу информации:

https://highnoteplatform.com/
https://cash.app/
https://banky.io/
https://coastpay.com/
https://www.revolut.com/business/cards
https://www.monobank.ua/fop?lang=en

Успехов в будущих проектах!

Работу разобрали Анна и Алина.

Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров:

https://pro.dsgnline.ru/