Привет, на связи Олеся Гумененко и Тимофей Контанистов. Мы отвечаем за дизайн продукта в СберМаркете. Расскажем, как создавали новые иллюстрации для приложения, наступали на грабли и делили апельсин.
Начнём с истории компании. Она влияла на визуальный стиль продукта — и на иллюстрации тоже.
Сначала мы были Instamart — небольшим, но гордым стартапом. Уже тогда работали по простой схеме: покупатель заказывал товары из магазина, сборщики их собирали, а курьеры привозили.
В 2019 года вошли в экосистему Сбера и сменили название на СберМаркет. Заказов стало больше в сотни раз, и нужно было переделывать приложение под новые масштабы и задачи. Заодно решили заняться иллюстрациями — чтобы соответствовать большому бренду и при этом найти собственный стиль, который можно масштабировать. На всё у нас была пара месяцев.
С этого места поподробнее.
Легаси, с которым мы жили
Конечно, в приложении Instamart были иллюстрации. Даже несколько: сборщик выбирал товары с полок, домохозяйка их разбирала и экономила время.
А ещё у нас был апельсинчик. Его придумал и нарисовал Боря Чубин, глава дизайна ещё в Instamart. Апельсинчик появлялся на оценке заказа и в письмах.
Вот с такими иллюстрациями мы стали СберМаркетом. Понятно, что нужны были новые, чтобы адаптироваться к новым ситуациям, экранам и масштабам.
Подход 1. Адаптация старого и масштаб, за которым трудно угнаться
В начале мы пересобрали существующие иллюстрации в новом стиле. Нарисовали сборщика, курьера и девушку с котиком.
Попытались их адаптировать к стилю экосистемы Сбера, сделать чуть современнее.
Когда эти иллюстрации появились в цвете и с деталями, нам показалось, что это то, что нужно. Тут были новые фирменные цвета, логотип и история.
Эти иллюстрации появились на экранах в сторах. Для нас, дизайнеров, это значило, что маркетинг всё принял и одобрил. А это уже большой шаг вперёд.
Тут начались проблемы. Эти иллюстрации рисовали не только для продукта, а всего сразу. Чтобы их адаптировать для разных форматов и экранов приложения, нужны время, силы и небольшая армия иллюстраторов. А у нас этого не было.
При этом иллюстрации со сборщиком, курьером и девушкой уже разошлись по отделам контента, маркетинга и продукта. Ресурсов на прорисовку не было, и получалось странное.
Конечно, такой расклад нам не нравился. И мы стали искать другие решения.
Подход 2. Возрождение фруктов и безликие руки
Мы стали рисовать иллюстрации точечно под приложение. Потому что разработка шла вовсю и откладывать дальше уже не получалось.
И тут вспомнили про апельсинчика. Идея с персонажем-маскотом нам понравилась: его можно адаптировать под разные экраны и ситуации. Поэтому мы попробовали прорисовать апельсинчик и даже придумали ему подружку-грушу.
Чтобы сразу примерить иллюстрации в приложение, сосредоточились на zero-скринах. Во-первых, на них можно показать наши ценности. Во-вторых — сгладить впечатление от ошибок или тупиковых сценариев.
Получилось мило, но плохо сочеталось с образом крупного СберМаркета. От этой идеи пришлось отказаться.
Следующим подходом рисовали руки. Казалось, что идея подходит. Приложение живёт в телефоне, телефон держат в руках.
После недолгих обсуждений поняли, что эта идея тоже плохая. Слишком уже обезличенная, и от рук не было никакой пользы. Думаем дальше.
Подход 3. Маленькие помощники, которые живут в телефоне
В конце концов мы решили поселить в приложение помощников. Они помогают собрать и доставить заказ в оффлайне. Пусть и в онлайне тоже у покупателя будет личный помощник.
Сначала думали про одного персонажа. Но потом нарисовали двоих — парня и девушку. Это честно, ведь сборщиком и курьером может быть кто угодно. Да и работать в паре проще и веселее.
(Небольшой спойлер: именно с этих персонажей начались подходы к гендерной нейтральности во всём продукте. Потом мы начали прорабатывать иконки и текст. Но об этом расскажем в других статьях).
Наброски получились живые, и мы решили добавить цвета. Но в первых цветных экспериментах потерялась пластичность и динамика. Пришлось сделать несколько подходов, пока не нашли свой стиль.
Иллюстрации по настроению совпали с основной аудиторией покупателей — это молодые люди 20–35 лет. Они покупают онлайн, часто пользуются доставкой и не любят сложности. И мы стараемся им отвечать с заботой и уместным юмором. Например, если что-то ломается, показываем сборщика с головой-ананасом. А у девушки есть перо: она же следит за списком покупок и расписанием доставок, такое лучше записывать.
На этих иллюстрациях решили остановиться. Они подходят по стилю, передают наши ценности и хорошо масштабируются.
Цифры и исследования
Любые изменения в приложении мы всегда тестируем. Так же поступили и с новыми иллюстрациями.
Конечно, нам они нравились. Но понравятся ли большинству пользователей — вопрос хороший,поэтому решили провести side-by-side для основных экранов с иллюстрациями. Сравнивали новые со старым апельсинчиком, безликими иконками и просто текстом (такое у нас тоже встречалось).
Задача простая — нужно выбирать иллюстрацию, которая нравится больше, и сказать почему.
Почти во всех тестах выиграли новые иллюстрации с помощниками. Поэтому мы решили катить их в приложении.
Вместо выводов
Наши иллюстрации появились в СберБанке Онлайн и пару раз засветились в экосистемных проектах. Значит, работу признали, и это приятно.
Конечно, для нового приложения мы сделали не только иллюстрации. Про иконки, организацию дизайн-системы и другие дизайнерские темы — то, что позволяет нам быть самими собой, — расскажем в следующих статьях.
Кстати, если хотите присоединиться к нашему дизайн-комьюнити, присмотритесь к вакансиям. Мы ищем дизайнера в Demand и самовывоз.
Комментарии (13)
907
08.02.2022 12:20+1Для нас главное, чтобы приложение было рабочим и через него можно было делать заказы.
Какое совпадение ! Нам , покупателям Сбермаркета , это тоже нужно...Только вот за эти три месяца , что вы рисовали рюшечки , программа совсем испортилась . Не могу выбрать в магазине Лента в приложении Сбермаркет свои любимые багеты.Это хлебный продукт , если кто не в курсе...Ну , нет его в программе , и все...Неоднократно звонил на центральную службу поддержки , их ответ стандартный - если нет в программе , значит нет и в реальности в магазине...Несколько месяцев назад было все нормально , был багет в программе . Правда иногда по цене 1200 руб за штуку , но был...))) Это кто-то ответственный за наполнение продуктов в программе устанавливал неправильную цену ...Сборщики потом при заказе исправляли косяк ...В магазине Ашан вашего же приложения багет есть , но нет салата Оливье .Вернее он есть только одного вида , с курицей...Хотя в реальности салаты делают несколько видов...С наполнением программы позициями продуктов у вас полный швах...Пожалуйста сообщите руководству об этом, службе поддержки все похрен...
Еще вопрос.Почему в программе нельзя забить дисконтную карту , чтобы в итоге покупателю было чуть дешевле ? А в Ленте -онлайн это можно ! Руководство Сбера очень жадное? Почему в месяц только три бесплатные доставки обладателям подписки Сбер Прайм ? Еще в прошлом году все доставки были бесплатные...Вот поэтому-то я и ушел в Ленту-Онлайн...Там чуток честнее - и на карту бонусы капают и бесплатная доставка часто бывает доступна...Когда много заказов , делают платной иногда...И товары там чуть-чуть . но дешевле , чем в Сбермаркете...А вам я желаю наладить программу , чтобы она работала правильно .А рюшечки...Они не самые главные в этой жизни...
kontanistov Автор
08.02.2022 13:03Огромное спасибо за комментарий. Я обязательно донесу вашу проблему до продуктовых команд. Мы очень стараемся сделать приложение удобным для всех и постоянно работаем над тем, чтобы на витрине были актуальные товары.
907
08.02.2022 15:38Спасибо !
И , как я понял , это проблема не местной продуктовой команды, а именно проблема приложения.Набрал рандомный адрес в Москве , и тот же эффект - багетов в вашем приложении в магазине Лента г.Москвы нет...Показывает только пакетики сухариков , в названии которых есть слово багет...И сколько таких продуктов вы не указали в приложении - одному богу известно...
podluzny
09.02.2022 11:26+1Иллюстрации хорошие, но вместе с их заменой из приложения выкидываются не менее хорошие вещи.
Вот о ценностях: в старом варианте, когда «ничего не нашлось» пользователю предлагали помощь, а в новом просто разводят красиво руками и все действия оставляют на откуп самого пользователя. Так сказать, оптимизировали нагрузку на службу поддержки и стали немного безразличнее. История с экраном про любимые товары тоже немного похожа: в старой версии он учил пользователя, в новой он в меньше на этом акцентируется и ушел в иллюстративность.
kontanistov Автор
09.02.2022 13:12+1Не соглашусь.
Служба поддержки не может решить проблему пустых результатов поиска в моменте. Большинство нулевых запросов пользователи получают из-за опечаток. Мы только учимся работать с ними.
Новый экран любимых товаров предлагает целых 2 варианта дальнейших действий: заглянуть в каталог и посомтреть последний заказ, старый экран был тупиком.
vis_inet
Скажите, а эти все иллюстрации действительно так уж нужны в приложении?
alexmay
Спасибо. Даже и не знал, что в приложении есть иллюстрации... ????
Vorchun
"нажмите на сердечко", "заглянуть в каталог" - это такое заигрывание с молодой аудиторией. Доброта, нежность, няшность.
Вот выше по тексту.
Пока еще не наигрались.
С другой стороны, иллюстрации - это оформление. Если не мешает считыванию (прочтению) информации, то почему нет?
Neikist
Черт его знает, я и по возрасту вроде ЦА, и по мировосприятию. Но иллюстрации подобные раздражают. Изо всех щелей лезут. В статьях, приложениях…
Vorchun
Ну вот такая волна. Значит есть запрос от аудитории или маркетологи ошиблись, или пришли молодые продакт оунеры. Фиг его знает. Но ведь там метрики и исследования ) А нам остается дышать глубоко и "keep palm". Я с вами согласен, в целом.
kontanistov Автор
Для нас главное, чтобы приложение было рабочим и через него можно было делать заказы. Иллюстрации в нем не ключевой элемент. Мы делаем его для широкой аудитории и хотим уйти от серых, технических экранов, добавить эмоции и лишний раз рассказать о наших ценностях. Поэтому иллюстрации — только одно из возможных решений продуктовой задачи.
vis_inet
Посмотрите со стороны потребителя.
Мне, например, от приложения нужна понятность, хорошая функциональность и стабильность работы.
Какие-то эмоции и чьи-то ценности мне совершенно не нужны.
Sourrr
Рынок перенасыщен +/- одинаковыми по функционалу и удобству приложениями, сервисами, продуктами, брендами. Конкуренция зачастую выходит на уровень образов, настроений и ощущения. Иллюстрации один из инструментов. Когда их пилят, это делают не с целью, чтобы пользователь "Вау, какая классная иллюстрация". Это делают, чтобы пользователь скорее на уровне ощущений "Чет это приложение как-то повеселей, а это какое-то серое". И только то.
Комментарии наподобие вашего часто исходят от разработчиков или людей технических профессий. Прям всю дорогу таки сквозит подобный снобизм. Одним из таких является мой старший брат, в возрасте около сорока лет. А как залезаю в его телефон, посмотреть чем он пользуется, сразу все встает на места)) Порой люди с вашим взглядом, даже не замечают, как окружают себя продуктами, против которых воюют, высказывая свой прагматичный взгляд на вещи.