Интеграция сложной графики в приложение: советы от Skillbox Media

Содержание:

• Интро
• Совершенствование процесса онбординга и загрузчика
• Перезапуск баннеров
• Модернизация палитры и типографики
• Эволюция дизайна интерфейса шаг за шагом
• Факторы, способствовавшие гладкому прохождению процесса
• Оптимальный подход — разработка дизайн-системы на этапе планирования

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

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

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

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

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

Интро

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

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

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

Совершенствование процесса онбординга и загрузчика

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

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

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

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

Модернизация палитры и типографики

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

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

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

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

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

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

На следующем этапе мы сосредоточились на создании акцентов в интерфейсе. В этом процессе мы определили два ключевых цвета из нашей палитры: пурпурный и лососевый, который соответствует цвету логотипа. Лососевый цвет применяется в иконке «Бонусы», а также в пинах и различных элементах, призванных привлечь внимание пользователя.

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

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

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

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

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

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

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

Единообразие в дизайне: как сформировать целостный визуальный стиль бренда

Эволюция дизайна интерфейса шаг за шагом

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

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

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

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

Факторы, способствовавшие гладкому прохождению процесса

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

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

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

В моей статье изложены детали нашего сотрудничества с разработчиками в компании Flowwow.

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

Дизайн и фронтенд: ключевые аспекты взаимовыгодного сотрудничества.

Оптимальный подход — разработка дизайн-системы на этапе планирования

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

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

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

У нас в телеграм-канале много увлекательной информации о дизайне. Присоединяйтесь к нам!

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

• Путешествие с книгой: о визуальной идентичности фестиваля Ad Marginem «по краям»
• «Пустая аббревиатура стала полноценным брендом»: специалисты представляют самые успешные графические примеры.
• «Слияние физического и виртуального»: кого стоит наблюдать дизайнеру
• Интерфейс представляет собой средство взаимодействия между пользователем и системой, обеспечивая удобный доступ к функционалу и информации. Данные, в свою очередь, являются основой для работы интерфейса, так как они содержат необходимую информацию, которую пользователи могут запрашивать и использовать. Эффективное сочетание интерфейса и данных позволяет достигать оптимального опыта взаимодействия, что в свою очередь способствует лучшему пониманию и выполнению задач.
• Пять современных художников, чьи имена стоит запомнить.