September 6, 2024

Немецкий финтех — от mvp до огромного финансового сервиса

Описание

Задача: Поддержка имеющейся дизайн системы, дизайн новых страниц, работа над старыми макетами

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

Что получилось в итоге: Вырастили все ключевые метрики на проекте

Инструменты: Figma, Cinema4D

Подробнее о моей работе на проекте

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

Моими задачами на проекте было: — проектировать новые макетов для разных устройств — контролировать новые макеты джунов — структуризация и дополнение дизайн-системы — рисовать 3д иконки и сеты

Расскажу про каждую из задач подробнее ↓↓↓

Макеты

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

Контроль макетов джунов

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

Копались в старых макетах, подготавливали их к вёрстке. Наводили порядок в иерархии и названии слоёв:

Ничего -> Ui-кит → дизайн-система

Путь был такой: разрозненные варианты кнопок, иконок, шрифтов → ui-кит → дизайн-система. На картинке выше представлен переходный этап из юай-кита в дизайн-систему с описанием, когда какой цвет использовать, в каких проектах какие заголовки.

Ну 3д — оно и в Африке 3д. Рисовали в Cinema4D. Я собирал в готовой сцене конструкцию/геометрию, назначал готовые материалы, а рендерить отдавал другому человеку. Вот что из этого получилось:

В чём были проблемы на всём проекте

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

Чему научился

  1. Работать в очень нагруженной системе и множеством ограничений
  2. Дорабатывать и внедрять элементы в дизайн-систему, параллельно развивая её
  3. Упорядочивать материалы в файле: когда над файлом работаем много человек, есть куча версий файлов, приходится как-то выкручиваться
  4. Управлять мини командой: распределять имеющиеся ресурсы дизайнеров, потому что на проекте бывали и простои, и большие объёмы работы. Не всегда хорошо без конца дергать дизайнера на мелкие доработки