Форум Альфа-Банка про диджитал
До начала осталось:
Дизайн
Red Collar
3603

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

Про финальную концепцию сайта и новые вызовы продукта на поддержке. Внедряем сервисные разделы, пишем дизайн-правила для быстрой работы и адаптируем страницы под непомерно растущий контент — внутрянка Red Collar.

В закладки
Слушать

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

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

О клиенте

Humans.uz — больше, чем универсальное приложение. Это продукт, который объединяет оператора мобильной связи, инструмент для управления финансами, место для ежедневных покупок. Он максимально живой и переменчивый — и все это для финансового рынка Узбекистана от международной группы компаний.

Выбираем ключевой визуал — 3D-сферы из объектов услуг

Новый тендер — сделать яркий визуал из объемной композиции услуг Humans. Сначала ключевым был предмет, показывающий услугу, а вокруг — абстракция. Искали интересные материалы и фактуру объектов. Затем пришли к мысли, что надо разбавить непонятные формы понятными — сим-карты, банковские карты, показать саму услугу. Так появилось решение о композиции: она стремится к форме сферы с объектами в одном тоне и с разными текстурами.

Примеры от клиента слева вверху, далее — процесс, как мы адаптировали идею под бренд.

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

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

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

Анна Миронова
Дизайнер

Три итерации разработки 3D-композиции. На примере объектов для приветственного экрана сайта Humans.uz

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

Рита Галыгина
3D-дизайнер
Итог главной страницы: как композиция живет на сайте. С этим выиграли тендер и продолжили работу.

Финал сайта: пакуем воедино 3D с переходом в мобильный интерфейс

На протяжении всего проекта наши идеи переплетались с видением клиента и того, какие концепции приходили клиенту на тендерах. По итогу вывели несколько решений, которые применили на сайте:

А) Наложения и градиенты, переходы от желтого в прозрачность — взяли с концепции из первых тендеров

+

Б) Механика перехода с десктопа в мобилку. Она близка сайтам Apple, Samsung, Google и многим другим: такие решения существуют в современной дизайн-среде и в сфере финтех-продуктов — взято с концепции с воркшопа.

+

В) Композиция из ключевого 3D-объекта, встроенного в сферу более мелких. Используем цвет на цвете и разную текстуру материалов.

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

Разрабатываем UI-кит для быстрого решения новых задач на поддержке

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

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

Анна Антонова
Дизайнер

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

Выходим из ограничений отдельной фронтенд-разработки

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

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

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

Или, так как надо было быстро запускать сайт, отказались от более долгого воплощения на React, а 3D на WebGL (прим. технология позволяет отображать и манипулировать трехмерной графикой на веб-страницах, используется аппаратное ускорение для расчета тяжелых анимаций). Вместо этого выгружали 3D в видео-формате на прозрачном фоне для качественного финального отображения на сайте.

Внедряем в сайт сервисные разделы

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

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

Ключевое ограничение со стороны клиента — нужно сделать так, как это есть в приложении: спокойные цвета для ежедневного пользования. Серые и светлые оттенки, немного черного, яркие акценты только в разделе уникальных услуг. А на сайте в тот момент черный превалировал над желтым: яркий и контрастный сайт для вовлечения клиента.

Договорились попробовать придерживаться логики: все маркетинговые и промо-страницы на черно-желтом, а сервисные и услуги — на белом. Так мы поддерживаем и консистентность с приложением, и делим большой сайт на смысловые разделы.

Слева — страницы сайта до внедрения сервисных разделов, справа — после.

Увеличиваем количество текста в услугах без потери качества дизайна

Каждая услуга Humans обрастает деталями и настройками с каждой итерацией развития продукта. Карточки услуг на главной странице проектировались под короткое описание для запуска: текст виден сразу, горизонтальный слайдер с иллюстративными 3D-композициями.

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

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

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

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

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

Итоги работы над сайтом

Превращайте ограничения проекта в свое преимущество.

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

Не бойтесь выдвигать дизайн-гипотезы и проверять их на практике сразу.

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

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

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

Александр Гайм
Project Lead в Humans Group
О дизайне, технологиях и маркетинге в цифровом мире.
{ "author_name": "Red Collar", "author_type": "editor", "tags": [], "comments": 7, "likes": 30, "favorites": 122, "is_advertisement": false, "subsite_label": "design", "id": 170514, "is_wide": false, "is_ugc": false, "date": "Mon, 26 Oct 2020 16:07:25 +0300", "is_special": false }
Объявление на vc.ru Отключить рекламу
Личный опыт
Московский Киберспорт: как мы запустили собственную киберспортивную платформу во время пандемии и что из этого вышло
О том, как появилась и развивалась эта идея, какую роль сыграл коронавирус, и во что должен трансформироваться…
0
7 комментариев
Популярные
По порядку
Написать комментарий...
3

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

Создаётся впечатление, что за маской клиентоориентированности прячется классический "русский бизнес". Может, конечно, это только мои загоны?

Ответить
2

Хорошо получилось. Молодцы

Ответить
0

Спасибо!

Ответить
0

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

Ответить
0

Билайн?

Ответить
0

Узбеки молодцы.

Ответить
0

Какие технологии были затронуты фронтендом?

Ответить

Комментарии

null