Сайт для финтех-продукта Humans.uz. Часть 1: пройти пять тендеров на концепт и выиграть

Как Red Collar искали лучшую панк-концепцию для несуществующего продукта, сделали 12 прототипов, внедрили мобильный интерфейс в монитор и дошли до 3D-уточки.

Работаем вместе с Humans.uz больше полугода, работы ведутся сразу по трем направлениям:

  • разрабатываем сайт-платформу для продукта: от поиска идеи до проработки каждой анимации;
  • делаем 3D-объекты для коммуникации;
  • ведем поддержку бренда и продукта в развитии: внедрение новых разделов на сайт и переработка старых решений.

В этом кейсе расскажем о разработке сайта — начинали, еще когда не было самого продукта: перебирали концепции, искали смысловой посыл и реализацию в дизайне. И продолжаем сейчас, постоянно обновляя сайт под рост продукта. Вариантов было много, работы тоже, и каждый этап проходил через тендер.

О клиенте

Humans.uz — финтех-продукт, который объединяет управление финансами, телеком и маркетплейс. Проект для Узбекистана, где финансовый рынок развит недостаточно, и онлайн агрегатор с выгодными условиями это желанный в повседневной жизни продукт. Бренд входит в международную группу компаний, например, в США компанией Humans уже запущен HR-tech продукт, который помогает пользователям подбирать исполнителей для различных задач.

Задача: сделать сайт для продукта, которого еще нет

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

Обсудили внутри команды, предложили идеи и варианты исполнения. Получили фидбек, что в ощущение бренда попали 3D-объекты, яркость и контрастность, а также чистая структура и идейная подача.

<p>Примеры сайтов-референсов, которые больше всего понравились заказчику: pitch.com, useplink.com, наш mogney.com и onesharedhouse2030.com</p>

Примеры сайтов-референсов, которые больше всего понравились заказчику: pitch.com, useplink.com, наш mogney.com и onesharedhouse2030.com

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

Воркшоп с клиентом: итог — 3 идеи + 1 пожелание

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

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

Сергей Свиридов, продюсер проекта

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

На сайте же надо прогнозировать, как идея будет развиваться и трансформироваться, при том, что сам Humans — это сумма из трёх разных продуктов: телеком, управление финансами и маркетплейс.

По итогам вывели три идеи, за несколько дней раскрыли их по смыслу и оформили в визуальные концепции. Фото и видео мы брали с референсов, которые подбирали для клиента:

1. «Человек для человека»

Смысловой месседж: все услуги Humans сделаны людьми и для людей.

Идея digital-коммуникации: на первом экране слоган с бегущей строкой, кем является человек для человека — друг, партнер, помощник. Синим человеком иллюстрируем продукт Humans и показываем механики взаимодействия с продуктом.

<p>Макеты из презентации концепции, использованы изображения с <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwadeandleta.com%2F&postId=166554" rel="nofollow noreferrer noopener" target="_blank">wadeandleta.com</a></p>

Макеты из презентации концепции, использованы изображения с wadeandleta.com

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

Лера Юршина, дизайнер проекта

2. «Каждый уникален» или «Управляй своим миром вместе с Humans»

Смысловой месседж: каждый человек индивидуален со своими интересами, идеями и миром. Humans — мультипродукт, который объединяет всех людей, но при этом с гибкой настройкой тарифов и услуг, чтобы каждый сделал пространство, удобное только для него.

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

<p>Промежуточный поиск воплощения идеи «Каждый уникален». Изображения взяты с www.pinterest.com</p>

Промежуточный поиск воплощения идеи «Каждый уникален». Изображения взяты с www.pinterest.com

Идея digital-коммуникации: яркие панковские люди в 3D, где у каждого своя уникальная голова, но повседневное окружение. Например, голова из розовых резиновых ламп освещения, а объект — гладильная доска. Показали, насколько мы все разные, но при этом нам важны одинаковые вещи и живем в одном мире, которым легко управлять вместе с Humans.

<p>Макеты из презентации концепции, использованы изображения <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.behance.net%2Fgallery%2F72655685%2FFASHION-SNAP&postId=166554" rel="nofollow noreferrer noopener" target="_blank">Kota Yamaji </a>и <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.behance.net%2Fgallery%2F71626639%2FColor-Campaign-2018&postId=166554" rel="nofollow noreferrer noopener" target="_blank">Diván</a></p>

Макеты из презентации концепции, использованы изображения Kota Yamaji и Diván

3. «Humans упрощает»

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

Идея digital-коммуникации: первый экран заполняется множеством стикеров с бытовыми задачами. Стикер Humans падает сверху и закрывай собой все, упрощая жизнь человеку.

<p>Макеты из презентации концепции, примеры брутального дизайна (слева) взяты с pinterest.com и из сайтов-победителей Awwwards.com</p>

Макеты из презентации концепции, примеры брутального дизайна (слева) взяты с pinterest.com и из сайтов-победителей Awwwards.com

4. Искали образ человека без человека

Помимо ключевых концепций была просьба поискать образ человека без человека — чтобы сделать визуализацию еще более нестандартной.

<p>Процесс поиска дополнительной визуальной концепции: показать человека без человека.</p>

Процесс поиска дополнительной визуальной концепции: показать человека без человека.

<p>Мудборды — образные варианты для дополнительной визуальной концепции: показать человека без человека. Изображения взяты с pinterest.com</p>

Мудборды — образные варианты для дополнительной визуальной концепции: показать человека без человека. Изображения взяты с pinterest.com

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

Прототип концепции-финалиста в мобильной версии: отражена визуальная идея и механика при скролле. Фото взяты с сайта wadeandleta.com

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

Артём Фёдоров, дизайнер проекта

«Показать услуги в мобильном интерфейсе — крутая идея, давайте ее внедрять»

Клиент представил прототип сайта с логикой блоков и пригласил поучаствовать в тендере на UX-копирайтинг и на новый виток поиска дизайна.

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

Внутри самого приложения отдельной задачей тендера было оформить финальный сторис-формат с рассказом о новых услугах. Сделали это с помощью анимированных объектов, совмещая тексты, дизайн-концепт и пакет 3D пре-моделей: получалась послайдовая раскладка анимации, где пользователь сам пошагово знакомиться с информацией и управляет движением.

<p>Слайды из презентации концепции с 3D-услугами и UX-копирайтингом.</p>

Слайды из презентации концепции с 3D-услугами и UX-копирайтингом.

Нейтральные 3D-объекты понравилась клиенту, но ключевыми в разработке сайта стали две идеи:

— работа с моно-цветами из брендбука Humans: когда показываем цвет на цвете, например, желтое на желтом. И разбавляем фоновым контрастом лишь в некоторых местах.

— использование отвлеченных 3D-объектов, которые показывают digital-продукты и услуги, которые невозможно пощупать в реальной жизни. Идея объектной оформленности и отсылка к настоящим и физически ощутимым вещам.

Выводы первой части

Если продукт «голый» — помогите сделать больше, чем нужно в тендере.

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

Смотрите на бэкграунд ключевых лиц.

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

Прорабатывайте скиллы коммуникации.

Клиенты заведомо выбирают тех, кто умеет проектировать дизайн. Но чтобы тандем работал отлично, важно, чтобы команда агентства могла умело доходчиво и понятно обосновывать свои решения и доносить мысли. Чтобы клиент чувствовал уверенность за те решения, которые вы предлагаете. Мы успешно прошли много тендеров, в проекте участвовало одновременно от 3х до 6-ти дизайнеров — и начали работать с клиентом.

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

1919
5 комментариев

Я сам пользователь хюманс в Узбекистане. Молодцы!

2
Ответить
Комментарий удалён модератором

Комментарий недоступен

2
Ответить

Всё время главные слова – Финтех Проект для Узбекистана, как-то скрыты за толстым шоколадным слоем дизайнерских идей. Какой язык – английский, русский или узбекский в итоге? А так, да сам процесс описан ярко и интересно. Спасибо.

Ответить

Сейчас три языка: узбекский и русский используются равнозначно, английский тоже есть, но пока он больше для небольшой англоговорящей аудитории, проживающей на территории Узбекистана, и будущего расширения. И вам спасибо.

Ответить