Изменение стиля иллюстраций в Shopify

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

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

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

• вносить ясность;
• точно и напрямую предоставлять информацию;
• вселять людям уверенность в то, что они могут доверять нам на пути к созданию своего успешного бизнеса. 

Итак, в данной статье представлен процесс создания стиля, который мы имеем на сегодняшний день, на основе айдентики (фирменного стиля) Shopify. 

1. Исследования

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

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

Мы исследовали множество различных стилей, некоторые из которых были очень графичными и плоскими, другие больше опирались на линии и детали.Большая часть данного процесса состояла из нескольких спринтов (короткие регулярные циклы работы длиной не более четырех недель) совместно с другими командами. Более того, сильное влияние на него оказало новое исследование языка дизайна, которое проводилось в то же время, что определенно помогло в разработке стиля вместе с нашими командами по продукту и контенту. 

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

2. Доработка стиля

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

3. Многообразие и инклюзивность

Мы намеренно использовали этот стиль, чтобы попытаться понять, кто на самом деле наши продавцы, учитывая многообразие их биосоциальных признаков:

• расы;
• возраста;
• пола;
• ориентации;
• вероисповедания;
• наличия ограниченных возможностей. 
  

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

4. Фотографии или иллюстрации?

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

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

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

5. Цвет и глубина

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

6. Шкала выразительности

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

Мы распределили иллюстрации по зонам шкалы выразительности следующим образом:

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

• Функциональная зона. Данную позицию прочно занимают состояния ошибок, то есть включают упрощенные и очевидные иконки. На таких страницах нет места путанице. Мы также не хотим добавлять сюда слишком много индивидуальности, которая может быть воспринята как бесчувственность в стрессовой ситуации (например, как рисунок с кошкой выше);
• Выразительная зона. В данной зоне находятся основные иллюстрации, которые обладают большей индивидуальностью и притягивают к себе гораздо больше внимания, чем иллюстрации других категорий. Мы используем их умеренно и лишь в определенных случаях, например, в блоге или рекламе.
  

Также, в зависимости от зоны, на эту шкалу наносятся используемые нами цвета:

• Для функциональной (системные иконки) и умеренной (пустые состояния) зоны — ограниченная и сдержанная цветовая палитра;
• Для выразительной (внутренние карточки и основные иллюстрации) зоны — яркие и смелые цвета.

7. Реализация

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

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

8. Результаты

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

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

Мы продолжаем работать в этом новом стиле, он будет развиваться и расти, и мы надеемся, что сможем опираться на него долгое время.

Мы не смогли бы сделать это без помощи многих членов нашей команды Shopify. Алекс Пейдж, Кайл Дюран и Эмма Орхун помогли нам с реализацией и разработкой, Алистер Лейн и Джесси Беннет-Чемберлен были неутомимы, предоставляя обратную связь, внося правки и помогая в продвижении этого проекта.

Спасибо!