{"id":13502,"url":"\/distributions\/13502\/click?bit=1&hash=a81ed6f897d123d854b91b907b479be2ea058a6a8ec03bd6f76bfc8a24665263","title":"\u0425\u043e\u0447\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c 3D-\u043c\u0443\u043b\u044c\u0442\u0444\u0438\u043b\u044c\u043c. \u0413\u0434\u0435 \u0443\u0447\u0438\u0442\u044c\u0441\u044f?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"7eb01878-f5ab-5bdb-ae26-b8e9a900dfa1","isPaidAndBannersEnabled":false}
Дизайн
Red Collar

Сайт для финтех-продукта 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
0
7 комментариев
Написать комментарий...
Сергей Сидоров

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

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

Ответить
Развернуть ветку
Насрула Насрулаев

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

Ответить
Развернуть ветку
Red Collar
Автор

Спасибо!

Ответить
Развернуть ветку
Mike Eirih

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

Ответить
Развернуть ветку
Sabit Sugirov

Билайн?

Ответить
Развернуть ветку
Pepper510510 Rusty

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

Ответить
Развернуть ветку
Залик Авлаков

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

Ответить
Развернуть ветку
Читать все 7 комментариев
null