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

No items found.
Аудио перевод статьи
0:00
0:00
·

Как мы развиваем наш стиль, чтобы завоевать доверие продавцов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оба изображения показывают настройку рекламы через Facebook и Google. Фотография используется на Shopify.com, а иллюстрация - в продукте Shopify.

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

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

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

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

Шкала выразительности: функциональные — умеренные — выразительные иллюстрации

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

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

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

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

Имплементация

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

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

Результаты

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

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

Спасибо!

Источник:
ux.shopify.com
·
comments powered by HyperComments