Как встраивать сложные графические решения в интерфейсы приложений

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

Если компания выбрала второй путь, то UX-дизайнеру важно выработать определённую стратегию действий: нужно «съесть слона по частям», и тогда он не будет казаться таким огромным и страшным. Подробный план позволяет мыслить системно. Именно так мы и поступили: выстроили пошаговую структуру по внесению изменений в интерфейсы приложений.

О том, как именно мы разделили весь масштабный процесс адаптации ребрендинга для приложений на четыре крупных этапа, рассказывает Маргарита Савченко, senior-продуктовый дизайнер Flowwow.

Маргарита Савченко

В дизайне более пяти лет. За это время успела поработать в агентстве, на фрилансе, а теперь занимается дизайном и развитием мобильного приложения Flowwow.

• Интро
• Этап 1. Обновление онбординга и лоадера
• Этап 2. Перезапуск баннеров
• Этап 3. Обновление цветовой и шрифтовой схемы
• Этап 4. Постепенное обновление интерфейса
• Что помогло нам пройти процесс без сюрпризов
• Лучше всего создать дизайн-систему заранее

Интро

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

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

В начале 2025 года мы начали процесс адаптации уже внедрённого графического ребрендинга на интерфейсы наших приложений. И вот как это было.

Этап 1

Обновление онбординга и лоадера

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

К тому же лоадер и онбординг — это самостоятельные модули. Их изменение не влекло глобального пересмотра всей дизайн-системы. Более того, нам не пришлось их сильно дорабатывать — мы точечно заменили шрифты и цвета. Но тысячи других элементов в приложении пока оставили как есть.

Этап 2

Перезапуск баннеров

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

Этап 3

Обновление цветовой и шрифтовой схемы

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

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

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

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

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

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

Вторым шагом стало построение акцентов в интерфейсе. Для этого мы выбрали два основных цвета из палитры: пурпурный и лососёвый (цвет логотипа). Последний мы используем на иконке «Бонусы», пинах и прочих индикаторах, которые привлекают внимание пользователя.

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

Третьим шагом стало улучшение цветокодировки. Знакомый пользователям значок «Супермагазин» сохранили в узнаваемом фиолетовом — лишь немного поработали с его оттенком, чтобы он лаконичнее вписывался в цветовую гамму ребрендинга. Тем самым мы оставили понятную для текущих пользователей цветокодировку, что дало им возможность видеть полезную информацию и сосредоточиться на выборе подарков.

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

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

Параллельно мы работали со шрифтом. CoFo Sans, который коллеги предложили в рамках ребрендинга, не подходил нашему интерфейсу. Он был слишком мелким, а фигурные прописные буквы тяжело читались. Мы решили сохранить его в рекламных материалах, а для основного текста выбрали базовые шрифты: в iOS — San Francisco, в Android — Roboto. Они читабельные и знакомы всем пользователям, а также одинаково хорошо выглядят на разных языках.

Весь процесс сопровождался тестами. Я лично просмотрела более 30 сборок с изменениями на iOS и больше 20 на Android. Оценивала, как выглядят страницы с новыми элементами, и составляла пометки для каждого экрана. Это был почти ювелирный труд, а не простая замена. На него мне пришлось потратить несколько недель.

Читайте также:

Консистентность в дизайне: как создать единый визуальный язык бренда

Этап 4

Постепенное обновление интерфейса

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

За последние несколько месяцев мы обновили навигацию и категории: отошли от старой структуры, где доминировала категория «Цветы», и сделали акцент на новом позиционировании, где мы подчёркиваем, что у нас есть все товары для любого праздника.

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

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

Что помогло нам пройти процесс без сюрпризов

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

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

Эффективная коммуникация с разработчиками. Разработчики — костяк этого процесса. Мы понимали, что их время — самый ценный ресурс, который важно сберечь по максимуму. Им часто приходилось находить индивидуальный подход для переноса того или иного элемента. Это случалось, когда прописанные чёткие условия замены оказывались нежизнеспособными в реальности. Так, например, при работе над блоком с начинками кондитерских изделий мы подбирали цвета, которые передавали смысл и хорошо смотрелись. Если бы мы заменяли цвета согласно таблице, то получили бы нечитаемый вариант. Поэтому при постановке задач мы договорились исключить из коммуникации эмоции и субъективные оценки, чтобы упростить работу разработчика хотя бы на этом этапе.

О том, как мы во Flowwow сотрудничаем с разработчиками, можно прочитать в моей статье:

Читайте также:

Дизайн vs фронтенд: секреты win-win-взаимодействия

Лучше всего создать дизайн-систему заранее

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

Но, что ещё важнее, дизайн-система в коде — это инвестиция в будущее. Ребрендинг не бывает раз и навсегда. Выходят новые гайдлайны платформ, обновления от ОС, и компании с продуманными дизайн-системами адаптируются к ним куда быстрее и легче.

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