Привет, на связи Олеся Гумененко и Тимофей Контанистов. Мы отвечаем за дизайн продукта в СберМаркете. Расскажем, как создавали новые иллюстрации для приложения, наступали на грабли и делили апельсин.
Начнём с истории компании. Она влияла на визуальный стиль продукта — и на иллюстрации тоже.
Сначала мы были Instamart — небольшим, но гордым стартапом. Уже тогда работали по простой схеме: покупатель заказывал товары из магазина, сборщики их собирали, а курьеры привозили.
В 2019 года вошли в экосистему Сбера и сменили название на СберМаркет. Заказов стало больше в сотни раз, и нужно было переделывать приложение под новые масштабы и задачи. Заодно решили заняться иллюстрациями — чтобы соответствовать большому бренду и при этом найти собственный стиль, который можно масштабировать. На всё у нас была пара месяцев.
С этого места поподробнее.
Легаси, с которым мы жили
Конечно, в приложении Instamart были иллюстрации. Даже несколько: сборщик выбирал товары с полок, домохозяйка их разбирала и экономила время.
А ещё у нас был апельсинчик. Его придумал и нарисовал Боря Чубин, глава дизайна ещё в Instamart. Апельсинчик появлялся на оценке заказа и в письмах.
Вот с такими иллюстрациями мы стали СберМаркетом. Понятно, что нужны были новые, чтобы адаптироваться к новым ситуациям, экранам и масштабам.
Подход 1. Адаптация старого и масштаб, за которым трудно угнаться
В начале мы пересобрали существующие иллюстрации в новом стиле. Нарисовали сборщика, курьера и девушку с котиком.
Попытались их адаптировать к стилю экосистемы Сбера, сделать чуть современнее.
Когда эти иллюстрации появились в цвете и с деталями, нам показалось, что это то, что нужно. Тут были новые фирменные цвета, логотип и история.
Эти иллюстрации появились на экранах в сторах. Для нас, дизайнеров, это значило, что маркетинг всё принял и одобрил. А это уже большой шаг вперёд.
Тут начались проблемы. Эти иллюстрации рисовали не только для продукта, а всего сразу. Чтобы их адаптировать для разных форматов и экранов приложения, нужны время, силы и небольшая армия иллюстраторов. А у нас этого не было.
При этом иллюстрации со сборщиком, курьером и девушкой уже разошлись по отделам контента, маркетинга и продукта. Ресурсов на прорисовку не было, и получалось странное.
Конечно, такой расклад нам не нравился. И мы стали искать другие решения.
Подход 2. Возрождение фруктов и безликие руки
Мы стали рисовать иллюстрации точечно под приложение. Потому что разработка шла вовсю и откладывать дальше уже не получалось.
И тут вспомнили про апельсинчика. Идея с персонажем-маскотом нам понравилась: его можно адаптировать под разные экраны и ситуации. Поэтому мы попробовали прорисовать апельсинчик и даже придумали ему подружку-грушу.
Чтобы сразу примерить иллюстрации в приложение, сосредоточились на zero-скринах. Во-первых, на них можно показать наши ценности. Во-вторых — сгладить впечатление от ошибок или тупиковых сценариев.
Получилось мило, но плохо сочеталось с образом крупного СберМаркета. От этой идеи пришлось отказаться.
Следующим подходом рисовали руки. Казалось, что идея подходит. Приложение живёт в телефоне, телефон держат в руках.
После недолгих обсуждений поняли, что эта идея тоже плохая. Слишком уже обезличенная, и от рук не было никакой пользы. Думаем дальше.
Подход 3. Маленькие помощники, которые живут в телефоне
В конце концов мы решили поселить в приложение помощников. Они помогают собрать и доставить заказ в оффлайне. Пусть и в онлайне тоже у покупателя будет личный помощник.
Сначала думали про одного персонажа. Но потом нарисовали двоих — парня и девушку. Это честно, ведь сборщиком и курьером может быть кто угодно. Да и работать в паре проще и веселее.
(Небольшой спойлер: именно с этих персонажей начались подходы к гендерной нейтральности во всём продукте. Потом мы начали прорабатывать иконки и текст. Но об этом расскажем в других статьях).
Наброски получились живые, и мы решили добавить цвета. Но в первых цветных экспериментах потерялась пластичность и динамика. Пришлось сделать несколько подходов, пока не нашли свой стиль.
Иллюстрации по настроению совпали с основной аудиторией покупателей — это молодые люди 20–35 лет. Они покупают онлайн, часто пользуются доставкой и не любят сложности. И мы стараемся им отвечать с заботой и уместным юмором. Например, если что-то ломается, показываем сборщика с головой-ананасом. А у девушки есть перо: она же следит за списком покупок и расписанием доставок, такое лучше записывать.
На этих иллюстрациях решили остановиться. Они подходят по стилю, передают наши ценности и хорошо масштабируются.
Цифры и исследования
Любые изменения в приложении мы всегда тестируем. Так же поступили и с новыми иллюстрациями.
Конечно, нам они нравились. Но понравятся ли большинству пользователей — вопрос хороший,поэтому решили провести side-by-side для основных экранов с иллюстрациями. Сравнивали новые со старым апельсинчиком, безликими иконками и просто текстом (такое у нас тоже встречалось).
Задача простая — нужно выбирать иллюстрацию, которая нравится больше, и сказать почему.
Почти во всех тестах выиграли новые иллюстрации с помощниками. Поэтому мы решили катить их в приложении.
Вместо выводов
Наши иллюстрации появились в СберБанке Онлайн и пару раз засветились в экосистемных проектах. Значит, работу признали, и это приятно.
Конечно, для нового приложения мы сделали не только иллюстрации. Про иконки, организацию дизайн-системы и другие дизайнерские темы — то, что позволяет нам быть самими собой, — расскажем в следующих статьях.
Кстати, если хотите присоединиться к нашему дизайн-комьюнити, присмотритесь к вакансиям. Мы ищем дизайнера в Demand и самовывоз.
