Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#кейсы</a>

2 <ul><li>20 ноя 2025</li>

3 <li>0</li>

4 </ul><h2>Как встраивать сложные графические решения в интерфейсы приложений</h2>

5 Продуктовый дизайнер Flowwow Маргарита Савченко рассказывает, как внедрить ребрендинг без ущерба удобству пользователей.

6 Иллюстрация: Полина Честнова для Skillbox Media

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

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

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

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

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

12 <ul><li><a>Интро</a></li>

13 <li><a>Этап 1. Обновление онбординга и лоадера</a></li>

14 <li><a>Этап 2. Перезапуск баннеров</a></li>

15 <li><a>Этап 3. Обновление цветовой и шрифтовой схемы</a></li>

16 <li><a>Этап 4. Постепенное обновление интерфейса</a></li>

17 <li><a>Что помогло нам пройти процесс без сюрпризов</a></li>

18 <li><a>Лучше всего создать дизайн-систему заранее</a></li>

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

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

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

22 <h2>Обновление онбординга и лоадера</h2>

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

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

25 Онбординг до ребрендингаИзображение: FlowwowОнбординг после ребрендингаИзображение: Flowwow<h2>Перезапуск баннеров</h2>

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

27 Баннерная сетка до и после ребрендингаИзображение: Flowwow<h2>Обновление цветовой и шрифтовой схемы</h2>

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

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

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

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

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

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

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

35 Изменение цвета в иконке "Бонусы"Изображение: FlowwowПурпурный стал цветом действия - он на кнопках, свитчах, табах, радиобаттонах и чекбоксах.

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

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

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

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

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

41 <h2>Постепенное обновление интерфейса</h2>

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

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

44 Навигация до ребрендинга и послеИзображение: FlowwowВсе следующие фичи - трендовые товары в категориях, апсейл после заказа и опция добавления чаевых - выходили сразу в обновлённом стиле.

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

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

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

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

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

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

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

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

53 <a>Практический курс: "Профессия UX/UI-дизайнер + ИИ" Узнать о курсе</a>