Привет, мы — команды мобильной разработки и дизайна СберМегаМаркета. В этой статье мы расскажем, какие сложности скрываются за, казалось бы, относительно простым с технической точки зрения редизайном мобильного приложения.
В процессе мы решили, что не все ошибки стоит немедленно исправлять и провели с десяток бессонных и одну нервную ночь перед самым релизом.
27 апреля 2021 года мы объявили о ребрендинге, в процессе которого маркетплейс получил не только новое имя и логотип, но изменился также фирменный стиль и цветовая гамма, добавились сервисные возможности и новые средства идентификации. Подготовка началась примерно за несколько месяцев до официального релиза, но у нас было несколько крупных итераций, в результате которых фактически процесс приходилось полностью начинать заново.
100 оттенков маркетплейса, или дьявол кроется в деталях
При выборе позиционирования для маркетплейса нам было важно:
сохранить дух свободы, свойственный компании до ребрендинга;
сохранить основные ценности – открытость, добродушие, готовность прийти на помощь;
найти гибкое решение, подразумевающее достаточную свободу действий – ведь маркетплейс работает со множеством категорий товаров и коммуницирует с самыми разными группами потребителей и продавцов.
Первым шагом стал выбор цвета, для нового логотипа и акцентов в интерфейсе. В дизайн-коде Сбера более 100 фирменных цветов. Мы перепробовали их все.
Из всего разнообразия цветов, из которых мы выбирали, осталось всего четыре основных
Мы раз за разом раскрашивали будущий логотип и смотрели, что получится. Большинство цветов отбросили из-за низкой контрастности и читаемости. От других отказались из-за несовпадения с целевой аудиторией.
Так, розовый достаточно хорошо смотрится, но в массовой культуре он ассоциируется с чем-то женским. Мы же хотели оставаться гендерно-нейтральными для клиентов. Черный и голубой варианты отбросили, как мрачноватые и недостаточно дружелюбные. Во многом мы ориентировались на ощущения, но зачастую именно так и формируется образ бренда.
Как вы догадываетесь, в итоге мы остановились на фиолетовом цвете.
Он контрастный и инклюзивный: люди со слабым зрением смогут различить, что написано на экране. Еще один плюс фиолетового — отсутствие привязки к определенному действию.
Многие люди ассоциируют цвета со статусами процессов: красный — проблема, оранжевый — в работе, зеленый — выполнено. С фиолетовым таких ассоциаций не возникает. А еще маркетинговая команда в результате проведения точечных исследований подтвердила, что это удачный выбор для рекламы. Так что выбор был сделан.
Еще нам предстояло внедрить фирменный шрифт Сбера и скруглить большинство визуальных элементов.
Цвет, шрифт и кнопки — стали программой минимум. Поначалу мы хотели сделать больше: оптимизировать пользовательские пути, переделать экраны, но даже первых трех пунктов оказалось достаточно, чтобы по полной загрузить и дизайн, и разработку.
Помимо разработки и утверждения дизайнов нужно было:
обновить порядка 26 лендингов, на которых использовалось около 100 макетов;
провести ресайз примерно 1000 баннеров;
обновить социальные сети;
подготовить все для публичной коммуникации (онбординг для клиентов и продавцов) и рекламных кампаний.
Привет из прошлого, или как нас догоняли старые ошибки и почему мы не стали их исправлять
В процессе редизайна быстро выяснилось, что нам не хватает макетов и отдельного файла со всеми стилями маркетплейса. Вместо этого, стилевые атрибуты раскиданы по разным xml-файлам. Чтобы понять, какие стили у нас есть, большое количество разрозненных макетов и компонентов пришлось структурировать — вручную просмотреть код и определить, какие цвета, шрифты, начертания относятся к каждому стилю.
Также пришлось заново отрисовать большую часть из нескольких десятков экранов. Делать это для того, чтобы просто поменять цвета, очень трудоемко. Спасло только то, что мы сохранили некоторое количество компонентов — в Figma это элементы или блоки, которые можно комплексно изменять. Они немного ускорили процесс, но править цвета и стили в самом приложении пришлось вручную.
Зато теперь мы точно знаем, как помочь себе из будущего: собрать все макеты, заранее вынести как можно больше стилей в базовые и время от времени обновлять их.
Другим вызовом стало соблюдение баланса между новыми и старыми элементами. Когда мы начали изучать макеты, в глаза бросились шероховатости и просто устаревшие дизайнерские решения. Но нельзя было увлекаться и переделывать все сразу.
Может показаться, что мы упустили идеальный момент для полной переработки приложения, но это не так. Делать все с нуля было бы ошибкой.
При редизайне важно обновить интерфейс, но не стоит делать это радикально. Несмотря на новый логотип, цветовую гамму и округлившиеся кнопки, приложение должно остаться узнаваемым. Иначе постоянные пользователи будут дезориентированы и не смогут с ходу разобраться в интерфейсе.
Единственное, что мы значительно переработали — главный экран приложения. Мы переупорядочили баннеры, выделили главное с помощью отступов и заголовков. В то же время то, что касается упрощения пользовательских путей и удаления лишних экранов, скрепя сердце, оставили на потом. Такие изменения лучше вносить поэтапно, чтобы пользователи успели сориентироваться и привыкнуть.
Ночь перед релизом
На долю разработчиков выпало не только внедрение макетов, но и добавление новых фирменных сервисов, таких, как Sber ID и бонусы от СберСпасибо. Почти все мобильное приложение написано на Kotlin, и только протофайлы на Java. Мы используем MVVM-архитектуру, LiveData и корутины. Поэтому интегрировать в приложение новые функции удалось относительно быстро. Сложности возникли только под конец, на этапе публикации приложения.
Сперва они были связаны с иконкой — у нас были стандартные пиктограммы из брендбука, но они не подходили для СберМегаМаркета, поэтому мы рисовали новые и для приложения, и для отображения в сторах. И все бы ничего, но перед самым запуском оказалось, что иконка приложения не отображается в Google Play.
Оказалось, что из-за особенностей импорта SVG-файлов некоторые теги не обрабатывались. Мы перерисовывали иконку и меняли цветовые переходы пять или шесть раз, прежде чем нашли вариант, который отобразился в каталоге приложений.
Однако, в день запуска тоже не обошлось без неожиданностей. Обычно, обновления приложения заливаются в сторы автоматически, через CI, но на этот раз мы ждали, пока обновится сайт маркетплейса, переустановят доменные имена и коллеги подготовят инфраструктуру. Рассчитывали, что процесс завершится глубоко ночью и мы сразу отправим приложение на скатку. В 3 часа один из разработчиков нажал кнопку «опубликовать», и приложение отправилось на ревью, а разработчик — на заслуженный отдых. И только к 6 часам утра мы заметили: что-то пошло не так, и в сторах по-прежнему красуется логотип goods.ru.
Оказалось, что приложение прошло автоматическую проверку Google, но его статус: «не опубликовано». Мы так долго полагались на автоматику, что забыли про специфику Google Play. Если выкладывать приложение вручную, то стор требует повторно подтвердить согласие на публикацию.
Что же касается App Store, то там новый СберМегаМаркет отправился не в каталог, а на ручную модерацию. Приложение стало доступно только к 9 утра, и мы наконец вздохнули с облегчением — успели.
По правде говоря, в следующем обновлении мы удалили еще пару упоминаний goods.ru на разных экранах и удаляли помарки в UI, которые чудом не заметили ранее, но это мелочи. В целом, редизайн прошел успешно, вместе с одним из самых напряженных периодов в нашей работе.
За два месяца наша команда:
изучила и адаптировала новый дизайн-код под маркетплейс;
навела порядок в макетах и стилях приложения;
доработала интерфейс и подключила к приложению новые сервисы;
и, что немаловажно, мы сделали это вовремя.
Вероятно, мы не успели бы в срок, если бы работали по классической схеме через продакт-менеджера, который скидывает задачу и контролирует выполнение. Но, вместо этого, дизайн и разработчики собрались в одной комнате и все два месяца общались напрямую, в том числе в плотной связки с коллегами из маркетинга и коммерции. Возможно, это не самый правильный подход с точки зрения организации работы, но он сильно сплотил команду и принес результаты, которые каждый день видят наши клиенты.