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

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

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

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

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

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

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

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

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

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

+

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

+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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