Быстрее, удобнее, понятнее: как изменилось приложение СБЕР ЕАПТЕКА

В условиях жесткой конкуренции e-commerce компаниям необходимо «держать руку на пульсе» и постоянно улучшать приложения с учетом пожеланий клиентов. О том, как СБЕР ЕАПТЕКА провела редизайн мобильного приложения, чтобы отвечать новым запросам аудитории, рассказали руководитель продукта Кирилл Кирюшин и руководитель отдела дизайна Анна Бакирова.

Пора меняться

В 2020 году СБЕР ЕАПТЕКА продемонстрировала существенный рост: выручка увеличилась на 96%, средний чек вырос на 13%, а приложение компании вошло в сторах в ТОП-3 в категории «Медицина». Изменилось и потребительское поведение клиентов: если в 2019 году более половины из них оформляли заказы через сайт, то в 2020 году уже предпочитали совершать покупки с помощью мобильных приложений.

Приложение ЕАПТЕКА появилось в 2016 году. Его функционал не сильно отличался от сайта – удобная платформа для совершения онлайн-заказа. Пользователю, по сути, был доступен лишь каталог. Это типично для приложений, созданных «на заре» российского мобайла. В то время их использовали только для совершения покупки в интернете, о дополнительных опциях вроде программы лояльности или отслеживаемости заказа не задумывались ни пользователи, ни разработчики.

Приложение ЕАПТЕКА в 2016 году
Приложение ЕАПТЕКА в 2016 году

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

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

Чтобы максимально облегчить клиентам выбор товаров, нам необходимо было максимально понятно и наглядно предлагать пользователям аналоги лекарств или дополнительные товары.

Кирилл Кирюшин, руководитель группы продуктов электронной коммерции СБЕР ЕАПТЕКА

Редизайну приложения способствовало и то, что в конце 2020 года ЕАПТЕКА стала частью экосистемы «Сбера» и группы компаний «Р-Фарм». Требовалось усовершенствовать дизайн в соответствии с новым брендбуком и фирменными цветами.

Как менялось приложение

Редизайн – это довольно объёмная работа, в которую вовлечены дизайнеры, разработчики, UX-специалисты, маркетологи и даже социологи. Сам процесс поделен на этапы и занимает довольно много времени. Вот как происходила трансформация приложения СБЕР ЕАПТЕКА.

Как менялось приложение: в 2016 году, в 2018 году и в 2022 году
Как менялось приложение: в 2016 году, в 2018 году и в 2022 году

1 этап. Определение целей

У компании было две недели на редизайн нового приложения.

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

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА

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

Ключевые компоненты должны были соответствовать гайдлайнам экосистемы СБЕРа: типографика, цветовая палитра, вёрстка. Чтобы пользователи видели преемственность бренда, мы сохранили два фирменных цвета ЕАПТЕКА – фиолетовый и оттенок зеленого. В обновленном дизайне руководствовались основными правилами доступности: контрастность текстовых и других элементов для упрощения чтения текста, а также избавились от всего лишнего, что отвлекало пользователя от его цели: поиск лекарств и информации о них.

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА

2 этап. Начало разработки новой версии приложения

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

3 этап. Исследование клиентского пути

Для определения потребностей пользователей, маркетологи ЕАПТЕКА совместно с внешним агентством провели исследование и выяснили, что важно пользователям интернет-аптек. Вот какими оказались результаты:

  1. Аккуратность дизайна и интерфейса. Упорядоченный внешний вид приложения подчеркивает экспертность. Перегруженный дизайн в стиле азиатских интернет-магазинов работает во вред онлайн-аптекам.

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

  3. Простота оформления заказа. Пользователь хочет совершить покупку в несколько кликов, не тратя на процесс оформления много времени. Ему важно сразу понимать, надо ли самостоятельно идти за лекарством в аптеку или заказ может привезти курьер.

4 этап. Пересмотр механизма оформления заказа

В ходе исследования стало понятно, что у пользователей приложения СБЕР ЕАПТЕКА возникают сложности с оформлением заказа.

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

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА

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

Быстрее, удобнее, понятнее: как изменилось приложение СБЕР ЕАПТЕКА

5 этап. Планирование разработки нового приложения

Все сайты и приложения, которые фигурировали в исследовании клиентского пути, взяли в работу наши дизайнеры. Они прорабатывали дизайн с учетом предпочтений пользователей. Параллельно велась разработка двух версий приложения — для системы iOS и Android.

Кирилл Кирюшин, руководитель продукта в СБЕР ЕАПТЕКА

6 этап. Адаптация промо-страниц

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

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

Кирилл Кирюшин, руководитель продукта в СБЕР ЕАПТЕКА

7 этап. Тестирование новой версии

На начальной стадии приложение стало доступно только для Android, и лишь для 20% пользователей. Это позволило отслеживать обратную связь и оперативно реагировать на нее.

Первое, что обнаружилось в результате масштабного тестирования – новый дизайн кнопки добавления товара в корзину с листинга (лента товаров, которую видит пользователь, например, по результатам поиска) оказался не очень эффективным. Конверсия с листингов уменьшилась, причем чуть ли не на 30%, что является значительным показателем.

Кнопка «Купить» была в градиентной расцветке. На ней указали цену и плюсик. До этого мы несколько раз тестировали кнопку на небольших группах, и все было хорошо. Но когда «раскатили» проект на большую аудиторию, показатели изменились.

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА

Тогда мы разработали еще три варианта кнопки «Купить» и провели их тестирование. Результаты на большей аудитории показали, что пользователи чаще кликают на более яркую кнопку с простым и ясным посылом «Купить». Когда мы раскатили этот дизайн на всех пользователей, конверсия добавления товара в корзину выросла на 19%.

Быстрее, удобнее, понятнее: как изменилось приложение СБЕР ЕАПТЕКА

8 этап. Запуск новой версии

Редизайн и разработка заняли в сумме примерно 9 месяцев — от идеи до перехода 100% пользователей на новое приложение. За это время у него изменились дизайн и вёрстка, было сделано тестирование во всех средах (в том числе, среди пользователей). Только после этого финальный вариант обновленного приложения представили пользователям. Android-версия стала доступна для скачивания в июне этого года, а приложение для iOS — в августе.

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

В контакте с пользователями

Работа по улучшению приложения СБЕР ЕАПТЕКА не останавливается. Самое важное для нас — регулярно собирать обратную связь от пользователей. Мы узнаем у пользователей соцсетей, что можно улучшить в приложении, а затем на основе получившихся результатов, проводим с клиентами глубинные интервью. Последнее такое исследование завершилось в августе. В нем поучаствовало 500 человек.

Судя по отзывам наших пользователей, приложение СБЕР ЕАПТЕКА стало более простым и понятным. Мы и дальше продолжим улучшать приложение, чтобы пользоваться им стало еще комфортнее.

Анна Бакирова, руководитель отдела дизайна в СБЕР ЕАПТЕКА
23
8 комментариев

Спасибо! Всегда интересно читать, как большие продукты работают внутри :)

1
Ответить

Обхожу стороной все коллабрации сбер.

1
Ответить

Почему?

1
Ответить

Комментарий недоступен

Ответить

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

1
Ответить

А в новой версии приложения в характеристиках лекарства действующее вещество также будет переносится по одной букве на новую строчку?

Ответить