Привет, на связи Олеся Гумененко и Тимофей Контанистов. Мы отвечаем за дизайн продукта в СберМаркете. Расскажем, как создавали новые иллюстрации для приложения, наступали на грабли и делили апельсин.

Начнём с истории компании. Она влияла на визуальный стиль продукта — и на иллюстрации тоже.

Сначала мы были Instamart — небольшим, но гордым стартапом. Уже тогда работали по простой схеме: покупатель заказывал товары из магазина, сборщики их собирали, а курьеры привозили.

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

С этого места поподробнее.

Легаси, с которым мы жили

Конечно, в приложении Instamart были иллюстрации. Даже несколько: сборщик выбирал товары с полок, домохозяйка их разбирала и экономила время.

А ещё у нас был апельсинчик. Его придумал и нарисовал Боря Чубин, глава дизайна ещё в Instamart. Апельсинчик появлялся на оценке заказа и в письмах.

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

Подход 1. Адаптация старого и масштаб, за которым трудно угнаться

В начале мы пересобрали существующие иллюстрации в новом стиле. Нарисовали сборщика, курьера и девушку с котиком.

Попытались их адаптировать к стилю экосистемы Сбера, сделать чуть современнее.

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

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

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

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

Конечно, такой расклад нам не нравился. И мы стали искать другие решения.

Подход 2. Возрождение фруктов и безликие руки

Мы стали рисовать иллюстрации точечно под приложение. Потому что разработка шла вовсю и откладывать дальше уже не получалось.

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

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

Получилось мило, но плохо сочеталось с образом крупного СберМаркета. От этой идеи пришлось отказаться.

Следующим подходом рисовали руки. Казалось, что идея подходит. Приложение живёт в телефоне, телефон держат в руках.

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

Подход 3. Маленькие помощники, которые живут в телефоне

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

Сначала думали про одного персонажа. Но потом нарисовали двоих — парня и девушку. Это честно, ведь сборщиком и курьером может быть кто угодно. Да и работать в паре проще и веселее.

(Небольшой спойлер: именно с этих персонажей начались подходы к гендерной нейтральности во всём продукте. Потом мы начали прорабатывать иконки и текст. Но об этом расскажем в других статьях).

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

Иллюстрации по настроению совпали с основной аудиторией покупателей — это молодые люди 20–35 лет. Они покупают онлайн, часто пользуются доставкой и не любят сложности. И мы стараемся им отвечать с заботой и уместным юмором. Например, если что-то ломается, показываем сборщика с головой-ананасом. А у девушки есть перо: она же следит за списком покупок и расписанием доставок, такое лучше записывать.

На этих иллюстрациях решили остановиться. Они подходят по стилю, передают наши ценности и хорошо масштабируются.

Цифры и исследования

Любые изменения в приложении мы всегда тестируем. Так же поступили и с новыми иллюстрациями.

Конечно, нам они нравились. Но понравятся ли большинству пользователей — вопрос хороший,поэтому решили провести side-by-side для основных экранов с иллюстрациями. Сравнивали новые со старым апельсинчиком, безликими иконками и просто текстом (такое у нас тоже встречалось).

Задача простая — нужно выбирать иллюстрацию, которая нравится больше, и сказать почему.

Почти во всех тестах выиграли новые иллюстрации с помощниками. Поэтому мы решили катить их в приложении.

Вместо выводов

Наши иллюстрации появились в СберБанке Онлайн и пару раз засветились в экосистемных проектах. Значит, работу признали, и это приятно.

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

Кстати, если хотите присоединиться к нашему дизайн-комьюнити, присмотритесь к вакансиям. Мы ищем дизайнера в Demand и самовывоз.