Разработка интерфейса для Rafinad

Клиент 

Rafinad (Reliable Agency of FINancial ADvertising) — новая партнерская сеть, направленная на работу с финансовыми офферами. Проект является частью крупной структуры с экспертизой в сфере CPA.

О проекте

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

Разработка пользовательского интерфейса Rafinad


Разработка дизайна началась в феврале 2020, а макеты были переданы клиенту уже в мае, что для столь сложных сервисов очень быстрый срок.

За включенность и скорость реакции на новые макеты, отдельная благодарность менеджеру проекта со стороны клиента: «Люда — ты крутая!».

Первое сообщение

Стартовым рабочим названием проекта было KOKOC_FIN_CPA. Под ним и был создан чат в телеграме, проект в ActiveCollab и Figma.

Клиент долго придумывал интересное название и с нашей помощью, в том числе, выбрал Rafinad (Reliable Agency of FINancial ADvertising). Разработку пользовательского интерфейса для личного кабинета мы начали не дожидаясь готового названия.

Первые версии дизайна собирали на примере сложного раздела Статистика, без готовой дизайн-системы.

На этом этапе задачей было разметить сетку и определиться с общим стилем кабинета. Клиенту и нам хотелось, чтобы у сервиса получился индивидуальный характер, поэтому после согласования макета «Статистика v7» (всего было 10 версий) лид-дизайнер разработал собственную дизайн-систему.

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

Создание дизайна интерфейса Rafinad


Ещё одна особенность проекта — вёрстку стартовали параллельно с разработкой дизайна, когда была принята примерно ¼ часть разделов. Мы собрали стайлгайд, но иногда приходилось его пересматривать с учётом новых сущностей интерфейса. 

Создание стайлгайда Rafinad


Чтобы не тормозить вёрстку, специально для верстальщика, наш дизайнер собирал дополнительные инструкции и рекомендации, наподобие таких. Это мы называем клиентоориентированность.

Рекомендации по верстке Rafinad

Как говорилось выше, менеджер со стороны клиента просто «горела» проектом и хотела контролировать все этапы разработки. Даже прототипы страницы Людмила готовила сама, как умеет, в Google Sheets. Мы со своей стороны включали профессионализм UI/UX дизайнеров и превращали идеи Люды в функциональный интерфейс.

Так, например, выглядел Дашборд. Слева — до, справа — после.

Дашборд

arrow-compare-left.svg arrow-compare-right.svg

А вот так Источники

arrow-compare-left.svg arrow-compare-right.svg

Так выглядела страница офферов

arrow-compare-left.svg arrow-compare-right.svg

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

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

В целом получилась следующая статистика по проекту:

  • 2 менеджера
  • 6 UI/UX дизайнеров
  • 12 недель
  • 180+ экранов
  • 450+ часов дизайна
  • 700+ комментариев в Figma
  • Бесконечное количество кружек кофе
  • Километр нервных клеток
  • Приятное послевкусие после окончания проекта

Офферы
Источники — Мои потоки
Техподдержка
Уведомления
Статистика

Команда проекта

  • Максим

    Дизайнер

  • Артём

    Дизайнер

  • Динара

    Дизайнер

  • Вера

    Проект-менеджер

  • Екатерина

    Дизайнер

  • Людмила Серова

    Менеджер продукта

  • Кирилл

    Дизайнер

Смотреть следующий проект

Давайте обсудим ваш проект