Как в разы сократить время на анализ конкурентов и поиск лучших практик?
Почему у lululemon UX в хорошей форме?
30 моментов в приложении канадского бренда спортивной одежды, которые улучшают пользовательский опыт
Итак, продолжаем наше международное турне по e-com сервисам. На этот раз в фокус моего внимания попал lululemon – популярный канадский бренд, специализирующийся на производстве премиальной hi-tech одежды и аксессуаров для йоги, фитнеса и активного образа жизни.
В отличие от Amazon или Walmart, активно создающих у клиента впечатление, будто их аппы застряли в 2008 (год запуска App Store), lululemon достаточно свежий: видно, что коллеги вкладываются и в UX, и в UI. А сегодня мы по традиции разберем 30 интересных моментов в их приложении, которые можно взять на заметку или перенять.
Как всегда, делитесь этим постом с коллегами, которым материал может быть полезен, и подписывайтесь на выход нового контента в Telegram.
В отличие от Amazon или Walmart, активно создающих у клиента впечатление, будто их аппы застряли в 2008 (год запуска App Store), lululemon достаточно свежий: видно, что коллеги вкладываются и в UX, и в UI. А сегодня мы по традиции разберем 30 интересных моментов в их приложении, которые можно взять на заметку или перенять.
Как всегда, делитесь этим постом с коллегами, которым материал может быть полезен, и подписывайтесь на выход нового контента в Telegram.
Призыв к регистрации
UX-редактура – вещь важная. Поэтому, если клиент еще не создал профиль, ему предлагают это сделать, не заманивая скидками, а подчеркивая, что его незабываемый customer journey – впереди.
Преимущества в welcome email
А вот в приветственном сообщении после регистрации сервис в явной форме подсвечивает, какие преимущества теперь доступны клиенту, повышая шансы на активацию и начало использования.
Экран потянул – совет получил
В iOS потянуть страницу вниз, чтобы обновить, уже давно стало распространенным паттерном, который отрабатывается большинством сервисов стандартно: появляется индикатор ожидания, затем контент страницы обновляется.
В lululemon решили, что с этой скукой пора завязывать, поэтому когда вы тяните главный экран вниз, вас встречает мотивационная фраза или полезный совет, которые со временем меняются.
В lululemon решили, что с этой скукой пора завязывать, поэтому когда вы тяните главный экран вниз, вас встречает мотивационная фраза или полезный совет, которые со временем меняются.
Собери свой костюм
Компания выпускает достаточно большое количество вариантов верха и низа для спортивных костюмов, а количество сочетаний – в разы больше (если кто помнит комбинаторику).
В lululemon решили «оживить» процесс подбора костюма, поэтому вместо стандартного «скучного» каталога прямо с главного экрана можно перейти к конструктору костюма.
Свайпаешь варианты верха, низа, выбираешь наиболее подходящий цвет – и сразу видишь, каким будет твой костюм, состоящий из двух половинок.
В lululemon решили «оживить» процесс подбора костюма, поэтому вместо стандартного «скучного» каталога прямо с главного экрана можно перейти к конструктору костюма.
Свайпаешь варианты верха, низа, выбираешь наиболее подходящий цвет – и сразу видишь, каким будет твой костюм, состоящий из двух половинок.
Почти как новые
Примечательно, что прямо в своем приложении lululemon позволяет купить не только новую одежду, но и ту, что была в использовании, и, разумеется, сохранившую товарный вид.
С одной стороны, может показаться, что компания стреляет себе в ногу: «пусть лучше купят новое, чем со скидкой». Но с другой стороны, тут мы видим соответствие глобальному тренду на ресейл, заботу о природе и расширение аудитории за счет тех, для кого текущая продукция дороговата и тех, кто привык закупаться в секонд-хендах: зачем искать lululemon в секонде, если в lululemon уже есть свой секонд?
С одной стороны, может показаться, что компания стреляет себе в ногу: «пусть лучше купят новое, чем со скидкой». Но с другой стороны, тут мы видим соответствие глобальному тренду на ресейл, заботу о природе и расширение аудитории за счет тех, для кого текущая продукция дороговата и тех, кто привык закупаться в секонд-хендах: зачем искать lululemon в секонде, если в lululemon уже есть свой секонд?
Запрос фидбэка на главной
В отличие от стандартной «бесконечной» ленты товаров, которой заканчиваются главные экраны во многих приложениях, в lululemon главный экран ограничен, а после ознакомления с ключевым контентом пользователю предлагают
Реакция карточек на нажатие
Очень нравится, когда сервисы прорабатывают интерфейс в деталях и заботятся о мелочах. В частности, в lululemon предусмотрели реакцию карточек листинга на касание – это делает интерфейс более отзывчивым.
Микроанимация
Еще один момент, который делает интерфейс более приятным глазу и не так уж сложен в разработке – микроанимация: при сохранении товара, вокруг сердечка появляется всплеск, добавляющий эмоций, а бейдж с числом товаров в корзине ненавязчиво пульсирует, привлекая внимание и добавляя интерфейсу живости.
Выбор цвета в листинге
Слайдером с фото в листинге уже никого не удивишь. А вот выбор цвета встречается реже: можно не просто ознакомиться со спектром цветов, но и посмотреть фото товара в конкретном цвете. А там и до добавления в корзину недалеко.
Фильтр по цвету
Вместо просто названий, фильтр по цвету в листинге содержит еще и миниатюры, которые позволяют облегчить восприятие и быстрее выбрать нужный вариант.
Названия цветов
С названиями цветов в lululemon – отдельная песня: вместо обычных названий – бордовый, красный, голубой – тут можно встретить «бургундский залив», «оксфордский красный», «океанскую волну».
Учитывая, что в каждое из названий вложен дополнительный интересный смысл, это делает их более завлекающими и придает дороговизны / премиальности.
Учитывая, что в каждое из названий вложен дополнительный интересный смысл, это делает их более завлекающими и придает дороговизны / премиальности.
Трендовые цвета
Примечательно, что наиболее «горячие» цвета в сезоне сервис выделяет на фоне остальных и подсвечивает в отдельной подборке, привлекающей дополнительное внимание.
Размер и рост модели
В карточках товаров под фото подсвечивается, какой у модели рост и какой на ней размер одежды. Это позволяет покупателям соотнести размеры/комплекцию со своими и лучше выбрать размер – а это уже может влиять на объемы возвратов.
Гайд по размерам
Также клиентам доступен специальный гайд, позволяющий облегчить выбор размера. В частности, в нем с иллюстрациями показывается, что и как нужно мерить: это снижает процент ошибочных замеров – и также влияет на объем возвратов.
Оценки в таблице размеров
Отдельно стоит заметить, что в таблицу размеров интегрированы оценки с отзывами: так сервис создает дополнительную точку контакта клиента с социальным доказательством, побуждая ознакомиться с мнением других покупателей.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
Соответствие размеру
Когда клиент оставляет отзыв о купленном товаре, сервис просит указать, насколько он соответствует заявленному размеру. На основе этих данных создается агрегированный показатель, который помогает лучше определиться и не ошибиться с размером.
Подписка на размер
Компания регулярно перешивает модельные ряды, поэтому если товар понравился, но вашего размера не оказалось в наличии – не беда: на него можно подписаться, и сервис оповестит вас, как только он снова появится в продаже.
Запомним твой размер
Указывать размер каждый раз при добавлении товара в корзину может быть утомительно. Поэтому сервис запоминает ваш размер при покупках и подставляет размер из самого свежего заказа, чтобы это не приходилось делать вам.
Преимущества и особенности
В карточках товаров есть своего рода мини-лендинги, в которых подсвечиваются ключевые преимущества и особенности конкретной модели. Такой формат делает изучение информации более увлекательным.
Дополни образ
Также в карточках предлагается дополнить образ. На выбор часто предлагается сразу несколько образов, что повышает шансы, что какой-то образ приглянется клиенту. Ну а каждый элемент образа можно быстро сохранить на будущее.
Купи весь образ
Логично, что на моделях на фото какого-то конкретного товара только он, и стилисты специально подбирают другие элементы образа из других товаров компании.
Ну а если такой образ вам приглянулся, ничто не останавливает вас от того, чтобы быстро добавить в корзину и остальные элементы: сервис об этом позаботился.
Ну а если такой образ вам приглянулся, ничто не останавливает вас от того, чтобы быстро добавить в корзину и остальные элементы: сервис об этом позаботился.
Корзина vs. сохранённые
Корзина и сохранённые товары – это два соседних списка, между которыми легко переключаться при любом уровне скролла, т.к. соответствующие вкладки зафиксированы.
Ну а чем легче зайти сохраненные и добавить оттуда отложенный товар, тем выше шансы обеспечить компании более высокий средний чек.
Ну а чем легче зайти сохраненные и добавить оттуда отложенный товар, тем выше шансы обеспечить компании более высокий средний чек.
Карта в wallet
Глобально нативное приложение wallet часто используется для хранения карт лояльности, и многим пользователям более удобно открыть карту именно там, чем лезть в приложение.
Поэтому в lululemon дают возможность добавить карту в wallet: с одной стороны, это может негативно влиять на MAU приложения, с другой – повышают удобство для клиента – а это главное.
Поэтому в lululemon дают возможность добавить карту в wallet: с одной стороны, это может негативно влиять на MAU приложения, с другой – повышают удобство для клиента – а это главное.
Возврат без чека
Наверное, многие из нас хотя бы раз слышали фразу a-la «только чек не выкинь – а то товар обратно не примут». К lululemon эта фраза не применима: даже если чека у вас нет, вы сможете вернуть товар.
Чат в iMessage
Видимо команда разработки старается использовать возможности, которые дает Apple, поэтому вместо того, чтобы пилить свой чат, клиентам предлагается пообщаться с поддержкой в брендированном чате в iMessage.
Реакция на скриншот
Если мы делаем скриншот товара, помимо ссылки для шеринга, сервис отрабатывает еще один важный поведенческий паттерн своих клиентов.
Часть из них сохраняет товар не для того, чтобы поделиться им с кем-то, а для себя: просто чтобы не забыть понравившийся товар. Таким клиента предлагают сохранить его в избранное.
Часть из них сохраняет товар не для того, чтобы поделиться им с кем-то, а для себя: просто чтобы не забыть понравившийся товар. Таким клиента предлагают сохранить его в избранное.
Empty state заказов
Если вы еще не сделали ни одного заказа, но вам приглянулись некоторые товары, сервис любезно подкладывает подборку того, что вы сохраняли, побуждая перейти от «хочу» к «ношу».
App intents
Разработчики выделили ключевые действия в приложении в App Intents: это позволяет, например, быстро перейти к поиску товаров из поиска в iOS или сразу же перейти в корзину lululemon, общаясь голосом в Siri.
Динамические быстрые действия
Сервис не просто использует быстрые действия, но и делает их динамическими: так, подпись с количеством товаров в корзине обновляется, когда вы добавляете или удаляете что-то из неё.
Виджет для вдохновения
Также lululemon выходит в iOS за рамки своего приложения и позволяет просматривать подобранные для вас подборки новинок с помощью специального виджета на Home screen.
To be continued...
Итак, это были 30 интересных моментов, которые зацепили моё внимание в приложении бренда lululemon. Многие механики и особенности UI из тех, что встретились в этой статье, можно перенять и адаптировать в своих e-com проектах.
Время от времени в следующих статьях я буду «заезжать» в другие страны, на другие рынки и делиться с вами находками. А вас, как всегда, призываю поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Время от времени в следующих статьях я буду «заезжать» в другие страны, на другие рынки и делиться с вами находками. А вас, как всегда, призываю поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Все статьи по e-commerce